First of all I would like to thank you for purchasing Ace admin template. I hope you like it and find it easy to work with.
This is the 4th release (v1.1.3) and there may be bugs and missing features which will be targeted in next updates.
Also, this documentation is brief and may be lacking in some parts. If you think more explanations or examples are needed, just let me know.
Please send your questions, comments, suggestions and bug reports to me at ace.support@live.com and I will do my best to reply as soon as possible.
Best Wishes
Mohsen Hosseini
Ace is a lightweight and feature rich admin template which is clean and easy to use.
Current release comes with the following features:
This has benefits such as better view on Retina displays as almost no pixel graphics are used and it also means fewer network file requests resulting in faster page load time.
The following list will be added to the template on next updates:
Some elements have been enhanced and some bugs fixed.
Please take a look at the changelog file for a quick overview.
Styled checkboxes
Previously, browser checkboxes and radio buttons were hidden by default and you needed to insert an .lbl
element after them to be displayed correctly.
This caused some issues with environments or libraries that created checkboxes that were difficult to add an
.lbl
element after them.
So now, default checkboxes are shown without change and you can style them by adding .ace
class
to checkboxes and inserting an .lbl
element after them.
.ace
class name from
assets/css/less/form-checkbox.less
and recompiling ace.less
.sidebar-fixed
class to .sidebar
element
and to fix breadcrumbs you should add .breadcrumbs-fixed
class to .breadcrumbs
element.
assets/js/ace-extra.js
inside head
element, to be able to enable and save some user settings
using Javascript.
#sidebar-collapse
element's icon has two attributes data-icon1
and
data-icon2
which determine the button's icon in expanded/collapsed state.
#ace-settings-header
has been changed to #ace-settings-navbar
First of all, CSS "ID"s have been replaced with classes. It seems to be the preferred approach.
So for example in CSS files where we had:
#main-content {
...
}
It has been changed to:
.main-content {
...
}
<div class="main-container" id="main-container"> ... </div> ... <a class="menu-toggler" id="menu-toggler"> <span></span> </a>
You just need to add a class with the same ID value to HTML elements.
The specific changes are:
#user_info
.user-info
(Topright user menu)#user_menu
.user-menu
#menu-toggler
.menu-toggler
#sidebar
.sidebar
#sidebar-shortcuts
.sidebar-shortcuts
#sidebar-shortcuts-large
.sidebar-shortcuts-large
#sidebar-shortcuts-mini
.sidebar-shortcuts-mini
#sidebar-collapse
.sidebar-collapse
#main-container
.main-container
#main-content
.main-content
#page-content
.page-content
#breadcrumbs
.breadcrumbs
#nav-search
.nav-search
#nav-search-input
.nav-search-input
#nav-search-icon
.nav-search-icon
#ace-settings-container
.ace-settings-container
#ace-settings-btn
.ace-settings-btn
#ace-settings-box
.ace-settings-box
#btn-scroll-up
.btn-scroll-up
The text on first level links of side navigation which were SPAN
elements, should have the .menu-text
class now:
<li> <a href="index.html"> <i class="icon-dashboard"></i> <span class="menu-text">Dashboard</span> </a> </li>
Same applies to #menu-toggler
element:
<a href="#" class="menu-toggler" id="menu-toggler"> <span class="menu-text"></span> </li>
The default size of icons inside buttons have been removed.
You may specify icon sizes using .bigger-110
... .bigger-300
as described later.
<a href="#" class="btn btn-app btn-primary"> <i class="icon-envelope bigger-200"></i> Email </li>
For easier changing of icons inside breadcrumbs, add .home-icon
to the first icon (the one indicating homepage) and add .arrow-icon
to other icons.
HTML files are located on the main directory as you can see.
They are automatically generated from the Mustache template files.
There is more details about Mustache files in this section.
But you can see how different sections of Ace admin template are structured by looking at Mustache template files.
Otherwise you may have to dig through lots of static HTML code to figure out things.
Template files are inside mustache/app/views folder.
node index.js
http://server_address/path_to_ace/mustache/php/
CSS files consist of:
LESS files are located under the assets/css/less
directory.
You can compile and generate your own CSS if you want to remove some parts.
For example if you don't need RTL (right to left) style, comment that line and compile it.
At this time, the latest stable version of LESS which is 1.4.1 has been used to compile and generate the output.
Javascript files are:
HTML pages are the following:
Mustache files are the following:
mustache/app
folder which has the following:
mustache/app/views
folder:
default.mustache
which is the layout for most pages
login.mustache
which is the layout for the login page.
empty.mustache
which is the layout for the empty.html page.
The partials folder contains different parts of each layout.
The _shared folder inside partials, contains partial templates that are used by more than one layout.
For example the partial templates
mustache/app/views/layouts/partials/_shared/sidenav.mustache
and
mustache/app/views/layouts/partials/_shared/sidenav/items.mustache
are used to generate the side navigation menu.
index.mustache
, typography.mustache
and so on.
Inside it, is the partials folder which contains sections of some pages.
For examples mustache/app/views/pages/index
folder contains the following partial templates:
infobox.mustache
domains.mustache
tasks.mustache
members.mustache
comments.mustache
conversations.mustache
which together with the index.mustache
page template and default.mustache
layout template, constitute up the index(dashboard) page.
mustache/js/classes/autoload-hogan.js
mustache/js/classes/autoload-mustache.js
.
{{> layout.breadcrumbs}}
or {{> page.comments}}
mustache/app/data/layouts/partials/default/sidenav_navList.json
contains the side navigaiton items for the default layout.
index.json
typography.json
etc, contain the basic page data such as its title, scripts and styles.
site.json
which is the general setting & variables.
script-mapping.json
inside our custom Mustache classes to map a script name to a file name.
{{#layout.topbar_tasks.latest}} ... {{/layout.topbar_tasks.latest}}
{{#page.comments}} ... {{/page.comments}}
{{#site.title}} ... {{/site.title}}
etc ...
mustache/js
folder which consists of a few classes to generate the HTML output as well as the Mustache compilers.
node index.js
command to generate output inside the output_folder.
mustache/php
folder which consists of a few PHP classes to generate the HTML output as well as the Mustache compilers.
http://server_address/path_to_ace/mustache/php/
mustache/app/views/layouts/default.mustache
file as a starting point to figure out the general structure of HTML elements and sections.
Some ".ace-nav" colors to change the top bar elements color:
<ul class="nav ace-nav"> <li class="purple"> ... </li> <li> ... </li> </ul>The following colors are defined:
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>
.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.
<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>
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"> Print <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
<span href="#" class="label label-large label-primary arrowed-in arrowed-right"> Label Text </span>Label Text
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
<a href="#" title="error message" class="my-tooltip-link tooltip-error"> Show Tooltip </a>Please note that when enabling tooltips for an element, if you want to use the above mentioned colors, the
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.
z-index
value of "tooltips" is defined less than that of "modals".
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>
<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.
mustache/app/views/pages/partials/index
<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 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 come in two sizes, small and large and are based on widget boxes:
<div class="widget-box pricing-box"> </div>
<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>For more info please check the relevant mustache templates at:
mustache/app/views/pages/partials/pricing
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
It also is based on .widget-box
and you can see the following template for more info:
mustache/app/views/pages/partials/login
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.
mustache/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>
.message-condensed
class to .message-container
element.
.transparent.widget-box
elements.
mustache/app/views/pages/partials/timeline
for more details.
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.
<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>Note You must include an element with
.lbl
class right after the checkbox or radio. It may or may not contain text.
.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>
.ace-switch
, .ace-switch.ace-switch-2
, ... .ace-switch-.ace-switch-7
File input come in 2 different formats, small and large with drag & drop ability with some methods and callbacks.
The following options are available
false
(the default one) or well
which is the larger one with preview and multiple file display.
No File ...
icon-upload-alt
Choose
Change
(preferably set to null
for well
style)
icon-remove
. Set to null
if you don't want a remove/reset button.
false
. Disable or enable drag & drop feature on the control.
small
with large
and fit
options.
onchange
event is fired.
false
will cancel it and no files will be added to the control.
FileList
object or an array containing File
objects will change the control's file list accordingly.
before_change
function, the new list will be saved to ace_input_files data object as described below.
form-elements.html
for an example as how to change & limit the selected files to images only.
The following methods are also supported:
<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
examples/file-upload.html
for a working example.
<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>
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
<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 ... */ });
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:
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 } });
You can use the following wrapper function to create a wysiwyg plugin:
<div id="editor-1"></div>
$('#editor-1').ace_wysiwyg()This will create the default editor will all options available.
$('#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:
toolbar_place: function(toolbar) { return $(this).closest('.widget-box').find('.widget-header').prepend(toolbar); }Now the toolbar for this instance of wysiwyg editor will be inside the specifed widget header.
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');
<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()); });
data-target="#step-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 });
<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.
mustache/app/views/assets/scripts/form-elements.js
to see an example.
ace-extra.js
//cookie functions ace.cookie.set(name, value, expires, path, domain, secure); ace.cookie.get(name); ace.cookie.remove(name, path); //localStorage functions ace.storage.set(key, value); ace.storage.get(key); ace.storage.remove(key);
ace.data_storage
is a wrapper which by default chooses localStorage if available.
Otherwise it will use cookies for saving data.
ace-extra.js
, ace.data
is initiated and used to save and retrieve settings.
ace.data = new ace.data_storage(2);//use cookies ace.data = new ace.data_storage(1);//or use localStorage ace.data = new ace.data_storage();//or use localStorage if available otherwise use cookies ace.data.set(namespace, key, value); //for example ace.data.set('settings', 'sidebar-collapsed', 1); ace.data.get('settings', 'sidebar-collapsed'); //without namespace ace.data.set('username', 'alex'); ace.data.get('username'); //remove ace.data.remove('settings', 'sidebar-collapsed'); ace.data.remove('username');
Currently 4 settings are saved:
#navbar
fixed status#sidebar
fixed status#sidebar
collapsed status#breadcrumbs
fixed status<div class="navbar" id="navbar"> <script type="text/javascript"> try{ace.settings.check('navbar' , 'fixed')}catch(e){} </script> ... </div>The code is put inside try/catch block, so that there are no problems in case you don't want to include and use
ace-extra.js
.
<div class="sidebar" id="sidebar"> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'fixed')}catch(e){} </script> ... //sidenav items here <div class="sidebar-collapse" id="sidebar-collapse"> <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i> </div> <script type="text/javascript"> try{ace.settings.check('sidebar' , 'collapsed')}catch(e){} </script> </div>Please note that the
#sidebar-collapse
icon, has two attributes data-icon1
and data-icon2
,
which determine the button's icon in expanded/collapsed state.
<div class="breadcrumbs" id="breadcrumbs"> <script type="text/javascript"> try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){} </script> ... </div>
In your application you can set some settings in a static way:
.navbar-fixed-top
class to #navbar
(.navbar) element.
.navbar-fixed
class to body
element.
.sidebar-fixed
class to #sidebar
.
.menu-min
class to #sidebar
.
.breadcrumbs-fixed
class to #breadcrumbs
element.
.breadcrumbs-fixed
class to body
element.
.skin-1
.skin-2
.skin-3
class to body
element.
You may notice when you choose a skin, the top user menu buttons (.ace-nav > li
) change their color.
This is not dependent on the skin. The color class of the buttons is changed via Javascript.
If you don't need it, you can comment the "rtl.less" line in "ace.less" and compile to generate CSS without RTL for a smaller file size.
Clicking the setting button makes the changes dynamically.
switch_direction
function inside assets/js/uncompressed/ace.js
But to hardcode in your application, in order to use RTL feature you should add the .rtl
class to your body tag element:
<body class="rtl">Inside your HTML code you should also make the following changes:
.dropdown-menu
toggle the .pull-right
class.
.pull-right
whenever you don't in LTR mode and remove .pull-right
when you normally use it in LTR mode.
.pull-right
whenever you used .pull-left
for an LTR document, except for the following:
.dropdown-menu
blockquote
.dropdown-submenu
.profile-skills .pull-right
.pull-left
instead of pull-right
elements.chosen-rtl
to select elements when using Chosen pluginisRTL
option to true
direction
option to rtl
.align-left
.align-right
.arrowed
.arrowed-right
.arrowed-in
.arrowed-in-right
.messagebar-item-left
.messagebar-item-right
for inbox page.
.pull-right
for the first [class*="span"]
block inside .control-group .controls
<div class="control-group"> <div class="controls"> <span class="span6 input-icon pull-right"> <input type="text" class="span12"> <i class="icon-warning-sign"></i> </span> <span class="help-inline"> message </span> </div> </div>