1. Inicio
  2. Características
  3. Estructura
  4. HTML structure
  5. PHP files
  6. CSS structure
  7. JS structure
  8. Jquery Plugins
  9. Twitter Bootstrap
  10. Jquery plugins loaders
  11. PSD files
  12. Sources and Credits
  13. Usuarios

SIN v2.0: Sistema de Información Niño

Documentación Completa

Esta aplicación intenta juntar toda la Atenció n Integral de un Niño, según sus etapas.
Sirvase consultar con este manual, para resolver sus dudas ante inconvenientes de uso del presente aplicativo.
De contar con problemas de uso, o errores en el sistema, ponganse en contacto con el programador para su solución.
Muchas Gracias!

SIN - NIÑO, Características:

El SIN v2.0 ha sido desarrollado cumpliendo lo estipulado en cada norma técnica que el MINSA aya emitido. Puede funcionar de manera local o web.
Características Revelantes:

Files structure

There are 5 main folders with files and HTML files.

CSS folder contains all css files, including folder "Font" with Font Awesome files

Img folder contains all images, sorted by type and place of usage

JS folder contains all js files: charts settings, functions files and all js plugins

PHP folder contains php files (plugin connector mostly).

ckeditor folder contains all CKEditor files. It should be in the root folder.

HTML Structure

In general there are 26 main theme .html files:

All these html files have certain html blocks in their source code. All the html blocks are clearly commented out and should be easy to spot. The main structure of a typical 2 columns page would be:

            
                
                <div id="top">...</div>
                
            	
                <div id="container">

                    
                    <div id="sidebar">...</div>

                    
                    <div id="content">

                        
                        <div class="wrapper">...</div>

                    </div>

                </div>

                
                <div id="footer">...</div>

Pannonia template has fully responsive layout - it means that it was adapted for different screen resolutions and mobile devices.

Pannonia is available in 2 columns layout version only. On small screens sidebar is hidden by default. To Show or Hide sidebar you need to click on the button on the top menu. When sidebar is visible, content part is hidden with hidden horizontal overflow. After resizing to 1025px and more, sidebar becomes visible without hidden overflow.

Please note, that all sidebar widgets are visible on any screen size. To hide some of them you'll need to add an additional class and set necessary rule in media queries.

Icons

Pannonia contains 3 types of icons: Font Awesome font, FamFam font and default Bootstrap Glyphicons. Default usage is:

                	<i class="ico-heart"></i>                // Glyphicons dark
                    <i class="ico-heart icon-white"></i>     // Glyphicons white
                    <i class="icon-heart"></i>                // Font awesome dark
                    <i class="fam-heart"></i>                // FamFam icons

PHP files

There are 6 .php files included to the package:

In upload.php file you can set folder for uploaded files. All PHP files are well commented so just follow those tips to setup theme features for your needs.

Elfinder connector configuration options

            <?php
            
            $opts = array(
              // 'debug' => true,
              'roots' => array(
                array(
                  'driver'        => 'LocalFileSystem',   // driver for accessing file system (REQUIRED)
                  'path'          => '/home/kopyov/public_html/',         // path to files (REQUIRED)
                  'URL'           => 'http://kopyov.com/', // URL to files (REQUIRED)
                  'accessControl' => 'access'             // disable and hide dot starting files (OPTIONAL)
                )
              )
            );

            ?>

Full list of options you can find here

Options table

root String Path to root directory. Required parameter
URL String URL of root directory. Required parameter
rootAlias String Alias for root directory
disabled Array List of disabled commands
dotFiles Boolean Show dot files. Default: true
dirSize Boolean Calculate directory sizes
fileMode Octal mode for new files
dirMode Octal mode for new directories
mimeDetect String MIME-type detection method (possible values: finfo, php, linux (file -ib), bsd (file -Ib), internal (based on file extensions))
uploadAllow Array List of mime-types allowed to upload. Can be set exactly image/jpeg or to group application
uploadDeny Array List of mime-types disallowed to upload
uploadOrder String Order of upload rules execution. allow,deny only what is allowed, except what is disallowed (AND). deny,allow what is not disallowed or allowed (OR)
imgLib String Library for thumbnail creation (possible values: imagick, mogrify, gd). If not set will try detect automatically
tmbDir String Thumbnail direcroty. If not set thumbnails will be disabled
tmbCleanProb Integer How often to clean thumbnails. Possible values: from 0 to 200. 0 - never, 200 - on each client init request
tmbAtOnce Integer How many thumbnails to create per background request. Default: 5
tmbSize Integer Thumbnail size in pixels
fileURL Boolean Show real URLs to files in client. Default: true
dateFormat String Time format. Default: j M Y H:i
logger Object Object-logger
defaults Array Default access for files/directories. Default: array( 'read' => true, 'write' => true, 'rm' => true )
perms Array Permission for files/directories. More information on this page
archiveMimes Array List of file archives allowed to create. If not set will allow all detected archvies
archivers Array Information about archivers. If not set will try detect all available
debug Boolean Send debug information to client

CSS files and structure

CSS files structure

In total there are 9 css files:

main.css file imports all alternative stylesheets, so you don't need to include all .css files in each HTML page, simply add/remove necessary line in main.css (first lines):

                /*===== Import css files =====*/

                @import "plugins.css";
                @import "font-awesome.css";
                @import "fam-icons.css";
                @import "icons.css";
                @import "jquery.custom.css";
                @import "elfinder.css";

and inside HTML page include only one main file:

Responsive layout

Pannonia includes media queries, it means that general layout changes general look depending on the screen resolution.

All media query styles are placed into main.css at the bottom

All CSS files are well commented, so you can easily find and edit any class in any CSS file. If you don't want to use responsive layout, delete all media queries and don't forget to remove 

            	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
from HTML files, this line prevents scaling in mobile device browsers.

Note

All tables in the template are responsive, it works this way - all tables should be wrapped by 

<div class="table-overflow">...</div>
and on small screens all tables will have horizontal scrolling inside block and white-space: nowrap; applied to table cells.

JS files and structure

JS files structure

In total there are 54 JS files:

And 3 .js files (jQuery library, Jquery UI and Google maps) loads from external resource:

			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script>

JS files inside HTML pages

In general each HTML page loads 30+ .js files. In your project you can minify all these files into 1 or do whatever you want, but in download package i included all files so you can easily edit/remove/add new files. And depending on the page you can include prettify.js file and mousewheel.js file, they don't have any functions in functions.js file, so i didn't include them to all pages
Each JS file is in proper folder: all files, which are used for forms are placed in /forms/ folder, the same path is in HTML page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">

<script type="text/javascript" src="js/plugins/charts/jquery.sparkline.min.js"></script>

<script type="text/javascript" src="js/plugins/ui/jquery.easytabs.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.collapsible.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.bootbox.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.colorpicker.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.timepicker.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.jgrowl.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fancybox.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.fullcalendar.min.js"></script>
<script type="text/javascript" src="js/plugins/ui/jquery.elfinder.js"></script>

<script type="text/javascript" src="js/plugins/uploader/plupload.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html4.js"></script>
<script type="text/javascript" src="js/plugins/uploader/plupload.html5.js"></script>
<script type="text/javascript" src="js/plugins/uploader/jquery.plupload.queue.js"></script>

<script type="text/javascript" src="js/plugins/forms/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.autosize.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputlimiter.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.inputmask.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.select2.min.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.listbox.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validation.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.wizard.js"></script>
<script type="text/javascript" src="js/plugins/forms/jquery.form.js"></script>

<script type="text/javascript" src="js/globalize/globalize.js"></script>
<script type="text/javascript" src="js/globalize/globalize.culture.de-DE.js"></script>
<script type="text/javascript" src="js/globalize/globalize.culture.ja-JP.js"></script>

<script type="text/javascript" src="js/plugins/tables/jquery.dataTables.min.js"></script>

<script type="text/javascript" src="js/files/bootstrap.min.js"></script>

<script type="text/javascript" src="js/files/functions.js"></script>

These files need to be included only in charts.html page: 

<script type="text/javascript" src="js/plugins/charts/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.orderBars.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.threshold.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.fillbetween.js"></script>
<script type="text/javascript" src="js/plugins/charts/jquery.flot.resize.js"></script>

Javascript files which contain jQuery Flot parameters load only on those pages, which have a graph. There is a well known flot issue with plot drawing, when parameters are loaded, but the chart isn't included in the page: 

