Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédente |
informatique:javascript:jquery [04/03/2016 03:06] – [Accordion] cyrille | informatique:javascript:jquery [13/05/2021 13:05] (Version actuelle) – [handsontable] cyrille |
---|
| |
| |
| ===== 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 : |
| <code javascript> |
| // 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 |
| }); |
| |
| </code> |
===== Plugins ===== | ===== Plugins ===== |
| |
| |
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. | 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 ==== | ==== DataTables ==== |
</code> | </code> |
| |
===== Tips ===== | ==== 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: |
| <code javascript> |
| jQuery(document).ready(function(){ |
| $('.accordion .head').click(function() { |
| $(this).next().toggle(); |
| return false; |
| }).next().hide(); |
| }); |
| </code> |
| Or animated: |
| <code javascript> |
| jQuery(document).ready(function(){ |
| $('.accordion .head').click(function() { |
| $(this).next().toggle('slow'); |
| return false; |
| }).next().hide(); |
| }); |
| </code> |
| |
* [[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]] | |
| |