====== JQuery ====== http://jquery.com * [[http://javascript.developpez.com/faq/jquery/|FAQ JQuery sur developpez.com]] ===== Tips ===== * [[http://viralpatel.net/blogs/2009/03/how-to-apply-html-user-interface-effects-using-jquery.html|How to apply HTML User Interface Effects using jQuery]] (Hide/show, Fade in/out, Slide up/down, animate) * [[http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/|Créez une fenêtre modale avec CSS et jQuery]] * Build Dashboard Using jQuery library * [[http://software.krimnet.com/sample-build-dashboard-using-jquery-library.htm]] ==== 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 ===== * [[http://www.1stwebdesigner.com/useful-jquery-libraries/|50 Most Useful jQuery Libraries]] * [[http://viralpatel.net/blogs/2009/08/20-top-jquery-tips-tricks-for-jquery-programmers.html|20 Top jQuery tips & tricks for jQuery programmers]] * [[http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/|15 Great jQuery Plugins For Better Table Manipulation]] [[http://jquery.malsup.com/|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/]] [[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 ==== [[https://github.com/posabsolute/jQuery-Validation-Engine|jQuery-Validation-Engine]], [[http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/|A jQuery inline form validation, because validation is a mess]]. ==== 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 ==== https://www.jstree.com old one : [[http://docs.jquery.com/Plugins/Treeview]] ==== Upload File ==== hayageek [[http://plugins.jquery.com/uploadfile/|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 [[https://blueimp.github.io/jQuery-File-Upload/|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 ==== https://handsontable.com/ 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 ==== [[http://www.datatables.net/]] 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/]] * [[http://viralpatel.net/blogs/2009/09/create-accordion-menu-jquery.html|Create Simplest Accordion Menu using jQuery]] * Démos d'accordéon : * [[http://www.adipalaz.com/experiments/jquery/accordion.html]], [[http://www.adipalaz.com/experiments/jquery/accordion2.html]] * [[http://jquery.bassistance.de/accordion/demo/]] * 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(); });