PLUGINS ( Stéphane Gimenez. Octobre 2012

Transcription

1 PLUGINS ( Stéphane Gimenez Octobre 202

2 plan Outils Vérification de formulaire Plugins TableSorter JQPlot

3 Outils Vérification de formulaire <script type="text/javascript" src="jquery/js/jquery.js"><script> <script type="text/javascript" src="jquery/js/jquery.validate.js"></script> <form> Saisir votre Nom: <input type='text' name='t'><br> <input type="submit"> </form> </html>

4 Outils 2 Vérification de formulaire <style type="text/css">.error {color:red 2. Définir le style pour les erreurs </style> <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.validate.js"></script> <form> Saisir votre Nom: <input type='text' name='t'><br> <input type="submit"> </form> </html>

5 Outils 2 Vérification de formulaire <style type="text/css">.error {color:red 2. Définir le style pour les erreurs. Ajouter un attribut id au formulaire </style> <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.validate.js"></script> <form id="formtest" > Saisir votre Nom: <input type='text' name='t'><br> <input type="submit"> </form> </html>

6 Outils 2 4 Vérification de formulaire <style type="text/css">.error {color:red </style> <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#formtest').validate(); ); </script> </head> <form id="formtest" > Saisir votre Nom: <input type='text' name='t'><br> <input type="submit"> </form> </html> 2. Définir le style pour les erreurs. Ajouter un attribut id au formulaire 4. Associer la vérification au formulaire

7 Outils 2 4 Vérification de formulaire <style type="text/css">.error {color:red </style> <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.validate.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#formtest').validate({ 5 rules: {t: { required:true, messages: {t: { required : "entrer un nom" ); ); </script> </head> 2. Définir le style pour les erreurs. Ajouter un attribut id au formulaire 4. Associer la vérification au formulaire 5. définir les règles et les messages <form id="formtest" > Saisir votre Nom: <input type='text' name='t'><br> <input type="submit"> </form>

8 Plugin TableSorter ( <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.tablesorter.js"></script> </head> <table id='tableau' class="tablesorter"> <thead> <tr><th>prénom</th> <th>nom</th> <th>age</th> </tr> </thead> <tbody> <tr><td>pierre</td><td>dupont</td><td>5</td></tr> <tr><td>paul</td><td>durant</td><td>0</td></tr> <tr><td>jacques</td><td>dupond</td><td>45</td></tr> </tbody> </table>

9 Plugin TableSorter 2 <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.tablesorter.js"></script> <link rel="stylesheet" type="text/css" href="jquery/themes/blue/style.css"> </head> <table id='tableau' class="tablesorter"> <thead> <tr><th>prénom</th> <th>nom</th> <th>age</th> </tr> </thead> <tbody> <tr><td>pierre</td><td>dupont</td><td>5</td></tr> <tr><td>paul</td><td>durant</td><td>0</td></tr> <tr><td>jacques</td><td>dupond</td><td>45</td></tr> </tbody> </table>

10 Plugin TableSorter <script type="text/javascript" src="jquery/js/jquery.js"></script>. Ajouter un attribut id au tableau ( <script type="text/javascript" src="jquery/js/jquery.tablesorter.js"></script> 2 <link rel="stylesheet" type="text/css" href="jquery/themes/blue/style.css"> </head> <table id='tableau' class="tablesorter"> <thead> <tr><th>prénom</th> <th>nom</th> <th>age</th> </tr> </thead> <tbody> <tr><td>pierre</td><td>dupont</td><td>5</td></tr> <tr><td>paul</td><td>durant</td><td>0</td></tr> <tr><td>jacques</td><td>dupond</td><td>45</td></tr> </tbody> </table>

11 Plugin TableSorter 2 <script type="text/javascript" src="jquery/js/jquery.js"></script> <script type="text/javascript" src="jquery/js/jquery.tablesorter.js"></script> <script>$(document).ready(function() { $("#tableau").tablesorter(); ); </script> <link rel="stylesheet" type="text/css" href="jquery/themes/blue/style.css"> </head> <table id='tableau' class="tablesorter"> 4 <thead> <tr><th>prénom</th> <th>nom</th> <th>age</th> </tr> </thead> <tbody> <tr><td>pierre</td><td>dupont</td><td>5</td></tr> <tr><td>paul</td><td>durant</td><td>0</td></tr> <tr><td>jacques</td><td>dupond</td><td>45</td></tr> </tbody> </table>. Ajouter un attribut id au tableau 4. Mettre des classes de style 5. Associer la fonction de tri au tableau 5

12 Plugin JQplot - Pie. Ajouter un attribut id au graphe 4. Associer la fonction du plot 2 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jqplot.myhighlighter.js"></script> <script type="text/javascript" src="js/jqplot.pierenderer.min.js"></script> <script type="text/javascript" src="js/jqplot.barrenderer.min.js"></script> <script type="text/javascript" src="js/jqplot.categoryaxisrenderer.min.js"></script> <link rel="stylesheet" href="css/jquery.jqplot.min.css" type="text/css" media="screen" /> <script> var data = [['G', 40],['G2', 20],['G', 0]]; var plot0 = jquery.jqplot ("pie", [data], { seriesdefaults: { renderer: jquery.jqplot.pierenderer ); </script> <div id="pie" style="text-align:center;height:200px;width:200px"></div> 4

13 Plugin JQplot - Pie. Ajouter un attribut id au graphe 4. Compléter la fonction du plot <script> var data = [['G', 40],['G2', 20],['G', 0]]; var plot0 = jquery.jqplot ("pie", [data], { seriesdefaults: { renderer: jquery.jqplot.pierenderer, 4 rendereroptions: { showdatalabels: true,fill: false,slicemargin: 2,padding : 4 ); </script> <div id="pie" style="text-align:center;height:200px;width:200px"></div>

14 Plugin JQplot - Pie. Ajouter un attribut id au graphe 4. Compléter la fonction du plot <script> var data = [['G', 40],['G2', 20],['G', 0]]; var plot0 = jquery.jqplot ("pie", [data], { seriesdefaults: { 4 renderer: jquery.jqplot.pierenderer, rendereroptions: { showdatalabels: true,fill: false,slicemargin: 2,padding : 4, grid : {borderwidth:0,shadow: false ); </script> <div id="pie" style="text-align:center;height:200px;width:200px"></div>

15 Plugin JQplot - Pie. Ajouter un attribut id au graphe 4. Compléter la fonction du plot 4 <script> var plot2 = $.jqplot("bar", [ [ [2,], [4,2], [6,], [,4] ], [ [5,], [,2], [,], [4,4] ], [ [4,], [7,2], [,], [2,4] ] ], { seriesdefaults: { renderer:$.jqplot.barrenderer, pointlabels: { show: true, location: 'e', edgetolerance: -5, shadowangle: 5, rendereroptions: { bardirection: 'horizontal', axes: { yaxis: { renderer: $.jqplot.categoryaxisrenderer ); </script> <div id="bar" style="text-align:center;height:200px;width:200px"></div>

16 Plugin JQplot - Pie. Ajouter un attribut id au graphe 4. Compléter la fonction du plot <script> var data = [['G', 40],['G2', 20],['G', 0]]; var plot0 = jquery.jqplot ("pie", [data], { seriesdefaults: { 4 renderer: jquery.jqplot.pierenderer, rendereroptions: { showdatalabels: true,fill: false,slicemargin: 2,padding : 4, grid : {borderwidth:0,shadow: false, legend: { show:true, location: 'e', seriescolors: [ "#A9BBF4", "#829DF6", "#CCCCCC",] ); </script> <div id="pie" style="text-align:center;height:200px;width:200px"></div>

17 Plugin JQplot - histogramme. Ajouter un attribut id au graphe 4. Compléter la fonction du plot <script> var data = [['G', 40],['G2', 20],['G', 0]]; var plot0 = jquery.jqplot ("pie", [data], { seriesdefaults: { 4 renderer: jquery.jqplot.pierenderer, rendereroptions: { showdatalabels: true,fill: false,slicemargin: 2,padding : 4, grid : {borderwidth:0,shadow: false, legend: { show:true, location: 'e', seriescolors: [ "#A9BBF4", "#829DF6", "#CCCCCC",] ); </script> <div id="pie" style="text-align:center;height:200px;width:200px"></div>