<script type="text/javascript" src="js/charts/chart1.js"></script>
<script type="text/javascript" src="js/charts/chart2.js"></script>
<script type="text/javascript" src="js/charts/chart3.js"></script>
<script type="text/javascript" src="js/charts/updating.js"></script>
<script type="text/javascript" src="js/charts/graph.js"></script>
<script type="text/javascript" src="js/charts/bar.js"></script>
<script type="text/javascript" src="js/charts/hBar.js"></script>
<script type="text/javascript" src="js/charts/pie.js"></script>
<script type="text/javascript" src="js/charts/pie_full.js"></script>
<script type="text/javascript" src="js/charts/donut.js"></script>
<script type="text/javascript" src="js/charts/filled1.js"></script>
<script type="text/javascript" src="js/charts/filled2.js"></script>
<script type="text/javascript" src="js/charts/filled3.js"></script>

Jquery Plugins

List of Jquery plugins which were used in Pannonia theme, with details:

Dual select boxes

Overview

This plug-in allows you to "transfer" the <option> elements between the <select>s in two distinct ways:

Options

The following table has a listing of all the possible option settings, their default values, their valid values, and a brief description of each.

Parameter Default Value Values Description
box1View 'box1View' Any valid HTML id string. The id attribute of the first visible <select> element.
box1Storage 'box1Storage' Any valid HTML id string. The id attribute of the first hidden <select> element. (See section Document Structure for an explanation of visible/hidden <select> elements.)
box1Filter 'box1Filter' Any valid HTML id string. The id attribute of the textbox used to filter the first<select> element.
box1Clear 'box1Clear' Any valid HTML id string. The id attribute of the element used to clear the filter for the first <select> element. This is typically a button, but can technically be any element.
box1Counter 'box1Counter' Any valid HTML id string. The id attribute of the element used to display counts of visible/total <option>s in the first <select>element. (used when filtering).
box2View 'box2View' Any valid HTML id string. The id attribute of the second visible <select>element.
box2Storage 'box2Storage' Any valid HTML id string. The id attribute of the second hidden <select>element.
box2Filter 'box2Filter' Any valid HTML id string. The id attribute of the textbox used to filter the second<select> element.
box2Clear 'box2Clear' Any valid HTML id string. The id attribute of the element used to clear the filter for the second <select> element. This is typically a button, but can technically be any element.
box2Counter 'box2Counter' Any valid HTML id string. The id attribute of the element used to display counts of visible/total <option>s in the second <select>element. (used when filtering).
to1 'to1' Any valid HTML id string. The id attribute of the element used to transfer only selected <option>s from the second <select> to the first.
to2 'to2' Any valid HTML id string. The id attribute of the element used to transfer only selected <option>s from the first <select> to the second.
allTo1 'allTo1' Any valid HTML id string. The id attribute of the element used to transfer ALL<option>s from the second <select> to the first.
allTo2 'allTo2' Any valid HTML id string. The id attribute of the element used to transfer ALL<option>s from the first <select> to the second.
transferMode 'move' 'move','copy' The type of transfer to perform on moved items. See section Transfer Modes for a full description of each.
sortBy 'text' 'text','value' The value to sort <option> elements by. 'text' causes them to sort alphanumerically (ascending) by the visible text of the option. 'value' causes them to sort alphanumerically (ascending) by their 'value' attribute.
useFilters true true,false True to enable filtering, false to disable it. If this setting is false, it is recommended that useCounters also be set to false, as the counters will not serve a purpose.
useCounters true true,false True to enable counters, false to disable them.
useSorting true true,false Sorting enforces a consistent sort order on the<option> elements, regardless of what order they are transferred in. Set this to false if you do not want them to (or do not care if they) maintain a consistent order.
selectOnSubmit true true,false In order for options in box 2 to be recieved by POST, they must be selected before the form is submitted. Since this is most often the desired behavior, it is enabled by default. Set this option to false to disable.

Note: Original documentation for this plugin you can find on official plugin's website: http://www.meadmiracle.com/dlb/DLBDocumentation.aspx

Time picker

Overview

jquery.timepicker is a lightweight timepicker plugin for jQuery inspired by Google Calendar. It supports both mouse and keyboard navigation, and weighs in at 2.5kb minified and gzipped. Default markup: 

                <span class="ui-timepicker-container">
                    <input value="5:00pm" class="ui-timepicker-input" type="text">
                    <ul class="ui-timepicker-list optional-custom-classname" tabindex="-1">
                        <li>12:00am</li>
                        <li>12:30am</li>
                        ...
                        <li>4:30pm</li>
                        <li class="ui-timepicker-selected">5:00pm</li>
                        <li>5:30pm</li>
                        ...
                        <li>11:30pm</li>
                    </ul>
                </span>

Options

Note: Original documentation for this plugin you can find on official plugin's website: http://jonthornton.github.com/jquery-timepicker/

Form wizard

Overview

The form wizard plugin is a jQuery plugin which can be used to create wizard like page flows for forms without having to reload the page in between wizard steps. The plugin is unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form; depending on the user input.

Features

For options and parameters please visit official plugin website.

Note: Original documentation for this plugin you can find on official plugin's website: http://thecodemine.org/

Color Picker for Bootstrap

About

Add color picker to field or to any other element.

Default markup
                <div class="input-append color" data-color="rgb(255, 146, 180)" data-color-format="rgb">
                <input type="text" class="span2" value="" >
                <span class="add-on"><i style="background-color: rgb(255, 146, 180)"></i></span>
                </div>
Events
Event Description
show This event fires immediately when the color picker is displayed.
hide This event is fired immediately when the color picker is hidden.
changeColor This event is fired when the color is changed.

Note: Original documentation for this plugin you can find on official plugin's website: http://www.eyecon.ro/bootstrap-colorpicker/

Datatables

Introduction

DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities. When you initialise the jQuery.dataTable object, information about the table is read directly from the HTML page. In combination with the default values for the features in DataTables, this makes it very easy to integrate directly into your web-site or web-application. Optionally, you can use the initialisation parameters to load data from locations other than the DOM, such as a server-side processing script or an Ajax obtained JSON file.

Features

By default the majority of features that DataTables provides are enabled, such that a richly interactive table is presented to end users. However, you may wish to disable various features to customise DataTables to your specific application. This is possible using the following initialisation parameters.

bAutoWidth 
 Enable or disable automatic column width calculation. This can be disabled as an optimisation (it takes some time to calculate the widths) if the tables widths are passed in using aoColumns.
bDeferRender 
 Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
bFilter 
 Enable or disable filtering of data. Filtering in DataTables is "smart" in that it allows the end user to input multiple words (space separated) and will match a row containing those words, even if not in the order that was specified (this allow matching across multiple columns). Note that if you wish to use filtering in DataTables this must remain 'true' - to remove the default filtering input box and retain filtering abilities, please use sDom.
bInfo 
 Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed.
bJQueryUI 
 Enable jQuery UI ThemeRoller support (required as ThemeRoller requires some slightly different and additional mark-up from what DataTables has traditionally used).
bLengthChange 
 Allows the end user to select the size of a formatted page from a select menu (sizes are 10, 25, 50 and 100). Requires pagination (bPaginate).
bPaginate 
 Enable or disable pagination.
bProcessing 
 Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
bScrollInfinite 
 Enable infinite scrolling for DataTables (to be used in combination with sScrollY). Infinite scrolling means that DataTables will continually load data as a user scrolls through a table, which is very useful for large dataset. This cannot be used with pagination, which is automatically disabled.
bSort 
 Enable or disable sorting of columns. Sorting of individual columns can be disabled by the "bSortable" option for each column.
bSortClasses 
 Enable or disable the addition of the classes 'sorting_1', 'sorting_2' and 'sorting_3' to the columns which are currently being sorted on. This is presented as a feature switch as it can increase processing time (while classes are removed and added) so for large data sets you might want to turn this off.
bStateSave 
 Enable or disable state saving. When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting. As such when the end user reloads the page the display display will match what thy had previously set up.
sScrollX 
 Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable x-scrolling to show the table in a viewport, which can be scrolled. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).
sScrollY 
 Enable vertical scrolling. Vertical scrolling will constrain the DataTable to the given height, an enable scrolling for any data which overflows the current viewport. This can be used as an alternative to paging to display a lot of data in a small area (although paging and scrolling can both be enabled at the same time). This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).
Options

Where the DataTables features can be considered rough grain tuning of your DataTables integration, there are many other parameters which will let you obtain the fine grain tuning you might need to make the integration truly seamless. Almost every function that DataTables provides can be fine tuned in some manner using the initialisation options shown below.

aaData 
 An array of data to use for the table, passed in at initialisation which will be used in preference to any data which is already in the DOM. This is particularly useful for constructing tables purely in Javascript, for example with a custom Ajax call.
aaSorting 
 If sorting is enabled, then DataTables will perform a first pass sort on initialisation. You can define which column(s) the sort is performed upon, and the sorting direction, with this variable. The aaSorting array should contain an array for each column to be sorted initially containing the column's index and a direction string ('asc' or 'desc').
