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!
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.
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.
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
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.
<?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
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 |
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:
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.
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.
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>
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>
List of Jquery plugins which were used in Pannonia theme, with details:
This plug-in allows you to "transfer" the <option> elements between the <select>s in two distinct ways:
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
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>
className A class name to apply to the HTML element that contains the timepicker dropdown. default: null
minTime The time that should appear first in the dropdown list. default: 12:00am
maxTime The time that should appear last in the dropdown list. Can be used to limit the range of time options. default: 24 hours after minTime
showDuration Shows the relative time for each item in the dropdown. minTime or durationTime must be set. default: false
durationTime The time against which showDuration will compute relative times. default: minTime
step The amount of time, in minutes, between each item in the dropdown. default: 30
timeFormat How times should be displayed in the list and input element. Uses PHP's date() formatting syntax. default: 'g:ia'
scrollDefaultNow If no time value is selected, set the dropdown scroll position to show the current time. default: false
selectOnBlur Update the input with the currently highlighted time value when the timepicker loses focus. default: false
appendTo Override where the dropdown is appended. Takes either a string to use as a selector, a function that gets passed the clicked input element as argument or a jquery object to use directly default: "body"
lang Language constants used in the timepicker. Can override the defaults by passing an object with one or more of the following properties: decimal, mins, hr, hrs. default: { decimal: '.', mins: 'mins', hr: 'hr', hrs: 'hrs' }
Note: Original documentation for this plugin you can find on official plugin's website: http://jonthornton.github.com/jquery-timepicker/
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.
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/
Add color picker to field or to any other element.
<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>
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 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.
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). |
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:
|
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/
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
|
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 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.
Note: Original documentation for this plugin you can find on official plugin's website: http://elrte.org/elfinder/
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).
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.
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).
$.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/
A plugin to enable automatic height for textarea elements.
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: $(document).ready(function(){ $('textarea').autosize(); });
Note: Original documentation for this plugin you can find on official plugin's website: http://www.jacklmoore.com/autosize
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.
Add data attributes to register an element with inputmask functionality as shown in the example above.
Via JavascriptCall 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 is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page.
$(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 }); });
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
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 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" />
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();
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 });
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
Each plupload instance has a set of config options. Here is a short description about each available option.
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.
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.
Page URL to where the files will be uploaded to.
Maximum file size that the user can pick. This string can be in the following formats 100b, 10kb, 10mb.
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.
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.
Enables plupload to resize the images to clientside to the specified width, height and quality. Set this to an object with those parameters.
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.
URL to where the SWF file is for the Flash runtime.
URL to where the XAP file is for the Silverlight runtime.
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.
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.
Element ID to add object elements to, this defaults to the document body element.
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.
Object name/value collection with arguments to get posted together with the multipart file.
Comma separated list of features that each runtime must have for it to initialize.
Name/value object with custom headers to add to HTTP requests.
Here is a list of options that is specific to the jQuery queue widget.
Function callback that enables you to bind events before the uploader is initialized.
Boolean state if the drag/drop support for all runtimes should be enabled or disabled. Default is true.
Boolean state if it should be possible to rename files before uploading them. Default is false.
Boolean state if you should be able to upload multiple times or not.
Boolean state if Flash should be forced to use URLStream instead of FileReference.upload.
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
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.
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 typeCKEditor 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 functionWith 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 interfaceSeveral 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 detectionIf 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 outputCKEditor 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 stylingApply 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-quotingProperly 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).
ColorsPlain 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 WordMost 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 linkingOther 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 linkingCreating 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 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.
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 }) });
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 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 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/
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.
{ 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); } }
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/
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.
Controls how many characters the Input Limiter will allow the user to type into the field it is attached to. Once the limit is reached the user's input will be truncated.
Determines whether the box containing the Input Limiter remText and limitText will attach itself to the bottom the field that is in focus.
Determines the id that will be assigned to the box that will display the remText and limitText.
Determines the class that will be attached to the box (boxId) that will display the remText and limitText.
This string displayed the remaining characters. It will be updated as the user types into the input. Using the default remTextFilter; %n will be replaced with the number of characters remaining, %s a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing. If zeroPlural is set to false this will also return nothing when %n is equal to 0.
function (opts, charsRemaining) { var remText = opts.remText; remText = remText.replace(/\%n/g, charsRemaining); remText = remText.replace(/\%s/g, ( charsRemaining == 1?'':'s' )); return remText; };
This function gets two arguments passed to it: the options, and the remaining characters. By Default this function replaces '%n' with the characters remaining and '%s' with the letter 's' when charsRemaining is anything but '1'.
Controls whether the remText is displayed after the input loses focus. The limitText will still be displayed. This option only applies if attachBox is false, otherwise the boxId will be hidden when the field loses focus.
This string is displayed when the remaining characters is equals to zero. If this string is null remText will be displayed.
Determines whether the limitText will be displayed after the remText.
Text that informs the user about the limit. Using the default limitTextFilter; %n will be replaced with the number of characters thje field is limited to, %s adds a plural 's'. The %s will be replaced by the letter 's' except when %n is equals to 1, then %s will return nothing.
Note: Original documentation for this plugin you can find on official plugin's website: http://rustyjeans.com/jquery-plugins/input-limiter
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!
$(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/
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.
// 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 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results
<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>
Note: Original documentation for this plugin you can find on official plugin's website: http://ivaynberg.github.com/select2/
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.
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.
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.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:
<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>
$("#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/
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:
Explanations for plugin loaders, which are placed into functions.js file and other jquery stuff.
$('.fullview').click(function(){ $("body").toggleClass("clean"); $('#sidebar').toggleClass("hide-sidebar mobile-sidebar"); $('#content').toggleClass("full-content"); });
$('.showmenu').click(function () { $('.actions-wrapper').slideToggle(100); });
$("#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 } );
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');
$("#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"} ] });
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);
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/' } ] });
window.prettyPrint && prettyPrint();
$('.view').hover(function(){ $(this).children(".view-back").fadeIn(200); },function(){ $(this).children(".view-back").fadeOut(200); });
$('#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' });
$('#cp1').colorpicker({ format: 'hex' }); $('#cp2').colorpicker(); $('#cp3').colorpicker(); var bodyStyle = $('html')[0].style; $('#cp4').colorpicker().on('changeColor', function(ev){ bodyStyle.background = ev.color.toHex(); });
$( ".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 });
$("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; } }]); });
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); };
$('#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 });
$( "#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').click(function () { var btn = $(this) btn.button('loading') setTimeout(function () { btn.button('reset') }, 3000); });
$('.popover-test').popover({ placement: 'left' }) .click(function(e) { e.preventDefault() }); $("a[rel=popover]") .popover() .click(function(e) { e.preventDefault() });
$("#validate").validationEngine({promptPosition : "topRight:-122,-5"});
$.configureBoxes();
$( "#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 ); });
$(".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').tagsInput({width:'100%'}); $('.tags-autocomplete').tagsInput({ width:'100%', autocomplete_url:'tags_autocomplete.html' });
$('.limited').inputlimiter({ limit: 100, boxId: 'limit-text', boxAttach: false });
$('.auto').autosize();
$('.tip').tooltip(); $('.focustip').tooltip({'trigger':'focus'});
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 ] } ] });
$(".lightbox").fancybox({ 'padding': 2 });
$('#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();
$('.sidebar-tabs').easytabs({ animationSpeed: 150, collapsible: false, tabActiveClass: "active" }); $('.actions').easytabs({ animationSpeed: 300, collapsible: false, tabActiveClass: "current" });
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);
$('.expand').collapsible({ defaultOpen: 'current,third', cookieName: 'navAct', cssOpen: 'subOpened', cssClose: 'subClosed', speed: 200 });
$(".ui-datepicker-month, .styled, .dataTables_length select").uniform({ radioClass: 'choice' });
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.
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.
Thanks to FreebiesBug for demo images
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.