Basics
Some ".ace-nav" colors to change the top bar elements color:
The following colors are defined:
- <ul class="nav ace-nav">
- <li class="purple">
- ...
- </li>
- <li>
- ...
- </li>
- </ul>
grey
purple
green
light-blue
light-blue2
red
light-green
light-purple
light-orange
light-pink
dark
white-opaque
dark-opaque
As well as the following:
.no-border
.margin-4
.margin-3
.margin-2
You can find them inside the ace-nav.less file. The colors are defined in variables.less.
.ace-nav > li
may change color. The color is dynamically changed by switching to one of the above mentioned color classes using Javascript and is not dependent on that specific skin. A few additional classes have been defined in utility.less that may be useful at times.
.lighter
.bolder
.inline
.block
.center & .align-center
.align-left
.align-right
.middle & .align-middle
.align-top
.align-bottom
.position-relative
.position-absolute
.no-underline
.no-hover-underline
.no-shadow
For example .inline and .position-relative can be used to add a dropdown inside a "DIV" element without the need to define a new class:
- <div class="inline position-relative">
- <a href="#" data-toggle="dropdown" class="dropdown-toggle">Show Menu</a>
- <ul class="dropdown-menu">
- </ul>
- </div>
The following color classes have been defined (the values can be changed inside variables.less):
.dark
.white
.red
.light-red
.blue
.light-blue
.green
.light-green
.orange
.orange2
.light-orange
.purple
.pink
.pink2
.brown
.grey
.light-grey
.bigger-110
.bigger-120
... .bigger-290
.bigger-300
.bigger-125
.bigger-175
.bigger-225
.bigger-275
.smaller-20
.bigger-30
... .smaller-90
.smaller-25
.smaller-75
- <i class="icon-twitter blue bigger-150"></i>
- <i class="icon-user smaller-75"></i>
The following classes specify a percentage of the parent element's width:
.width-20
.width-25
... .width-95
.width-100
- <div class="clearfix">
- <a href="#" class="pull-left btn btn-small width-45">Button 1</a>
- <a href="#" class="pull-right btn btn-small width-45">Button 2</a>
- </div>
Some spacing classes to add horizontal space:
.space-2
.space-4
... .space-30
.space-32
.vspace-2
... .vspace-32
name. They are hidden in larger screens and visible in smaller devices where blocks are stacked on top of each other and some space between them would be nice.
- <div class="space-16"></div>
- ...
- <div class="span6"></div>
- <div class="vspace-16"></div> <!-- space visible on smaller devices -->
- <div class="span6"></div>
Similar classes are defined for horizontal lines:
.hr-2
.hr-4
... .hr-30
.hr-32
- <div class="hr-10"></div>
- <div class="hr-16 hr-double dotted"></div>
Some other classes are:
.overflow-visible
.overflow-hidden
.overflow-scroll
.overflow-auto
For example the default CSS "overflow" property of "tab-content" in Bootstrap is set to auto.
That doesn't look nice in the homepage's "Recent Tasks" tab when dragging and sorting tasks around.
Using the "overflow-visible" class makes it better, without the need to define new CSS rules for that specific item or using inline styles.
- <div class="tab-content overflow-visible">
- <!-- Tab Content Here -->
- </div>
More classes that may be handing at times:
.no-margin
.no-padding
.no-border
.header
classes with same above text colors:
- <h3 class="header blue lighter smaller">
- Header Text
- </h3>
A few additional classes for elements
For bootstrap tabs some extra classes have been defined.
For the .tab-content
element:
.no-border
.no-padding
.padding-2
.padding-4
... .padding-32
.nav-tabs
element: .padding-2
.padding-4
... .padding-32
.tab-space-1
tab-space-2
... .tab-space-4
.tab-size-bigger
.tab-color-blue
- <ul class="nav nav-tabs tab-space-2">
- </ul>
- <ul class="nav nav-tabs tab-color-blue">
- </ul>
- <ul class="nav nav-tabs tab-size-bigger">
- </ul>
.accordion-style2
for alternative style:
- <div class="accordion accordion-style2">
- ...
- </div>
Progress bars come with some extra colors and sizes:
.progress-purple
.progress-pink
.progress-yellow
.progress-inverse
.progress-small
.progress-mini
- <div data-percent="70%" class="progress progress-small progress-purple progress-striped active">
- <div class="bar" style="width:70%;"></div>
- </div>
Buttons come with some extra classes:
.btn-purple
.btn-pink
.btn-yellow
.btn-grey
.btn-light
.no-hover
.no-border
.btn-app
- <a href="#" class="btn btn-small btn-purple">
- <i class="icon-print icon-on-right bigger-110"></i>
- </a>
- <a href="#" class="btn btn-app btn-small btn-primary">
- <i class="icon-edit bigger-175"></i>
- <span class="bigger-110">Edit</span>
- </a>
Similar extra classes are available for badges and labels:
.label-purple
.badge-pink
.label-yellow
.badge-grey
.label-light
.badge-primary
.label-large
.arrowed
.arrowed-in
.arrowed-right
.arrowed-in-right
Label Text
- <span href="#" class="label label-large label-primary arrowed-in arrowed-right">
- Label Text
- </span>
Dropdown menu extra options:
.dropdown-info
.dropdown-primary
.dropdown-danger
.dropdown-warning
.dropdown-inverse
.dropdown-success
.dropdown-purple
.dropdown-pink
.dropdown-yellow
.dropdown-grey
.dropdown-light
.dropdown-lighter
.dropdown-caret
.dropdown-close
.dropdown-closer
Tooltip and popover extra options:
.tooltip-error
.tooltip-warning
.tooltip-info
.tooltip-success
Please note that when enabling tooltips for an element, if you want to use the above mentioned colors, the
- <a href="#" title="error message" class="my-tooltip-link tooltip-error">
- Show Tooltip
- </a>
container
option should not be used.
- //This won't work with '.tooltip-error', etc
- $('.my-tooltip-link').tooltip({ container:'body' , placement:'top' });
- //Don't specify the 'container' so that tooltip gets inserted after our element
- $('.my-tooltip-link').tooltip({ placement:'top' });
container
option of the tooltip. Because it will appear below our modal box as the CSS
z-index
value of "tooltips" is defined less than that of "modals". In this case, it's better to use the
container
option and set it to body
so the tooltip is not a child of that tab or accordion and will be shown with no problems for the container. jQuery UI slider also come with some extra classes:
.slider-green
.slider-red
.slider-purple
.slider-orange
.slider-dark
.slider-pink
.ui-slider-small
- <span class="ui-slider-green"></span>
Pages
Dashboard Elements
Info and Stats
- <div class="infobox infobox-green">
- <div class="infobox-icon"><i class="icon-comments"></i></div>
- <div class="infobox-data">
- <span class="infobox-data-number">32</span>
- <span class="infobox-content">comments + 2 reviews</span>
- </div>
- <div class="stat stat-success">8%</div>
- </div>
It can have the following color classes: (Please see assets/css/less/infobox.less
)
.infobox-green
.infobox-green2
.infobox-purple
.infobox-purple2
.infobox-pink
.infobox-blue
.infobox-blue2
.infobox-blue3
.infobox-brown
.infobox-wood
.infobox-lightbrown
.infobox-orange
.infobox-orange2
.infobox-grey
.infobox-black
You can use .infobox-dark
for a darker box and .infobox-small
for a smaller box.
.infobox-icon
.infobox-chart
.infobox-progress
containers are for placing icons and charts.
.infobox-data-number
.infobox-text
are for title and .infobox-content
is for extra explanation.
.stat
and .badge
is for the small stats and arrows.
mustache/app/views/pages/partials/index/infobox.mustache
for more info. Conversations, Tasks and Members
For more info please check the relevant mustache templates in here:mustache/app/views/pages/partials/index
Widgets
- <div class="widget-box">
- <div class="widget-header">
- <h5>Default Widget Box</h5>
- <div class="widget-toolbar">
- <a data-action="settings" href="#"><i class="icon-cog"></i></a>
- <a data-action="reload" href="#"><i class="icon-refresh"></i></a>
- <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
- <a data-action="close" href="#"><i class="icon-remove"></i></a>
- </div>
- </div><!--/.widget-header -->
- <div class="widget-body">
- <div class="widget-main">
- </div>
- </div><!--/.widget-body -->
- </div><!--/.widget-box -->
.widget-header"
comes with following classes: .widget-header-small
.widget-header-large
.widget-header-flat
.header-color-blue
.header-color-blue2
.header-color-blue3
.header-color-green
.header-color-green2
.header-color-green3
.header-color-red
.header-color-red2
.header-color-red3
.header-color-orange
.header-color-purple
.header-color-pink
.header-color-dark
.header-color-grey
.widget-box
can come with following classes: .transparent
.light-border
.no-border
.widget-main
can come with following paddings: .no-padding
.padding-2
.padding-4
... .padding-32
.no-padding
.widget-toolbar
example:
- <div class="widget-header header-color-pink">
- <h5>With Tabs</h5>
- <div class="widget-toolbar no-border">
- <ul class="nav nav-tabs">
- <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
- <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
- <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
- </ul>
- </div>
- </div><!-- .widget-header -->
Gallery
Gallery items can have tags (inside li
or a
), captions (inside a
or stand alone) and a toolbar.
- <ul class="ace-thumbnails">
- <li>
- <a href="image-1.jpg" title="title" data-rel="gallery1">
- <img alt="150" src="thumb-1.jpg" />
- </a>
- <div class="tags">
- <span class="label label-info">breakfast</span>
- </div>
- <div class="tools">
- <a href="#"><i class="icon-link"></i></a>
- <a href="#"><i class="icon-remove"></i></a>
- </div>
- </li>
- <li>
- <a href="image-2.jpg" data-rel="gallery1">
- <img alt="150" src="{thumb-2.jpg">
- <div class="text">
- <div class="inner">Sample Caption on Hover</div>
- </div>
- </a>
- </li>
- .
- .
- .
- </ul>
Pricing Tables
Pricing Tables come in two sizes, small and large and are based on widget boxes:
- <div class="widget-box pricing-box">
- </div>
For more info please check the relevant mustache templates at:
- <div class="span3">
- <div class="widget-box transparent">
- <div class="widget-header">
- <h5 class="bigger lighter">Package Name</h5>
- </div>
- <div class="widget-body">
- <div class="widget-main no-padding">
- <ul class="unstyled list-striped pricing-table-header">
- <li>Disk Space </li>
- .
- .
- .
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div class="span2 pricing-span">
- <div class="widget-box pricing-box-small">
- </div>
- </div>
mustache/app/views/pages/partials/pricing
Invoice
Invoice page also basically consistes of a .widget-box
.
The following classes are used: .invoice-box
.invoice-info
.invoice-info-label
For more info please check the relevant mustache at:
mustache/app/views/pages/invoice.mustache
Login & Register
It also is based on .widget-box
and you can see the following template for more info: mustache/app/views/pages/partials/login
User Profile Page
There are 3 profile pages included which mostly use the general elements with some extra additions. For more info take a look at:mustache/app/views/pages/partials/profile/style_1.mustache
mustache/app/views/pages/partials/profile/style_2.mustache
mustache/app/views/pages/partials/profile/style_3.mustache
The general container for profile has the class name .user-profile
The profile photo is .profile-picture
The user info container is .profile-contact-info
and when striped it has .profile-user-info-striped
as well.
Each user info row is .profile-info-row
, each info name is .profile-info-name
and info value is .profile-info-value
The recent profile activity container is .profile-feed
and each item is .profile-activity
as you can see in: mustache/app/views/pages/partials/profile/activity.mustache
In the second profile style, there are also user skills, which are contained by .profile-skills
and also the .profile-users
container which is the friends section.
The third profile style in inside a .tab-content
with the extra .profile-edit-tab-content
class.
Please check the relevant templates at
mustache/app/views/pages/partials/profile
and LESS file at assets/css/less/page.profile.less
for more info.
Inbox & Messages
Please check the relevant templates atmustache/app/views/pages/partials/inbox
and LESS file at assets/css/less/page.inbox.less
for more info. You can use smaller tabs by removing .tab-size-larger
class from the relevant .nav-tabs
.
Or you can remove tabs and use inbox menus like this:
- <div class="span2 inbox-menu">
- <div class="center">
- <a href="#" class="btn btn-small btn-purple btn-new-mail">
- <i class="icon-envelope"></i>
- Write Mail
- </a>
- </div>
- <div class="space-6"></div>
- <div class="inbox-folders responsive">
- <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
- <i class="icon-inbox blue bigger-110"></i>
- <span class="bigger-110">Inbox</span>
- <span class="badge badge-primary counter">2</span>
- </a>
- <a href="#" class="align-left btn btn-small btn-block no-border btn-lighter active">
- <i class="icon-inbox blue bigger-110"></i>
- <span class="bigger-110">Sent</span>
- <span class="badge badge-primary counter">2</span>
- </a>
- </div>
- </div>
- <div class="span10">
- <!-- messages -->
- </div>
You can also make inbox messages more compact by adding
.message-condensed
class to .message-container
element. Timeline
Widget boxes are used for timelines.Default timeline items use
.transparent.widget-box
elements. Please see
mustache/app/views/pages/partials/timeline
for more details. Forms & Elements
CSS3 Checkbox, Radio and On/Off Switches
Ace comes with Pure CSS3 styled checkbox without any javascript. Switches are also animated on supported browsers such as Firefox and Chrome. It also falls back to default browser style on IE8.
Note You must include an element with
- <input type="checkbox" id="checkbox1" class="ace" />
- <label class="lbl" for="checkbox1"> check me</label>
- <label>
- <input type="checkbox" class="ace" />
- <span class="lbl"> check me</span>
- </label>
- <input type="radio" name="radio_field[]" value="1" class="ace" />
- <label class="lbl" for="checkbox1"> radio option 1</label>
- <input type="radio" name="radio_field[]" value="2" class="ace" />
- <label class="lbl" for="checkbox1"> radio option 2</label>
- <input type="radio" name="radio_field[]" value="3" class="ace" />
- <label class="lbl" for="checkbox1"> radio option 3</label>
.lbl
class right after the checkbox or radio. It may or may not contain text.
Checkboxes have a second style which you should add
.ace-checkbox-2
class to the input element.
.lbl
class after it.
- <input type="checkbox" id="switch1" class="ace ace-switch" />
- <label class="lbl" for="switch1"></label>
- <label>
- <input type="checkbox" class="ace ace-switch ace-switch-6" />
- <span class="lbl"> check me</span>
- </label>
Currently switches come in 7 styles:
.ace-switch
, .ace-switch.ace-switch-2
, ... .ace-switch-.ace-switch-7
Custom File Inputs
File input come in 2 different formats, small and large with drag & drop ability with some methods and callbacks.
The following options are available
-
style which is either
false
(the default one) orwell
which is the larger one with preview and multiple file display. -
no_file, with default value
No File ...
-
no_icon, with default value
icon-upload-alt
-
btn_choose, with default value
Choose
-
btn_change, with default value
Change
(preferably set tonull
forwell
style) -
icon_remove, with default value
icon-remove
. Set tonull
if you don't want a remove/reset button. -
droppable. Default values
false
. Disable or enable drag & drop feature on the control. -
thumbnail. Determines how preview thumbnails are displayed. Default value is
small
withlarge
andfit
options. - before_remove. Called before user clicks on remove/reset button. Return false to cancel remove or reset.
-
before_change. Called after user selects or drops files and before
onchange
event is fired.
Returningfalse
will cancel it and no files will be added to the control.
Returning aFileList
object or an array containingFile
objects will change the control's file list accordingly.
See an example below.
Note It's not possible to change the HTML file input control's value because of browser's security policies.
We can only reset it.
But when when change the file list insidebefore_change
function, the new list will be saved to ace_input_files data object as described below.
Seeform-elements.html
for an example as how to change & limit the selected files to images only. -
preview_error will be called when making thumbnail preview of an image fails.
It takes two arguements, first is the file name and second is the error code specifying the type of error. (See example below)
The following methods are also supported:
- reset_input which resets the input and clears all previews and data inside it.
- reset_input_field which only resets the file input element.
- disable
- enable
- update_settings. You can use to change the input's settings, such as no_file, no_icon, btn_change, its callbacks, etc...
- show_file_list. It will redraw the list of files selected. Can be used after update_settings.
- enable_reset. Which takes either "false" or "true" and disables or enables "reset/remove" button functionality. Useful for disabling reset/remove during a file upload.
- files. Retrieve a list of selected files.
- method. Returns the method used to select files which is either "drop" or "select".
- <input type="file" id="file-input-1" />
- <script>
- $('#file-input-1').ace_file_input({
- no_file:'No File ...',
- btn_choose:'Choose',
- btn_change:'Change'
- }).on('change', function(){
- var files = $(this).data('ace_input_files');
- //or
- //var files = $(this).ace_file_input('files');
- var method = $(this).data('ace_input_method');
- //method will be either 'drop' or 'select'
- //or
- //var method = $(this).ace_file_input('method');
- };
- </script>
- //after creating the ace input, you can use the following methods:
- $('#file-input-1').ace_file_input('disable');
- $('#file-input-1').ace_file_input('enable');
- $('#file-input-1').ace_file_input('reset_input');
- //etc
- <input type="file" multiple />
- <script>
- $('input[type=file][multiple]').ace_file_input({
- style:'well',
- btn_choose:'Drop images here or click to choose',
- btn_change:null,/* we don't need it */
- no_icon:'icon-cloud-upload',
- droppable:true,
- thumbnail:'large',
- before_change:function(files, dropped) {
- var file = files[0];
- if(typeof file == "string") {
- //file is just a file name here (in browsers that don't support FileReader API such as IE8)
- if(! (/\.(jpe?g|png|gif)$/i).test(file) ) {
- //not an image extension?
- //alert user
- return false;
- }
- }
- else {
- var type = $.trim(file.type);
- if(
- ( type.length > 0 && ! (/^image\/(jpe?g|png|gif)$/i).test(type) )
- ||
- //for android's default browser!
- ( type.length == 0 && ! (/\.(jpe?g|png|gif)$/i).test(file.name) )
- )
- {
- //alert user
- return false;
- }
- if( file.size > 1024*100 ) {
- //is the file size larger than 100KB?
- //alert user
- return false;
- }
- }
- return true;
- },
- before_remove:function() {
- //if(upload_in_progress) return false;//don't allow resetting the file input while upload in progress
- return true;
- },
- preview_error : function(filename, error_code) {
- //name of the file that failed
- //error_code values
- //1 = 'FILE_LOAD_FAILED',
- //2 = 'IMAGE_LOAD_FAILED',//the loaded file is not an image
- //3 = 'THUMBNAIL_FAILED'//somehow creating the thumbnail failed.
- //notify user?!
- }
- });
- </script>
examples/file-upload.html
for a working example.
When you want to upload the files you can use ace_input_files
and ace_input_method
data of the file element.
You can retrieve them like this:
- var files = $('file input element').data('ace_input_files');
- // which is an Array or FileList containing the selected files.
- var method = $('file input element').data('ace_input_method');
- // which is either "drop" or "select" depending on how the user selected files.
- //OR
- var files = $('file input element').ace_file_input('files');
- var method = $('file input element').ace_file_input('method');
examples/file-upload.html
examples/file-upload.php
Custom Color Picker
- <select id="colorpicker" class="hidden">
- <option data-custom="val1" value="#AC725E">#AC725E</option>
- <option data-custom="val2" value="#D06B64">#D06B64</option>
- .
- .
- .
- </select>
- $('#colorpicker').ace_colorpicker({pull_right:false|true , caret:false|true})
- .on('change', function(){
- /**
- $(this).val();
- $(this).data('custom');
- etc ...
- */
- });
Inline Editable Plugin
There are 4 custom additions to the editable plugin, including Image, Wysiwyg, Spinner and Slider editables.
They are defined inside assets/js/x-editable/ace.editables.js
Please check the profile.html
or mustache/app/views/assets/scripts/profile.js
for usage examples.
For the image editable plugin you can specify all ace file input options, as well as some extra options that you can see in the example file:
- name: The name of the file input field is put here
- max_size: The maximum size of a file user can choose
- on_error: callback function called when an error occurs
- on_success: callback function called when a file is successfully selected
before_change
callback for this input has already been defined to accept images only, but you can override it:
- $('#avatar').editable({
- type: 'image',
- name: 'avatar',
- value: null,
- image: {
- //specify ace file input options here
- before_change: function(files, dropped) {
- //this will override the one already defined which only accepts images.
- },
- //no_icon:'icon-picture',
- //no_icon:'icon-picture',
- //some additional parameteres
- name : 'avatar',//put the field name here as well
- max_size: 102400,//in byes
- on_error: function(error_code) {
- if(error_code == 1) {
- //file format error
- }
- else if(error_code == 2) {
- //file size error
- } else {
- //other error
- }
- },
- on_success: function() {
- //a valid image selected
- }
- },
- url: function(params) {
- //user clicked "OK" and we are ready to upload
- //Please see the example file here: examples/profile-avatar-update.js
- }
- });
Wysiwyg editor
So I will add support for another plugin in upcoming updates.
You can use the following wrapper function to create a wysiwyg plugin:
- <div id="editor-1"></div>
This will create the default editor will all options available.
- $('#editor-1').ace_wysiwyg()
You can choose to have a limited set of buttons with different icons, tooltips or button classes:
- $('#editor-1').ace_wysiwyg(
- {
- toolbar:
- [
- 'bold',
- {name:'italic', title:'Custom Title!', className:'btn-info'},//customize
- 'strikethrough',
- 'underline',
- null,//null value creates some spacing between buttons (grouping)
- 'foreColor',
- null,
- 'insertImage',
- null,
- {name:'createLink', placeholder:'Add a link', button_text:'Custom Button Text'}
- ]
- ,
- speech_button : false//don't show the speech input button on Chrome
- //,
- //wysiwyg:{}//Specify the options to be passed to the plugin. Refer to plugin docs to see what parameteres it takes.
- //,
- //toolbar_place : function(toolbar) {}//see below
- }
- )
- .prev().addClass('wysiwyg-style2');//use the second wyswiyg toolbar style here
By default the created toolbar will be inserted right before the editor element,
but you can choose a different place.
For example you may want to put it inside the header of a widget box:
Now the toolbar for this instance of wysiwyg editor will be inside the specifed widget header.
- toolbar_place: function(toolbar) {
- return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar);
- }
Using jQuery UI Resizable feature, you can add resize ability.
I've put an example on wysiwyg page which you can see on bottom of wysiwyg.html page or the relevant inline script file
mustache/app/views/assets/scripts/wysiwyg.js
.
.wysiwyg-style1
or .wysiwyg-style2
to .wyswiyg-toolbar
element, for other toolbar styles.
.wyswiyg-toolbar
is dynamically created and inserted before our editor element:
- $('#editor-1').prev().addClass('wysiwyg-style2');
FuelUX Spinner
FuelUX Spinner is used with a little extra wrapping for easier use and customiztion.
- <input type="text" id="spinner" />
- $('text field element').ace_spinner({
- //FUEL_UX SPINNER options
- // + custom ones
- icon_up:'icon-plus',//default : 'icon-chevron-up'
- icon_down:'icon-minus',// default : 'icon-chevron-down'
- btn_up_class:'btn-success',//default : ''
- btn_down_class:'btn-danger'//default : ''
- }).on('change', function(){
- //alert($(this).val());
- });
FuelUX Wizard
FuelUX Wizard is used with a little extra wrapping for easier use and customiztion.data-target="#step-container"
and add the relevant data to the steps container:
id="step-container"
- <div data-target="#step-container" id="fuelux-wizard" class="row-fluid hidden">
- <ul class="wizard-steps">
- <li data-target="#step1" class="active">
- <span class="step">1</span>
- <span class="title">Step # 1</span>
- </li>
- <li data-target="#step2">
- <span class="step">2</span>
- <span class="title">Step # 2</span>
- </li>
- .
- .
- .
- </ul>
- </div><!--/.row-fluid-->
- <div id="step-container" class="step-content row-fluid position-relative">
- <div class="step-pane active" id="step1">
- <form id="form-1">
- </form>
- </div><!--#step1-->
- <div class="step-pane active" id="step2">
- </div><!--#step2-->
- .
- .
- .
- </div><!--/.step-content-->
- <div class="row-fluid wizard-actions">
- <button class="btn btn-prev">
- <i class="icon-arrow-left"></i>
- Prev
- </button>
- <button class="btn btn-success btn-next" data-last="Finish ">
- Next
- <i class="icon-arrow-right icon-on-right"></i>
- </button>
- </div><!--/.wizard-actions-->
- $('#fuelux-wizard').ace_wizard().on('change', function(e, info){
- if(info.step == 1 && !$('#form-1').valid()) return false;
- }).on('finished', function(){
- alert('Success!');
- }).on('stepclick', function(){
- //return false;//if you don't want users click on backward steps
- });
FuelUX Treeview
FuelUX tree is used with a little extra wrapping and some extra options for easier use and customiztion.
- <div id="tree1" class="tree"></div>
- $('#tree1').ace_tree({
- dataSource: treeDataSource ,
- multiSelect:true,
- loadingHTML:'<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
- 'open-icon' : 'icon-minus',
- 'close-icon' : 'icon-plus',
- 'selectable' : true,//or false
- 'selected-icon' : 'icon-ok',
- 'unselected-icon' : 'icon-remove'
- });
examples/treeview.html
for an example.
Bootstrap Tag Input
Not working in IE8. Can be replaced by a textarea on IE8.Please check the
mustache/app/views/assets/scripts/form-elements.js
to see an example.
Plugins
You can find documentation and examples for each one on their respective pages or you may want to check out Ace html files for examples.
- jQuery 2.0.3
- jQuery UI 1.10.3 (Custom Build)
- Twitter Bootstrap 2.3.2
- FontAwesome 3.2.1
- LESS 1.4.1
- Mustache
- Twitter Hogan.js
- Mustache.js
- Mustache for PHP
- Google Fonts "Open Sans"
- jQuery Flot Charts 0.8.1
- jQuery Sparklines 2.1.2
- Easy Pie Chart 1.2.5
- jQuery Knob 1.2.0
- Mindmup Wysiwyg Editor
- Toopay Markdown Editor 1.1.4
- jQuery Validate 1.11.1
- FuelUX 2.3.0 (Spinner, Wizard & Treeview)
- Dropzone.js 3.0
- FullCalendar 1.6.3
- jQuery ColorBox 1.4.27
- jQuery dataTables 1.9.4
- jQuery jqGrid 4.5.2
- X-editable 1.4.6
- Select2 3.4.1
- jQuery Chosen 1.0.0
- jQuery Masked Input 1.3.1
- jQuery Input Limiter 1.3.1
- jQuery AutoSize 1.17.2
- Bootstrap Tags 2.2.5
- Nestable Lists
- Bootstrap Colorpicker
- Bootstrap Datepicker
- Bootstrap Timepicker v0.2.3
- Bootstrap DateRange Picker 1.2
- Bootbox.js 3.3.0
- jQuery Gritter 1.2
- jQuery slimScroll 1.2.0
- Spin.js 1.3.0
- jQuery Mobile 1.3.2 (Custom Build)
- jQuery UI Touch Punch 0.2.2
- Google Code Prettify
- ExplorerCanvas