aaSortingFixed This parameter is basically identical to the aaSorting parameter, but cannot be overridden by user interaction with the table. What this means is that you could have a column (visible or hidden) which the sorting will always be forced on first - any sorting after that (from the user) will then be performed as required. This can be useful for grouping rows together.
aLengthMenu 
 This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled. It can be either a 1D array of options which will be used for both the displayed option and the value, or a 2D array which will use the array in the first position as the value, and the array in the second position as the displayed options (useful for language strings such as 'All').
aoSearchCols 
 Basically the same as oSearch, this parameter defines the individual column filtering state at initialisation time. The array must be of the same size as the number of columns, and each element be an object with the parameters "sSearch" and "bEscapeRegex" (the latter is optional). 'null' is also accepted and the default will be used.
asStripClasses 
 An array of CSS classes that should be applied to displayed rows. This array may be of any length, and DataTables will apply each class sequentially, looping when required.
bDestroy 
 Replace a DataTable which matches the given selector and replace it with one which has the properties of the new initialisation object passed. If no table matches the selector, then the new DataTable will be constructed as per normal.
bRetrieve 
 Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this). bDestroy can be used to reinitialise a table if you need.
bScrollCollapse When vertical (y) scrolling is enabled, DataTables will force the height of the table's viewport to the given height at all times (useful for layout). However, this can look odd when filtering data down to a small data set, and the footer is left "floating" further down. This parameter (when enabled) will cause DataTables to collapse the table's viewport down when the result set will fit within the given Y height.
bSortCellsTop 
 Allows control over whether DataTables should use the top (true) unique cell that is found for a single column, or the bottom (false - default). This is useful when using complex headers.
iCookieDuration 
 Duration of the cookie which is used for storing session information. This value is given in seconds.
iDeferLoading 
 When enabled DataTables will not make a request to the server for the first page draw - rather it will use the data already on the page (no sorting etc will be applied to it), thus saving on an XHR at load time. iDeferLoading is used to indicate that deferred loading is required, but it is also used to tell DataTables how many records there are in the full table (allowing the information element and pagination to be displayed correctly).
iDisplayLength 
 Number of rows to display on a single page when using pagination. If feature enabled (bLengthChange) then the end user will be able to over-ride this to a custom setting using a pop-up menu.
iDisplayStart 
 Define the starting point for data display when using DataTables with pagination. Note that this parameter is the number of records, rather than the page number, so if you have 10 records per page and want to start on the third page, it should be "20".
iScrollLoadGap 
 The scroll gap is the amount of scrolling that is left to go before DataTables will load the next 'page' of data automatically. You typically want a gap which is big enough that the scrolling will be smooth for the user, while not so large that it will load more data than need.
oSearch 
 This parameter allows you to have define the global filtering state at initialisation time. As an object the "sSearch" parameter must be defined, but the "bRegex" and "bSmart" parameters are optional. When "bRegex" is true, the search string will be treated as a regular expression, when false (default) it will be treated as a straight string. When "bSmart" DataTables will use it's smart filtering methods (to word match at any point in the data), when false this will not be done.
sAjaxDataProp 
 By default DataTables will look for the property 'aaData' when obtaining data from an Ajax source or for server-side processing - this parameter allows that property to be changed. You can use Javascript dotted object notation to get a data source for multiple levels of nesting.
sAjaxSource 
 You can instruct DataTables to load data from an external source using this parameter (use aData if you want to pass data in you already have). Simply provide a url a JSON object can be obtained from. This object must include the parameter 'aaData' which is a 2D array with the source data.
sCookiePrefix 
 This parameter can be used to override the default prefix that DataTables assigns to a cookie when state saving is enabled.
sDom This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling. The follow syntax is used:
  • The following options are allowed:
    • 'l' - Length changing
    • 'f' - Filtering input
    • 't' - The table!
    • 'i' - Information
    • 'p' - Pagination
    • 'r' - pRocessing
  • The following constants are allowed:
    • 'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
    • 'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
  • The following syntax is expected:
    • '<' and '>' - div elements
    • '<"class" and '>' - div with a class
    • '<"#id" and '>' - div with an ID
  • Examples:
    • '<"wrapper"flipt>', '<lf<t>ip>'
sPaginationType 
 DataTables features two different built-in pagination interaction methods ('two_button' or 'full_numbers') which present different page controls to the end user. Further methods can be added using the API (see below).
sScrollXInner This property can be used to force a DataTable to use more width than it might otherwise do when x-scrolling is enabled. For example if you have a table which requires to be well spaced, this parameter is useful for "over-sizing" the table, and thus forcing scrolling. This property can by any CSS unit, or a number (in which case it will be treated as a pixel measurement).

Note: Original documentation for this plugin you can find on official plugin's website: http://datatables.net/

Easy tabs

Overview

Configuration
Option Description Values (default)
animate Makes content panels fade out and in when a new tab is clicked. true, false 
(true)
animationSpeed Controls the speed of the fading effect if animate: true. "slow", "normal", "fast", integer in milliseconds 
("normal")
cache
v2.3		 Caches the content retrieved for ajax tabs after the first request, such that subsequent tab clicks only hide/show the content. true, false 
(true)
collapsedByDefault
v2.1		 Makes tabs collapsed by default (when the page is loaded) if collapsible: true. Note that ifdefaultTab is specified, then collapsedByDefault defaults to false. true, false 
(true)
collapsedClass
v2.1		 Adds specified class to tab when panel is collapsed. Only works for collapsible: true. any class name string 
("collapsed")
collapsible
v2.1		 Makes panels collapse and un-collapse if active tab is clicked repeatedly. true, false 
(false)
containerClass
v2.3.4		 Adds class(es) to the container on instantiation. String of desired CSS classes separated by spaces 
("")
cycle
v1.1.2		 Turns on automatic cycling through tabs, with the specified cycling interval in milliseconds. false, integer in milliseconds 
(false)
defaultTab Selects the <li> tab to activate when page first loads. any single jquery selector 
e.g. "li:first-child" or "li#tab-2" 
("li:first-child")
panelActiveClass Adds specified class to the currently-selected content <div> any class name string 
e.g. "active" or "selected" 
("active")
panelClass
v2.3.4		 Adds class(es) to each panel element on instantiation. String of desired CSS classes separated by spaces 
("")
panelContext
v3.1.1		 Context in which to search for panels matching tabs. jQuery object 
($container - i.e. tab container on which easytabs was called)
tabActiveClass Adds specified class to the currently-selected tab <li> (and it's descendants). any class name string e.g. "active"or "selected" 
("active")
tabsClass
v2.3.4		 Adds class(es) to the tab container on instantiation. String of desired CSS classes separated by spaces 
("")
tabClass
v2.3.4		 Adds class(es) to each tab on instantiation. String of desired CSS classes separated by spaces 
("")
tabs
v1.1.2		 The container element for your tabs, relative to the container element that easyTabs was applied to. any jquery selector referencing your collection of tabs 
e.g. "ul#tabs > li" or "div#tab-container > span" 
("> ul > li", which selects the top-level
    within the container element)
transitionIn
v2.2		 The jQuery effect used to show the target panel when a tab is selected. 'fadeIn', 'slideDown' 
('fadeIn')
transitionInEasing
v3.1		 The jQuery easing speed for the transitionIn animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin 'swing', 'linear' 
('swing')
transitionOut
v2.2		 The jQuery effect used to hide the visible panel when a tab is selected. 'fadeOut', 'slideUp' 
('fadeOut')
transitionOutEasing
v3.1		 The jQuery easing speed for the transitionOut animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin 'swing', 'linear' 
('swing')
transitionCollapse
v2.2		 The jQuery effect used to collapse the panel if collapsible: true. 'fadeOut', 'slideUp', 'hide' 
(slideUp)
transitionCollapseEasing
v3.1		 The jQuery easing speed for the transitionCollapse animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin 'swing', 'linear' 
('swing')
transitionUncollapse
v2.2		 The jQuery effect used to un-collapse the panel if collapsible: true. 'fadeIn', 'slideDown', 'show' 
(slideDown)
transitionUncollapseEasing
v3.1		 The jQuery easing speed for the transitionUncollapse animation. May also be used with custom easing plugins, such as provided by the jquery easing plugin 'swing', 'linear' 
('swing')
updateHash
v1.1.2		 Tells easyTabs whether or not to update the browser window's URL hash, useful for SEO and bookmarking. true, false 
(true)
uiTabs
v2.1		 Automatically uses class names and defaults of jQuery UI tabs, making it easy to switch from jQuery-UI tabs without needing to change any HTML or CSS styles. true, false 
(false)

Note: Original tutorial you can find here: http://os.alfajango.com/easytabs/

Elfinder plugin

File manager for website

elFinder is an open-source file manager for web, written in JavaScript using jQuery UI. As you can see its creation is inspired by simplicity and convenience of Finder program used in Mac OS X operating system.

The main goal of our file manager - is to make you work with remote files the same convenient, as on your computer.
You can select files the usual way as on your computer and then just drag them to desired folder to move.
If you prefer to use "hot keys" then you will not notice any difference using elFinder.
Furthermore elFinder can create and extract archives, and QuickLook function allows you to preview common types of files like images, flash, text, audio, video and even pdf.
It allows to create and edit any text files and resize images.
Flexible configuration options allows to control: access rights, upload files types, log user evens; so everything that need system administrator.
Connectors in different programming languages gives ability to easy integrate our product in your solutions.

Features
Requirements
Client: Server:

Note: Original documentation for this plugin you can find on official plugin's website: http://elrte.org/elfinder/

Flot, flot pie, excanvas, order bars ( jquery.flot.js, jquery.flot.pie.js, excanvas.min.js etc. )

Introduction

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvasJavascript emulation helper is used for IE < 9).

