349 lines
11 KiB
HTML
349 lines
11 KiB
HTML
<section>
|
|
<h1 class="blue"><i class="ace-icon fa fa-file-o grey"></i> Javascript Files</h1>
|
|
<hr />
|
|
|
|
<div class="help-content">
|
|
<h3 class="info-title smaller" data-id="#files/javascript.ace">1. Ace Files</h3>
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
Compressed files are inside <code>dist/js</code> folder.
|
|
<br />
|
|
Uncompressed(non-minified) files are inside <code>assets/js</code> folder.
|
|
</li>
|
|
|
|
<li>
|
|
<b>ace.js</b> contains site's main functionality such as handling sidebar, widget boxes, etc.
|
|
</li>
|
|
|
|
<li>
|
|
<p>
|
|
<b>ace-elements.js</b> contains custom plugins such as
|
|
<i>file input</i>, <i>scrollbars</i>, <i>colorpicker</i>
|
|
and wrappers for <i>spinner</i>, <i>wizard</i>, <i>treeview</i> and <i>wysiwyg</i> plugins.
|
|
</p>
|
|
<p>
|
|
Please note that if you want to use one of these wrappers, you still need to include the plugin's script.
|
|
<br />
|
|
For example:
|
|
<pre data-language="html">
|
|
<script src="fuleux/spinner.js"></script>
|
|
<script src="ace.elements.js"></script>
|
|
</pre>
|
|
You can find more info about this in each plugin's section.
|
|
</li>
|
|
|
|
<li>
|
|
<p>
|
|
<b>ace-extra.js</b>
|
|
which has cookie/localStorage functionality to save & retrieve user's settings.
|
|
</p>
|
|
<p>
|
|
Also, sidebar collapse/expand, fixing navbar/sidebar/breadcrumbs are defined inside this file.
|
|
</p>
|
|
<p>
|
|
For more info about page options and settings, please see <a class="help-more" href="#settings">Settings</a> section.
|
|
</p>
|
|
<p>
|
|
And for info about cookies and storage you can refer to <a class="help-more" href="#settings.storage">Cookies & Storage</a> section.
|
|
</p>
|
|
</li>
|
|
|
|
<li>
|
|
<p>
|
|
<b>x-editable/ace-editable.js</b> which contains 5 additional inline editable addons:
|
|
<i>date</i>, <i>slider</i>, <i>spinner</i>, <i>wysiwyg</i> and <i>image</i>.
|
|
</p>
|
|
<p>
|
|
You can find more about about these addons <a class="help-more" href="#custom/inline-editable">here</a>
|
|
and about <b>x-editable</b> plugin <a class="help-more" href="#plugins/misc.inline-editable">here</a>.
|
|
</p>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
<div class="hr hr-10"></div>
|
|
<p>
|
|
<b>ace.js</b> and <b>ace-elements.js</b>
|
|
are generated using in-browser Javascript builder by merging separate script files that are inside
|
|
<code>assets/js/ace</code> folder, which contains:
|
|
<ol>
|
|
<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.js</code></li>
|
|
<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.sidebar.js</code></li>
|
|
<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>ace.widget-box.js</code></li>
|
|
<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.scroller.js</code></li>
|
|
<li><code data-open-file="javascript" class="open-file"><span class="brief-show">assets/js/ace/</span>elements.fileinput.js</code></li>
|
|
<li>And some other files which you can see inside <code>assets/js/ace</code></li>
|
|
</ol>
|
|
</p>
|
|
<p>
|
|
For more information about any of the above files you can refer to <a href="../build/js.html">Javascript builder</a> as it has some description about each file.
|
|
</p>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#files/javascript.third">2. Other Files</h3>
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
All scripts are inside <code>assets/js</code> folder.
|
|
<br />
|
|
Compressed (minified) files are inside <code>dist/js</code> folder.
|
|
</li>
|
|
<li>
|
|
<p>
|
|
I have put some scripts that are similar in separate folders.
|
|
<br />
|
|
But that's optional and you can have your own structure.
|
|
</p>
|
|
<p>
|
|
For example:
|
|
<br />
|
|
<code>assets/js/date-time</code>
|
|
<br />
|
|
<code>assets/js/fuelux</code>
|
|
<br />
|
|
<code>assets/js/markdown</code>
|
|
<br />
|
|
<code>assets/js/x-editable</code>
|
|
<br />
|
|
<code>assets/js/flot</code>
|
|
<br />
|
|
<code>assets/js/jqGrid</code>
|
|
</p>
|
|
</li>
|
|
|
|
<li>
|
|
If you want to see what scripts are used in a demo page, you can view its json data file inside
|
|
<code>mustache/app/data/pages</code> folder.
|
|
<br />
|
|
For example, according to its data file
|
|
<br />
|
|
<code data-open-file="json" class="open-file">mustache/app/data/pages/index.json</code>
|
|
<br />
|
|
dashboard(index) page is using the following scripts:
|
|
<div class="space-4"></div>
|
|
<ol>
|
|
<li><b>jQuery UI</b> used for sortable tasks list</li>
|
|
<li><b>Easy Pie Chart</b> used for circular progress meters</li>
|
|
<li><b>Sparkline</b> used for inline charts inside infoboxes</li>
|
|
<li><b>Flot charts</b> used for the pie chart and sale stats chart</li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li>
|
|
I have included 2 versions of jQuery UI:
|
|
<ol>
|
|
<li>
|
|
<code>assets/js/jquery-ui.custom.js</code>
|
|
which is a custom build which contains stripped down functionality needed by some plugins and sections.
|
|
<br />
|
|
Included features are: dragging, resizing, jQuery UI Slider, etc.
|
|
</li>
|
|
<li>
|
|
<code>assets/js/jquery-ui.full.js</code>
|
|
is a full version containing all of jQuery UI's functionality used in jQuery UI sample page.
|
|
</li>
|
|
</ol>
|
|
You can build your own version depending on your needs.
|
|
</li>
|
|
|
|
<li>
|
|
A minimal custom download of <b>jQuery Mobile</b> is also used,
|
|
so that we can have <i>tap</i> event
|
|
on touch devices which is preferred to <i>click</i>.
|
|
<br />
|
|
You can build your own version depending on your needs.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#files/javascript.changes">3. Third party changes</h3>
|
|
<div class="info-title info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
I haved modified some third party scripts slightly to add some extra options.
|
|
</li>
|
|
<li>
|
|
The changes include :
|
|
<ol>
|
|
<li>
|
|
FuelUX wizard, spinner, treeview
|
|
</li>
|
|
<li>
|
|
Inline editable plugin
|
|
</li>
|
|
<li>
|
|
Markdown editor
|
|
</li>
|
|
<li>
|
|
Datepicker, Daterange picker, Timepicker
|
|
</li>
|
|
<li>
|
|
Added <code>function.bind</code> polyfill to html5shiv
|
|
</li>
|
|
<li>
|
|
Some changes in Easy Pie Chart
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#files/javascript.order">4. Script order</h3>
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
The right order of including script files is:
|
|
<ul>
|
|
<li>
|
|
Scripts that are inside <code>HEAD</code> element:
|
|
<br />
|
|
(also visible in <br />
|
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>styles.mustache</code>)
|
|
|
|
<ol>
|
|
<li>
|
|
<b>ace-extra.js</b> if you need cookie support and sidebar collapse/expand, fixing navbar, etc.
|
|
</li>
|
|
<li>
|
|
<b>html5shiv.js</b> & <b>respond.js</b>
|
|
wrapped inside IE conditional comments which enable some HTML5 features on IE8 and below.
|
|
</li>
|
|
</ol>
|
|
|
|
<pre data-language="html">
|
|
<head>
|
|
.
|
|
.
|
|
.
|
|
|
|
<script src="ace-extra.min.js"></script>
|
|
<!--[if lte IE 8]>
|
|
<script src="html5shiv.min.js"></script>
|
|
<script src="respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
</pre>
|
|
|
|
</li>
|
|
<li>
|
|
Other scripts that are preferrably at the end of document:
|
|
<br />
|
|
(also visible in <br />
|
|
<code data-open-file="html" class="open-file"><span class="brief-show">mustache/app/views/layouts/partials/_shared/_template/</span>scripts.mustache</code>)
|
|
|
|
<ol class="spaced2">
|
|
<li>
|
|
<b>jquery.js</b> as well as <b>jquery v1.x</b> which is included for IE9 and below.
|
|
<br />
|
|
<b>jquery.js</b> should be inside special IE conditional comments and it will be ignored by IE9 and below.
|
|
<br />
|
|
<b>jquery v1.x</b> should be inside conditional comments so that it's included by IE9 and below only.
|
|
</li>
|
|
|
|
<li>
|
|
<b>bootstrap.js</b>
|
|
</li>
|
|
|
|
<li>
|
|
<b>excanvas.js</b> for IE8 if you are going to need HTML5 Canvas support.
|
|
Currently plugins that need canvas support are:
|
|
<ol>
|
|
<li>Flotchart</li>
|
|
<li>Sparklines</li>
|
|
<li>jQuery Knob</li>
|
|
<li>Easy Pie Chart</li>
|
|
</ol>
|
|
<br />
|
|
You should include excanvas before including above plugins.
|
|
</li>
|
|
|
|
<li>
|
|
Any Plugin that you want to use for example:
|
|
<br />
|
|
<b>Chosen</b>
|
|
<br />
|
|
<b>Fuelux Wizard</b>
|
|
</li>
|
|
|
|
<li>
|
|
Finally you should include <b>ace-elements.js</b> and <b>ace.js</b>
|
|
</li>
|
|
|
|
<li>
|
|
And then inline scripts that you may want to use for the page.
|
|
</li>
|
|
</ol>
|
|
<div class="hr hr-8"></div>
|
|
<pre data-language="html">
|
|
.
|
|
.
|
|
.
|
|
|
|
<!--[if !IE]> -->
|
|
<script src="jquery.min.js"></script>
|
|
<!-- <![endif]-->
|
|
<!--[if lte IE 9]>
|
|
<script src="jquery1x.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<script src="bootstrap.min.js"></script>
|
|
|
|
<!-- ie8 canvas if required for plugins such as charts, etc -->
|
|
<!--[if lte IE 8]>
|
|
<script src="excanvas.min.js"></script>
|
|
<![endif]-->
|
|
|
|
<script src="plugin1.min.js"></script>
|
|
<script src="plugin2.min.js"></script>
|
|
<script src="plugin3.min.js"></script>
|
|
|
|
<script src="ace-elements.min.js"></script>
|
|
<script src="ace.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
//If page has any inline scripts, it goes here
|
|
jQuery(function($) {
|
|
alert('hello!');
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</pre>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<h3 class="info-title smaller" data-id="#files/javascript.build">5. Javascript Builder</h3>
|
|
<div class="info-section">
|
|
<ul class="info-list list-unstyled">
|
|
<li>
|
|
There is also the in-browser Javascript builder that you can use to build a custom Javascript file,
|
|
using only the parts you need.
|
|
<br />
|
|
You can find it here: <a href="../build/js.html">path/to/ace/build/js.html</a>
|
|
<div class="space-6"></div>
|
|
You can choose a minified(compressed) output which is powered by the popular tool
|
|
<a href="#plugins/tools.uglifyjs" class="help-more">UglifyJs</a>.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section> |