Table des matières
JQuery
Tips
- How to apply HTML User Interface Effects using jQuery (Hide/show, Fade in/out, Slide up/down, animate)
- Build Dashboard Using jQuery library
Promise & Deferred
Synchroniser plusieurs appel Ajax :
// un tableau pour ranger tous les appels ajax var calls = new Array(); $(someArray).each(function(idx, item) { calls.push( $.get( {url:'/page/'+$(item).attr('data-name'), context:{item:item}}) .done(function( data ) { $(this.item).html( data ); })); }); // utilise apply() pour transformer le tableau "calls" en liste d'arguments pour la fonction "when()" $.when.apply( null, calls ) .then( function(){ // All jobs done });
Plugins
jQuery Plugins (by malsup): BlockUI Plugin, Corner Plugin, Cycle Plugin, Feed Plugin, Form Plugin, HoverPulse Plugin, Media Plugin, Taconite Plugin, Twitter Search Plugin.
SimpleModal
http://www.ericmmartin.com/projects/simplemodal/
SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.
jQuery-Validation-Engine
Jeditable
http://www.appelsiini.net/projects/jeditable
Edit In Place Plugin For jQuery.
$(document).ready(function() { $('.edit').editable('http://www.example.com/save.php'); });
jQuery Treeview
Upload File
hayageek jQuery Upload File - jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without Form plugin.
Blueimp jQuery-File-Upload - File Upload widget with multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
handsontable
Rock-solid data grid for web applications. A JavaScript component that combines data grid features with spreadsheet-like UX.
Dual licences: non-commercial / commercial
DataTables
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:
- Sorting, type detection, API functions, pagination and filtering
- Display data from almost any data source. DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc). Ajax auto loading of data
- Rock solid - backed by a suite of 1400+ unit tests. It's free!
- Wide variety of plug-ins: TableTools, FixedColumns, KeyTable and more via extensive plug-in support
- State saving. Dynamic creation of tables. Custom DOM positioning. Non-destructive DOM interaction
- Fully themeable by CSS
$(document).ready(function() { $('#theTable').dataTable(); });
Accordion
http://jqueryui.com/demos/accordion/
- Démos d'accordéon :
- Nested Accordion plugin http://www.adipalaz.com/experiments/jquery/nested_accordion.html
If you want multiple sections open at once, don't use an accordion !
An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle(); return false; }).next().hide(); });
Or animated:
jQuery(document).ready(function(){ $('.accordion .head').click(function() { $(this).next().toggle('slow'); return false; }).next().hide(); });