Installation

Just include the Javascript file after you've included jQuery. Generally, all browsers that support the HTML5 canvas tag are supported.
For support for Internet Explorer < 9, you can use Excanvas - a canvas emulator; this is used in the examples bundled with Flot. You just include the excanvas script like this:  

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
If it's not working on your development IE 6.0, check that it has support for VML which Excanvas is relying on. It appears that some stripped down versions used for test environments on virtual machines lack the VML support.You can also try using Flashcanvas (see http://code.google.com/p/flashcanvas/), which uses Flash to do the emulation. Although Flash can be a bit slower to load than VML, if you've got a lot of points, the Flash version can be much faster overall. Flot contains some wrapper code for activating Excanvas which Flashcanvas is compatible with.
You need at least jQuery 1.2.6, but try at least 1.3.2 for interactive charts because of performance improvements in event handling.

Basic usage

Create a placeholder div to put the graph in: 

<div id="placeholder"></div>
You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this: 
<div id="placeholder" style="width:600px;height:300px"></div>
You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).
Then when the div is ready in the DOM, which is usually on document ready, run the plot function: 
$.plot($("#placeholder"), data, options);
Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the reference in the file "API.txt". Here's a quick example that'll draw a line from (0, 0) to (1, 1): 
$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });
The plot function immediately draws the chart and then returns a plot object with a couple of methods.

Please visit official website of Flot plugin for more detailed documentation

Note: Original documentation for this plugin you can find on official plugin's website: http://code.google.com/p/flot/

jQuery Autosize

About

A plugin to enable automatic height for textarea elements.

Settings
Property Default Description
className 'autosizejs' The className property is used to specify a class for the mirrored element, in case it's necessary to explicitly set a style on the mirrored element (see the note about line-height below).
append '' For appending whitespace to the end of the height calculation (an extra newline improves the apperance when animating). Example $('.textarea').autosize({append: "\n"});
callback false A function to call when the textarea is resized.
Example usage
                // Example:
                $(document).ready(function(){
                $('textarea').autosize();  
                });

Note: Original documentation for this plugin you can find on official plugin's website: http://www.jacklmoore.com/autosize

Inputmask plugin

Introduction

Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.

Usage
Via data attributes

Add data attributes to register an element with inputmask functionality as shown in the example above.

Via Javascript

Call the input mask via javascript: 

                    $('.inputmask').inputmask()

Note: Original documentation for this plugin you can find on official plugin's website: http://jasny.github.com/bootstrap/javascript.html#inputmask

Fancybox lightbox

Overview

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.

Features
Default usage
 
              $(document).ready(function() {

                    /* This is basic - uses default settings */
                    
                    $("a#single_image").fancybox();
                    
                    /* Using custom settings */
                    
                    $("a#inline").fancybox({
                        'hideOnContentClick': true
                    });
                
                    /* Apply fancybox to multiple items */
                    
                    $("a.group").fancybox({
                        'transitionIn'	:	'elastic',
                        'transitionOut'	:	'elastic',
                        'speedIn'		:	600, 
                        'speedOut'		:	200, 
                        'overlayShow'	:	false
                    });
                    
                });
Options
Key Default value Description
padding 10 Space between FancyBox wrapper and content
margin 20 Space between viewport and FancyBox wrapper
opacity false When true, transparency of content is changed for elastic transitions
modal false When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
cyclic false When true, galleries will be cyclic, allowing you to keep pressing next/back.
scrolling 'auto' Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'
width 560 Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
height 340 Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
autoScale true If true, FancyBox is scaled to fit in viewport
autoDimensions true For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
centerOnScroll false When true, FancyBox is centered while scrolling page
ajax { } Ajax options 
Note: 'error' and 'success' will be overwritten by FancyBox
swf {wmode: 'transparent'} Params to put on the swf object
hideOnOverlayClick true Toggle if clicking the overlay should close FancyBox
hideOnContentClick false Toggle if clicking the content should close FancyBox
overlayShow true Toggle overlay
overlayOpacity 0.3 Opacity of the overlay (from 0 to 1; default - 0.3)
overlayColor '#666' Color of the overlay
titleShow true Toggle title
titlePosition 'outside' The position of title. Can be set to 'outside', 'inside' or 'over'
titleFormat null Callback to customize title area. You can set any html - custom image counter or even custom navigation
transitionIn, transitionOut 'fade' The transition type. Can be set to 'elastic', 'fade' or 'none'
speedIn, speedOut 300 Speed of the fade and elastic transitions, in milliseconds
changeSpeed 300 Speed of resizing when changing gallery items, in milliseconds
changeFade 'fast' Speed of the content fading while changing gallery items
easingIn, easingOut 'swing' Easing used for elastic animations
showCloseButton true Toggle close button
showNavArrows true Toggle navigation arrows
enableEscapeButton true Toggle if pressing Esc button closes FancyBox
onStart null Will be called right before attempting to load the content
onCancel null Will be called after loading is canceled
onComplete null Will be called once the content is displayed
onCleanup null Will be called just before closing
onClosed null Will be called once FancyBox is closed

Note: Original documentation for this plugin you can find on official plugin's website: http://fancybox.net/home

Custom form elements ( uniform.js )

Usage

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

Installation

Installation of Uniform is quite simple. First, make sure you have jQuery 1.3+ installed. Then you'll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page:

            <script src="jquery.uniform.js" type="text/javascript"></script>
            <link rel="stylesheet" href="uniform.default.css" type="text/css" media="screen" charset="utf-8" />
Basic usage

Using Uniform can be quite easy as well. Simply call:

            $(function(){ $("select").uniform(); });

To "uniform" all possible form elements, just do something like this:

            $("select, input:checkbox, input:radio, input:file").uniform();
Extra parameters

You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like this:

            $("select").uniform({
              param1: value,
              param2: value,
              param3: value
            });
Tips and tricks

Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:
Remember to change the CSS classes in the theme if you change the parameters for elements' classes. This can be tedious work, but if you don't do it, it's not going to look correct. Find and Replace is your friend.
Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in Javascript or using a Reset button of some kind remember to call $.uniform.update(); to sync the changes with Uniform.
Uniform is disabled in IE6. It's not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your "naked" form elements look alright in there.
You're on your own for styling text inputs and more. Fortunately, things that are not handled by Uniform are pretty easy to skin. :)

Note: Original advanced documentation for this plugin you can find on official plugin's website: http://uniformjs.com/#docs

Multiple file uploader

Configuration

Each plupload instance has a set of config options. Here is a short description about each available option.

General options

Here is a list of options that are available in the core API. Some of them are runtime specific. Checkout the custom exampleto see these option used live.

runtimes

This is a comma separated list of runtimes that you want to initialize the uploader instance with. It will try to initialize each runtime in order if one fails it will move on to the next one.

url

Page URL to where the files will be uploaded to.

max_file_size

Maximum file size that the user can pick. This string can be in the following formats 100b, 10kb, 10mb.

chunk_size

Enables you to chunk the file into smaller pieces for example if your PHP backend has a max post size of 1MB you can chunk a 10MB file into 10 requests. To disable chunking, remove this config option from your setup.

unique_names

Generate unique filenames when uploading. This will generate unqiue filenames for the files so that they don't for example collide with existing ones on the server.

resize

Enables plupload to resize the images to clientside to the specified width, height and quality. Set this to an object with those parameters.

filters

List of filters to apply when the user selects files. This is currently file extension filters there are two items for each filter. title and extensions.

flash_swf_url

URL to where the SWF file is for the Flash runtime.

silverlight_xap_url

URL to where the XAP file is for the Silverlight runtime.

browse_button

String with the ID of the browse button. Flash, HTML 5 and Silverlight requires a shim so you need to specify the id of the button that the shim will be placed above for those runtimes. This option is not required for by the queue widget.

drop_element

String with the ID of the element that you want to be able to drop files into this is only used by some runtimes that support it.

container

Element ID to add object elements to, this defaults to the document body element.

multipart

Boolean state if the files should be uploaded using mutlipart instead of direct binary streams. Doesn't work on WebKit using the HTML 5 runtime.

multipart_params

Object name/value collection with arguments to get posted together with the multipart file.

required_features

Comma separated list of features that each runtime must have for it to initialize.

headers

Name/value object with custom headers to add to HTTP requests.

Queue widget specific options

Here is a list of options that is specific to the jQuery queue widget.

preinit

Function callback that enables you to bind events before the uploader is initialized.

dragdrop

Boolean state if the drag/drop support for all runtimes should be enabled or disabled. Default is true.

rename

Boolean state if it should be possible to rename files before uploading them. Default is false.

multiple_queues

Boolean state if you should be able to upload multiple times or not.

urlstream_upload

Boolean state if Flash should be forced to use URLStream instead of FileReference.upload.

Example of the various config options
            var uploader = new plupload.Uploader({
                runtimes : 'gears,html5,flash,silverlight,browserplus',
                browse_button : 'pickfiles',
                max_file_size : '10mb',
                resize : {width : 320, height : 240, quality : 90},
                url : 'upload.php',
                flash_swf_url : '/plupload/js/plupload.flash.swf',
                silverlight_xap_url : '/plupload/js/plupload.silverlight.xap',
                filters : [
                    {title : "Image files", extensions : "jpg,gif,png"},
                    {title : "Zip files", extensions : "zip"}
                ]
            });

In this implemented version i used only HTML5 and HTML4 runtimes. HTML4 works in IE and Opera only and doesn't support lots of features. More information here

Note: Original documentation for this plugin you can find on official plugin's website: http://www.plupload.com/index.php

WYSIWYG editor (CKEditor)

Introduction

CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. Enhance your website experience with our community maintained editor.

CKEditor is an Open source application, which means it can be modified any way you want. It benefits from an active community that is constantly evolving the application with free add-ons and a transparent development process.

Features
Inline editing

To improve the editing experience CKEditor now includes inline editing - a tool that removes the editing area. Say goodbye to impractical text boxes! Now What You See Is Really What You Get.

Spell check as you type

CKEditor includes a zero installation spell check as you type (SCAYT) solution. No server integration required. The application is based on the quality spell checking services provided by WebSpellChecker.net.

Safe undo function

With CKEditor you don't need worry about mistakes because every single action can be safely reverted, guaranteeing that you'll never break things or lose your texts.

Right to left interface

Several languages are read from "right to left", like Arabic, Farsi or Hebrew. For those users, CKEditor will also render from right to left, making them right at home.

UI language auto detection

If you have international users CKEditor can automatically detect their language and localizes the interface accordingly. The editor is translated into over 60 languages!

Quality XHTML output

CKEditor uses advanced W3C DTD controls to ensure that HTML is properly generated. Users will not enter broken code so your pages will easily validate.

Basic & advanced styling

Apply basic styles like bold and italic with ease, as well as more complex styling and semantic rules defined by the website developer. Rich styles, under control.

Real block-quoting

Properly quote text using the correct and semantics-aware <blockquote> tag. Other editors simply focus on the visuals, adding margins to standard paragraphs (that's so 90s).

Colors

Plain text may be boring. It’s sometimes nice to distinguish or highlight text with color or give tables more personality. With the color selector this job is a few clicks away.

Advanced paste from Word

Most content is written in Microsoft Word and web browsers use HTML. CKEditor's powerful and unique Paste from Word feature makes it easy to convert text.

Advanced linking

Other than creating usual web links with ease, CKEditor makes it possible to build advanced links that can open popups, links to anchors, e-mails or any kind of web resource.

E-mail linking

Creating e-mail links with CKEditor is as simple as inserting the desired e-mail address. Even the message subject and text can be set, so e-mails will be pre-compiled.

Note: Original documentation for this plugin you can find on official plugin's website: http://ckeditor.com/

Fullcalendar plugin

FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided forGoogle Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). It is open source and dual licensed under the MIT or GPL Version 2 licenses.

Basic Usage

The first step in embedding a calendar on a web page is to have the right JavaScript and CSS files. Make sure you are including the FullCalendar stylesheet, as well as the FullCalendar and jQuery JS files, in the <head> of your page:

                <link rel='stylesheet' type='text/css' href='fullcalendar.css' />  
                <script type='text/javascript' src='jquery.js'></script>  
                <script type='text/javascript' src='fullcalendar.js'></script>

If you plan on doing dragging or resizing, you need some additional jQuery UI files (more information here).

Once you have your dependencies, you need to write the JavaScript code that initializes the calendar. This code must be executed after the page has initialized. The best way to do this is with jQuery's $(document).ready like so:

 
            $(document).ready(function() {      
            
                // page is now ready, initialize the calendar...       
                $('#calendar').fullCalendar({          
                
                    // put your options and callbacks here      
                
                })    
            });
Options

Most of FullCalendar's documentation describes options that affect the look or behavior of the calendar. Options are usually set when the calendar is initialized, like so:

                $('#calendar').fullCalendar({
                    weekends: false // will hide Saturdays and Sundays
                });
Callbacks

Callbacks are sort of like options, but they are functions that get called whenever something special happens. In the following example, an alert box will appear whenever the user clicks on a day:

                $('#calendar').fullCalendar({
                    dayClick: function() {
                        alert('a day has been clicked!');
                    }
                });
Methods

Methods provide ways to manipulate the calendar from JavaScript code. A method operates on the jQuery object of a calendar that has already been initialized, using the familiar fullCalendar command, but in a completely different way: 

                $('#calendar').fullCalendar('next');

This will call the next method and will force to the calendar to move to the next month/week/day.

Note: Original documentation for this plugin you can find on official plugin's website: http://arshaw.com/fullcalendar/docs/usage/

Collapsible ( jquery.collapsible.min.js )

Introduction

This plugin enables site owners to control multiple collapsible panels by auto opening any defaults specified, and keeping those opened/closed by users as they left them while browsing your site.

Default settings
            {
                cssClose: 'collapse-close',
                cssOpen: 'collapse-open',
                cookieName: 'collapsible',
                cookieOptions: {
                    path: '/',
                    expires: 7,
                    domain: '',
                    secure: ''
                },
                defaultOpen: '',
                speed: 300,
                bind: 'click',
                animateOpen: function (elem, opts) { 
                    elem.next().slideUp(opts.speed);
                },
                animateClose: function (elem, opts) {
                    elem.next().slideDown(opts.speed);
                }
            }
Default options
Methods

You can call following methods on collapsible elements:

Call them using jquery-ui style:

            $(selector).collapsible('method', [arg]);

Examples:

            if ( $('#nav-block').collapsible('collapsed') ) { ... }
            
            or
            
            appendToLog('Error: service is down!');
            $('#nav-logs').collapsible('open');

Note: Original documentation for this plugin you can find on official plugin's website: http://www.snyderplace.com/2010/03/jquery-collapsible-plugin/

Input limiter plugin

Introduction

This jQuery plugin will allow you to limit input into form fields. It can display a message as the user types to let them know how many characters they have remaining.

Options

Note: Original documentation for this plugin you can find on official plugin's website: http://rustyjeans.com/jquery-plugins/input-limiter

Tags input

Introduction

Do you use tags to organize content on your site? This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data - your form just sees a comma-delimited list of tags!

Options
            $(selector).tagsInput({
               'autocomplete_url': url_to_autocomplete_api,
               'autocomplete': { option: value, option: value},
               'height':'100px',
               'width':'300px',
               'interactive':true,
               'defaultText':'add a tag',
               'onAddTag':callback_function,
               'onRemoveTag':callback_function,
               'onChange' : callback_function,
               'removeWithBackspace' : true,
               'minChars' : 0,
               'maxChars' : 0 //if not provided there is no limit,
               'placeholderColor' : '#666666'
            });

Note: Original documentation for this plugin you can find on official plugin's website: http://xoxco.com/projects/code/tagsinput/

Mousewheel plugin

Introduction

A jQuery plugin that adds cross-browser mouse wheel support. In order to use the plugin, simply bind the "mousewheel" event to an element. It also provides two helper methods called mousewheel and unmousewheel that act just like other event helper methods in jQuery. The event callback receives an extra argument which is the normalized "delta" of the mouse wheel.

Example usage
                // using bind
                $('#my_elem').bind('mousewheel', function(event, delta) {
                    console.log(delta);
                });

                // using the event helper
                $('#my_elem').mousewheel(function(event, delta) {
                    console.log(delta);
                });

Note: Original documentation for this plugin you can find on official plugin's website: http://brandonaaron.net/code/mousewheel/docs

Select2 plugin

Introduction

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results

Example usage
                <head>
                    <link href="select2.css" rel="stylesheet"/>
                    <script src="select2.js"></script>
                    <script>
                        $(document).ready(function() { $("#e1").select2(); });
                    </script>
                </head>
                <body>
                    <select id="e1">
                        <option value="AL">Alabama</option>
                        ...
                        <option value="WY">Wyoming</option>
                    </select>
                </body>
Browser compatibility

Note: Original documentation for this plugin you can find on official plugin's website: http://ivaynberg.github.com/select2/

jQuery validation plugin

Introduction

When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task. This is something I tried to remedy with this script. When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.

Default usage
Field validations

Validations are defined using the field’s **class** attribute. Here are a few examples showing how it happens: 

                <input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
                <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
                <input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
For more details about validators, please refer to the section below.

Instantiation

The validator is typically instantiated by using a call of the following form: 

                $("#form.id").validationEngine(action or options);
The method takes one or several optional parameters, either an action (and parameters) or a list of options to customize the behavior of the engine.

Here comes a glimpse: say you have a form is this kind 

                    <form id="formID" method="post" action="submit.action">
                        <input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
                    </form>

The following code would instance the validation engine: 

                    $(document).ready(function(){
                        $("#formID").validationEngine('attach');
                    });

Note: Original documentation for this plugin you can find on official plugin's website: http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

Bootbox plugin

Introduction

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Twitter's Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers. Here's the simplest possible example:

Defaul markup
                
                <div id="myModal" class="modal hide fade">
                    
                    <div class="modal-body">Hello world!</div>
                    
                    <div class="modal-footer"><a href="#" class="btn primary">OK</a></div>
                </div>
Example usage
                $("#myModal").on("show", function() {    // wire up the OK button to dismiss the modal when shown
                    $("#myModal a.btn").on("click", function(e) {
                        console.log("button pressed");   // just as an example...
                        $("#myModal").modal('hide');     // dismiss the dialog
                    });
                });

                $("#myModal").on("hide", function() {    // remove the event listeners when the dialog is dismissed
                    $("#myModal a.btn").off("click");
                });

                $("#myModal").on("hidden", function() {  // remove the actual elements from the DOM when fully hidden
                    $("#myModal").remove();
                });

                $("#myModal").modal({                    // finally, wire up the actual modal functionality and show the dialog
                  "backdrop"  : "static",
                  "keyboard"  : true,
                  "show"      : true                     // ensure the modal is shown immediately
                });

Note: Original documentation for this plugin you can find on official plugin's website: http://bootboxjs.com/

Bootstrap documentation

I didn't add to this documentation file any docs or explanations for Bootstrap plugins, because i won't describe it more detailed than official Bootstrap website.

I tried to keep original Bootstrap markup for all elements in html and css files, however some elements require additional classes like buttons with caret dropdown for proper alignment and others, but not too many. In general everything is equal to original markup.

Original Bootstrap documentation could be found here - http://twitter.github.com/bootstrap/

Please note - i tried to style almost all bootstrap elements, but anyway i didn't use something:

Jquery plugin loaders and other code

Explanations for plugin loaders, which are placed into functions.js file and other jquery stuff.

Show/Hide sidebar

                $('.fullview').click(function(){
                    $("body").toggleClass("clean");
                    $('#sidebar').toggleClass("hide-sidebar mobile-sidebar");
                    $('#content').toggleClass("full-content");
                });

Show/Hide action tabs

                $('.showmenu').click(function () {
                    $('.actions-wrapper').slideToggle(100);
                });

Wizards

                $("#wizard1").formwizard({
                    formPluginEnabled: false, 
                    validationEnabled: false,
                    focusFirstInput : false,
                    disableUIStyles : true
                });

                $("#wizard2").formwizard({
                    formPluginEnabled: true, 
                    validationEnabled: false,
                    focusFirstInput : false,
                    disableUIStyles : true,
                
                    formOptions :{
                        success: function(data){$("#status1").fadeTo(500,1,function(){ $(this).html("Form was submitted!").fadeTo(5000, 0); })},
                        beforeSubmit: function(data){$("#data1").html("Form was submitted with ajax. Data sent to the server: " + $.param(data) + "");},
                        resetForm: true
                    }
                });

                $("#wizard3").formwizard({ 
                    formPluginEnabled: true,
                    validationEnabled: false,
                    focusFirstInput : false,
                    formOptions :{
                        success: function(data){$("#status2").fadeTo(500,1,function(){ $(this).html("Form was submitted!").fadeTo(5000, 0); })},
                        beforeSubmit: function(data){$("#data2").html("Form was submitted with ajax. Data sent to the server: " + $.param(data) + "");},
                        resetForm: true
                    },
                    inAnimation : {height: 'show'},
                    outAnimation: {height: 'hide'},
                    inDuration : 400,
                    outDuration: 400,
                    easing: 'easeInBack'    //see e.g. http://gsgd.co.uk/sandbox/jquery/easing/ for information on easing
                 }
                );

Elfinder

                var elf = $('#file-manager').elfinder({
                    url : 'php/connector.php',  // connector URL (REQUIRED)
                    uiOptions : {
                        // toolbar configuration
                        toolbar : [
                            ['back', 'forward'],
                            ['info'],
                            ['quicklook'],
                            ['search']
                        ]
                    },
                    contextmenu : {
                      // Commands that can be executed for current directory
                      cwd : ['reload', 'delim', 'info'], 
                      // Commands for only one selected file
                      files : ['select', 'open']
                    }
                }).elfinder('instance');

Plupload (multiple file uploader)

                $("#file-uploader").pluploadQueue({
                    runtimes : 'html5,html4',
                    url : 'php/upload.php',
                    max_file_size : '1kb',
                    unique_names : true,
                    filters : [
                        {title : "Image files", extensions : "jpg,gif,png"}
                    ]
                });

Generate random values for bars in stats widgets

                function generateNumber(min, max) {
                    min = typeof min !== 'undefined' ? min : 1;
                    max = typeof max !== 'undefined' ? max : 100;
                    return Math.floor((Math.random() * max) + min);
                };

                setInterval(function() {
                    $('.info-aapl li span').each(function(index, elem) {
                        $(elem).animate({
                            height: generateNumber(1, 40)
                        });
                    });
                }, 3000);

Fullcalendar

                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: true,
                    events: [
                        {
                            title: 'All Day Event',
                            start: new Date(y, m, 1)
                        },
                        {
                            title: 'Long Event',
                            start: new Date(y, m, d-5),
                            end: new Date(y, m, d-2)
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: new Date(y, m, d-3, 16, 0),
                            allDay: false
                        },
                        {
                            id: 999,
                            title: 'Repeating Event',
                            start: new Date(y, m, d+4, 16, 0),
                            allDay: false
                        },
                        {
                            title: 'Meeting',
                            start: new Date(y, m, d, 10, 30),
                            allDay: false
                        },
                        {
                            title: 'Lunch',
                            start: new Date(y, m, d, 12, 0),
                            end: new Date(y, m, d, 14, 0),
                            allDay: false
                        },
                        {
                            title: 'Birthday Party',
                            start: new Date(y, m, d+1, 19, 0),
                            end: new Date(y, m, d+1, 22, 30),
                            allDay: false
                        },
                        {
                            title: 'Click for Google',
                            start: new Date(y, m, 28),
                            end: new Date(y, m, 29),
                            url: 'http://google.com/'
                        }
                    ]
                });

Prettyprint

                window.prettyPrint && prettyPrint();

Media item hover overlay

                $('.view').hover(function(){
                    $(this).children(".view-back").fadeIn(200);
                },function(){
                    $(this).children(".view-back").fadeOut(200);
                });

Timepickers

                $('#defaultValueExample, #time').timepicker({ 'scrollDefaultNow': true });
                
                $('#durationExample').timepicker({
                    'minTime': '2:00pm',
                    'maxTime': '11:30pm',
                    'showDuration': true
                });
                
                $('#onselectExample').timepicker();
                $('#onselectExample').on('changeTime', function() {
                    $('#onselectTarget').text($(this).val());
                });
                
                $('#timeformatExample1, #timeformatExample3').timepicker({ 'timeFormat': 'H:i:s' });
                $('#timeformatExample2, #timeformatExample4').timepicker({ 'timeFormat': 'h:i A' });

Color picker

                $('#cp1').colorpicker({
                    format: 'hex'
                });
                $('#cp2').colorpicker();
                $('#cp3').colorpicker();
                    var bodyStyle = $('html')[0].style;
                $('#cp4').colorpicker().on('changeColor', function(ev){
                    bodyStyle.background = ev.color.toHex();
                });

Date pickers

                $( ".datepicker" ).datepicker({
                            defaultDate: +7,
                    showOtherMonths:true,
                    autoSize: true,
                    appendText: '(dd-mm-yyyy)',
                    dateFormat: 'dd-mm-yy'
                    });
                    
                $('.inlinepicker').datepicker({
                    inline: true,
                    showOtherMonths:true
                });

                var dates = $( "#fromDate, #toDate" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: false,
                    showOtherMonths:true,
                    numberOfMonths: 3,
                    onSelect: function( selectedDate ) {
                        var option = this.id == "fromDate" ? "minDate" : "maxDate",
                            instance = $( this ).data( "datepicker" ),
                            date = $.datepicker.parseDate(
                                instance.settings.dateFormat ||
                                $.datepicker._defaults.dateFormat,
                                selectedDate, instance.settings );
                        dates.not( this ).datepicker( "option", option, date );
                    }
                });
                
                $( "#datepicker-icon, .navbar-datepicker" ).datepicker({
                    showOn: "button",
                    buttonImage: "img/icons/date_picker.png",
                    buttonImageOnly: true
                });

Modals and dialogs

                $("a.bs-alert").click(function(e) {
                    e.preventDefault();
                    bootbox.alert("Hello world!", function() {
                        console.log("Alert Callback");
                    });
                });
                
                $("a.confirm").click(function(e) {
                    e.preventDefault();
                    bootbox.confirm("Are you sure?", function(confirmed) {
                        console.log("Confirmed: "+confirmed);
                    });
                });
                
                $("a.bs-prompt").click(function(e) {
                    e.preventDefault();
                    bootbox.prompt("What is your name?", function(result) {
                        console.log("Result: "+result);
                    });
                });
                
                $("a.dialog").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("I am a custom dialog", [{
                        "label" : "Success!",
                        "class" : "btn-success",
                        "callback": function() {
                            console.log("great success");
                        }
                    }, {
                        "label" : "Danger!",
                        "class" : "btn-danger",
                        "callback": function() {
                            console.log("uh oh, look out!");
                        }
                    }, {
                        "label" : "Click ME!",
                        "class" : "btn-primary",
                        "callback": function() {
                            console.log("Primary button");
                        }
                    }, {
                        "label" : "Just a button..."
                    }, {
                        "Condensed format": function() {
                            console.log("condensed");
                        }
                    }]);
                });
                
                $("a.multiple-dialogs").click(function(e) {
                    e.preventDefault();

                    bootbox.alert("Prepare for multiboxes...", "Argh!");

                    setTimeout(function() {
                        bootbox.confirm("Are you having fun?", "No :(", "Yeah!", function(result) {
                            if (result) {
                                bootbox.alert("Glad to hear it!");
                            } else {
                                bootbox.alert("Aww boo. Click the button below to get rid of all these popups", function() {
                                    bootbox.hideAll();
                                });
                            }
                        });
                    }, 1000);
                });
                
                $("a.dialog-close").click(function(e) {
                    e.preventDefault();
                    var box = bootbox.alert("This dialog will close in two seconds");
                    setTimeout(function() {
                        box.modal('hide');
                    }, 2000);
                });
                
                $("a.generic-modal").click(function(e) {
                    e.preventDefault();
                    bootbox.modal('<img src="http://dummyimage.com/600x400/000/fff" alt=""/>', 'Modal popup!');
                });
                
                $("a.dynamic").click(function(e) {
                    e.preventDefault();
                    var str = $("<p>This content is actually a jQuery object, which will change in 3 seconds...</p>");
                    bootbox.alert(str);
                    setTimeout(function() {
                        str.html("See?");
                    }, 3000);
                });
                
                $("a.prompt-default").click(function(e) {
                    e.preventDefault();
                    bootbox.prompt("What is your favourite JS library?", "Cancel", "OK", function(result) {
                        console.log("Result: "+result);
                    }, "Bootbox.js");
                });
                
                $("a.onescape").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("Dismiss this dialog with the escape key...", {
                        "label" : "Press Escape!",
                        "class" : "btn-danger",
                        "callback": function() {
                            console.log("Oi! Press escape!");
                        }
                    }, {
                        "onEscape": function() {
                            bootbox.alert("This alert was triggered by the onEscape callback of the previous dialog", "Dismiss");
                        }
                    });
                });

                $("a.nofade").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("This dialog does not fade in or out, and thus does not depend on <strong>bootstrap-transitions.js</strong>.",
                    {
                        "OK": function() {}
                    }, {
                        "animate": false
                    });
                });

                $("a.nobackdrop").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("This dialog does not have a backdrop element",
                    {
                        "OK": function() {}
                    }, {
                        "backdrop": false
                    });
                });

                $("a.icons-explicit").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("Custom dialog with icons being passed explicitly into <b>bootbox.dialog</b>.", [{
                        "label" : "Success!",
                        "class" : "btn-success",
                        "icon"  : "icon-ok-sign icon-white"
                    }, {
                        "label" : "Danger!",
                        "class" : "btn-danger",
                        "icon"  : "icon-warning-sign icon-white"
                    }, {
                        "label" : "<span>Click ME!</span>",
                        "class" : "btn-primary",
                        "icon"  : "icon-ok icon-white"
                    }, {
                        "label" : "Just a button...",
                        "icon"  : "icon-picture"
                    }]);
                });

                $("a.icons-override").click(function(e) {
                    e.preventDefault();
                    bootbox.setIcons({
                        "OK"      : "icon-ok icon-white",
                        "CANCEL"  : "icon-ban-circle",
                        "CONFIRM" : "icon-ok-sign icon-white"
                    });

                    bootbox.confirm("This dialog invokes <b>bootbox.setIcons()</b> to set icons for the standard three labels of OK, CANCEL and CONFIRM, before calling a normal <b>bootbox.confirm</b>", function(result) {
                        bootbox.alert("This dialog is just a standard <b>bootbox.alert()</b>. <b>bootbox.setIcons()</b> only needs to be set once to affect all subsequent calls", function() {
                            bootbox.setIcons(null);
                        });
                    });
                });

                $("a.no-close-button").click(function(e) {
                    e.preventDefault();
                    bootbox.dialog("If a button's handler now explicitly returns <b>false</b>, the dialog will not be closed. Note that if anything <b>!== false</b> - e.g. nothing, true, null etc - is returned, the dialog will close.", [{
                        "I'll close on click": function() {
                            console.log("close on click");
                            return true;
                        },
                    }, {
                        "I won't!": function() {
                            console.log("returning false...");
                            return false;
                        }
                    }]);
                });

Jquery UI autocomplete

                var tags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];
                $( "#autocomplete" ).autocomplete({
                    source: tags,
                    appendTo: ".autocomplete-append"
                }); 

                function setSizes() {
                    var containerHeight = $(".autocomplete-append input[type=text]").width();
                    $(".autocomplete-append").width(containerWidth - 180);
                };

Bootstrap typeahead

                $('#typeahead').typeahead({
                    source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"],
                    appendToBody: false
                });

Jquery UI sliders

                $( "#default-slider" ).slider();

                $( "#increments-slider" ).slider({
                    value:100,
                    min: 0,
                    max: 500,
                    step: 50,
                    slide: function( event, ui ) {
                    $( "#donation-amount" ).val( "$" + ui.value );
                }
                });
                $( "#donation-amount" ).val( "$" + $( "#increments-slider" ).slider( "value" ) );

                $( "#range-slider, #range-slider1" ).slider({
                    range: true,
                    min: 0,
                    max: 500,
                    values: [ 75, 300 ],
                    slide: function( event, ui ) {
                        $( "#price-amount, #price-amount1" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
                    }
                });
                $( "#price-amount, #price-amount1" ).val( "$" + $( "#range-slider, #range-slider1" ).slider( "values", 0 ) +
                  " - $" + $( "#range-slider, #range-slider1" ).slider( "values", 1 ) );

                $( "#slider-range-min, #slider-range-min1" ).slider({
                    range: "min",
                    value: 37,
                    min: 1,
                    max: 700,
                    slide: function( event, ui ) {
                        $( "#min-amount, #min-amount1" ).val( "$" + ui.value );
                    }
                });
                $( "#min-amount, #min-amount1" ).val( "$" + $( "#slider-range-min, #slider-range-min1" ).slider( "value" ) );

                $( "#slider-range-max, #slider-range-max1" ).slider({
                    range: "max",
                    min: 1,
                    max: 10,
                    value: 2,
                    slide: function( event, ui ) {
                        $( "#max-amount, #max-amount1" ).val( ui.value );
                    }
                });
                $( "#max-amount, #max-amount1" ).val( $( "#slider-range-max, #slider-range-max1" ).slider( "value" ) );

Loading button

                $('#loading').click(function () {
                    var btn = $(this)
                    btn.button('loading')
                    setTimeout(function () {
                      btn.button('reset')
                    }, 3000);
                });

Bootstrap popovers

                $('.popover-test').popover({
                    placement: 'left'
                })
                .click(function(e) {
                    e.preventDefault()
                });

                $("a[rel=popover]")
                    .popover()
                .click(function(e) {
                    e.preventDefault()
                });

Form validation engine

                $("#validate").validationEngine({promptPosition : "topRight:-122,-5"});

Listbox plugin

                $.configureBoxes();

Spinner options

                $( "#spinner-default" ).spinner();
                
                $( "#spinner-decimal" ).spinner({
                    step: 0.01,
                    numberFormat: "n"
                });
                
                $( "#culture" ).change(function() {
                    var current = $( "#spinner-decimal" ).spinner( "value" );
                    Globalize.culture( $(this).val() );
                    $( "#spinner-decimal" ).spinner( "value", current );
                });
                
                $( "#currency" ).change(function() {
                    $( "#spinner-currency" ).spinner( "option", "culture", $( this ).val() );
                });
                
                $( "#spinner-currency" ).spinner({
                    min: 5,
                    max: 2500,
                    step: 25,
                    start: 1000,
                    numberFormat: "C"
                });
                    
                $( "#spinner-overflow" ).spinner({
                    spin: function( event, ui ) {
                        if ( ui.value > 10 ) {
                            $( this ).spinner( "value", -10 );
                            return false;
                        } else if ( ui.value < -10 ) {
                            $( this ).spinner( "value", 10 );
                            return false;
                        }
                    }
                });
                
                $.widget( "ui.timespinner", $.ui.spinner, {
                    options: {
                        // seconds
                        step: 60 * 1000,
                        // hours
                        page: 60
                    },

                    _parse: function( value ) {
                        if ( typeof value === "string" ) {
                            // already a timestamp
                            if ( Number( value ) == value ) {
                                return Number( value );
                            }
                            return +Globalize.parseDate( value );
                        }
                        return value;
                    },

                    _format: function( value ) {
                        return Globalize.format( new Date(value), "t" );
                    }
                });

                $( "#spinner-time" ).timespinner();
                $( "#culture-time" ).change(function() {
                    var current = $( "#spinner-time" ).timespinner( "value" );
                    Globalize.culture( $(this).val() );
                    $( "#spinner-time" ).timespinner( "value", current );
                });

Select2 plugin

                $(".select").select2();
                            
                $("#loading-data").select2({
                    placeholder: "Enter at least 1 character",
                    allowClear: true,
                    minimumInputLength: 1,
                    query: function (query) {
                        var data = {results: []}, i, j, s;
                        for (i = 1; i < 5; i++) {
                            s = "";
                            for (j = 0; j < i; j++) {s = s + query.term;}
                            data.results.push({id: query.term + i, text: s});
                        }
                        query.callback(data);
                    }
                });     

                $("#max-select").select2({ maximumSelectionSize: 3 });      

                $("#clear-results").select2({
                    placeholder: "Select a State",
                    allowClear: true
                });

                $("#min-select2").select2({
                    minimumInputLength: 2
                });
                
                $("#disableselect, #disableselect2").select2(
                    "disable"
                );

                $("#minimum-input-single").select2({
                    minimumInputLength: 2
                });

Tags input plugin

                $('.tags').tagsInput({width:'100%'});
                $('.tags-autocomplete').tagsInput({
                    width:'100%',
                    autocomplete_url:'tags_autocomplete.html'
                });

Input limiter

                $('.limited').inputlimiter({
                    limit: 100,
                    boxId: 'limit-text',
                    boxAttach: false
                });

Autosize - elastic textarea

                $('.auto').autosize();

Bootstrap tooltips

                $('.tip').tooltip();
                $('.focustip').tooltip({'trigger':'focus'});

Datatables

                oTable = $('#data-table').dataTable({
                    "bJQueryUI": false,
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
                    "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>',
                    "oLanguage": {
                        "sSearch": "<span>Filter records:</span> _INPUT_",
                        "sLengthMenu": "<span>Show entries:</span> _MENU_",
                        "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                    }
                });


                oTable = $(".media-table").dataTable({
                    "bJQueryUI": false,
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
                    "sDom": '<"datatable-header"fl>t<"datatable-footer"ip>',
                    "oLanguage": {
                        "sSearch": "<span>Filter records:</span> _INPUT_",
                        "sLengthMenu": "<span>Show entries:</span> _MENU_",
                        "oPaginate": { "sFirst": "First", "sLast": "Last", "sNext": ">", "sPrevious": "<" }
                    },
                    "aoColumnDefs": [
                      { "bSortable": false, "aTargets": [ 0, 4 ] }
                    ]
                });

Fancybox lightbox plugin

                $(".lightbox").fancybox({
                    'padding': 2
                });

Sparklines charts

                $('#total-visits').sparkline(
                    'html', {type: 'bar', barColor: '#ef705b', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                );
                $('#balance').sparkline(
                    'html', {type: 'bar', barColor: '#91c950', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                );

                $('#visits').sparkline(
                    'html', {type: 'bar', barColor: '#ef705b', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                );
                $('#clicks').sparkline(
                    'html', {type: 'bar', barColor: '#91c950', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                );
                $('#rate').sparkline(
                    'html', {type: 'bar', barColor: '#5cb1ec', height: '35px', barWidth: "5px", barSpacing: "2px", zeroAxis: "false"}
                );
                $(window).resize(function () {
                    $.sparkline_display_visible();
                }).resize();

Easytabs plugin

                $('.sidebar-tabs').easytabs({
                    animationSpeed: 150,
                    collapsible: false,
                    tabActiveClass: "active"
                });

                $('.actions').easytabs({
                    animationSpeed: 300,
                    collapsible: false,
                    tabActiveClass: "current"
                });

Make Google maps visible inaide tabs

                function initialize()
                {
                    var mapProp= {
                        center: new google.maps.LatLng(-37.814666,144.982452),
                        zoom: 12,
                        mapTypeId:google.maps.MapTypeId.ROADMAP
                    };
                    var map=new google.maps.Map(document.getElementById("google-map"),mapProp);

                    $('.actions').bind('easytabs:after', function() {
                        google.maps.event.trigger(map, 'resize');
                        map.setCenter(new google.maps.LatLng(-37.814666,144.982452));
                    });

                };
                google.maps.event.addDomListener(window, 'load', initialize);

Collapsible plugin

                $('.expand').collapsible({
                    defaultOpen: 'current,third',
                    cookieName: 'navAct',
                    cssOpen: 'subOpened',
                    cssClose: 'subClosed',
                    speed: 200
                });

Uniform plugin

                $(".ui-datepicker-month, .styled, .dataTables_length select").uniform({ radioClass: 'choice' });

Blank pages and functions.js files

In blank html files and functions_blank.js file you will find clean and empty pages without any content and js file with necessary js code without plugins needed for layout. Usage is very simple - just take this file as a base and add necessary content to html and js files, only that content you'll be using.

PSD files

I included only 2 .psd files:

Please note - these psd files aren't complete, there is a general styles only, everything other i designed directly in browser. But if you need to update UI, i'd suggest to use Twitter Bootstrap PSD toolkit. Since Bootstrap doesn't have an original psd sources and provides all its design in html/css only, i customized main bootstrap theme in css without psd files.

Credits and sources

Plugins

Icons

Demo images

Thanks to FreebiesBug for demo images

Usuarios

Administrar Usuarios de acceso al Sistema

1ro. ACCEDER.- Accedemos al icono de engranajes multiples y veremos otro menú. Al final vemos el icono de "Usuarios de Acceso" y le damos clic. Se nos abrira la lista de todos los usuarios que hay registrados para el uso del Sistema de Información Integrado Obstetrico y Neonatal.

2do. REGISTRAR.- Cuando cargo la lista de usuarios del sistema, en la esquina superior derecho hay un engranaje simple, dandole clic aparecera un menú donde dice "Nuevo Usuario", dando clic en éste último nos abrira un formulario de registro. Rellene todos los datos que le solicita dicho formulario, y en "Tipo de Usuario" escoja el mas adecuado para el personal a cual le entregara el usuario y clave. Existe el tipo Admin, Jefe y Responsable, éste último es el que usarán todos.

3ro. ADMINISTRAR.- Ud podra editar o eliminar usuarios, tenga cuidado cuando lo haga, revise y analice bien su decisión, puede causar alteraciones dentro del sistema.