( François Agneray. Octobre 2012

Size: px

Start display at page:

Download "(http://jqueryui.com) François Agneray. Octobre 2012"

Amberly Cain
8 years ago
Views:

1 ( François Agneray Octobre 2012

2 plan jquery UI est une surcouche de jquery qui propose des outils pour créer des interfaces graphiques interactives. Ses fonctionnalités se divisent en différentes catégories : Interactions Donner des propriétés à des éléments HTML => drag, drop, resize,... Widgets Objets "clé en main " qui proposent des fonctionnalités de haut niveau => Accordion, Tabs, Dialog, DatePicker...

Ses fonctionnalités se divisent en différentes catégories : Interactions Donner des propriétés

3 Interactions Interaction: draggable 1. Inclure les bibliothèques 1 <html> <head> <title>test jquery</title> 2. Inclure le style CSS ( <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> <form action="traite_form.php"> <input type="text" name="date"> </form>

Inclure le style CSS ( <script type="text/javascript" src="jquery/js/jquery.

4 Interactions Interaction: draggable 1. Inclure les bibliothèques 2. Inclure le style CSS 1 2 <html> <head> <title>test jquery</title>. Inclure le style CSS ( <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet">

5 Interactions Interaction draggable 1 <html> <head> <title>test jquery</title> <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> 1. Inclure les bibliothèques 2. Inclure le style CSS. Définir un attribut id pour le champ cible. Inclure le style CS 2 <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet"> <div id= "objdrag" > <p>déplace moi</p></div>

Inclure les bibliothèques 2. Inclure le style CSS. Définir un attribut id pour le champ cible.

6 Interactions Interaction: draggable 1 <html> <head> <title>test jquery</title> <script type="text/javascript" src="jquery/js/jquery.js"> <script type="text/javascript" src="jquery/js/jquery-ui.js"> 1. Inclure les bibliothèques 2. Inclure le style CSS. Définir un attribut id pour le champ cible. Associer la fonction draggable 2 <link type="text/css" href="jquery/css/ui-lightness/jquery-ui custom.css" rel="stylesheet"> $("#objdrag").draggable(); <div id= "objdrag" > <p>déplace moi</p></div>

Inclure le style CSS. Définir un attribut id pour le champ cible.

7 Interactions Interaction: resizable... $("#objet").draggable(); $("#objet").resizable(); <div id= "objet" > <p>resize & Drag</p></div>

8 Interactions Interaction: selectable 2 <style> #selection.ui-selected {background: grey; color: white;} #selection {list-style-type: none;} </style> $("#selection").selectable(); <ul id="selection"> <li class="ui-widget-content"> item 1</li> <li class="ui-widget-content"> item 2</li> <li class="ui-widget-content"> item </li> </ul>

9 Widget tooltip... $(document). tooltip (); Test de <a href="#" title="blabla info bulle">l'info bulle</a>

10 Widget Accordion $("#accordeon").accordion(); }) <div id="accordeon"> <h>section 1</h><div><p>bla bla bla bla section 1</p></div> <h>section 2</h><div><p>bla bla bla bla section 2</p> </div> <h>section </h><div><p>bla bla bla bla section </p></div> <h>section </h><div><p>bla bla bla bla section </p></div> </div>

section 1</p></div> <h>section 2</h><div><p>bla bla bla bla section 2</p>

11 Widget Tabs $("#onglets").tabs(); }) <div id="onglets"> <ul> <li><a href="#onglet1">onglet 1</a></li> <li><a href="#onglet2">onglet 2</a></li> <li><a href="#onglet">onglet </a></li> </ul> <div id="onglet1">blablabla section 1</div> <div id="onglet2">blablabla section 2</div> <div id="onglet">blablabla section </div> </div>

12 Widget Dialog $("#dialogue").dialog(); }) <div id="dialogue" title="basic dialog"> <p>boîte de dialogue</p> </div>

13 Widget DatePicker... $("#date1").datepicker(); Saisir une date: <input type="text" name="date" id="date1" >

14 Widget DatePicker... $("#date1").datepicker({ dateformat: "yy-mm-dd", altfield: "#Altdate", altformat: "DD, d MM, yy" Saisir une date: <input type="text" name="date" id="date1" > => <input type="text" id="altdate" size=0>

15 Widget DatePicker... $("#date1").datepicker({ dateformat: "yy-mm-dd", altfield: "#Altdate", altformat: "DD, d MM, yy", showon: "button", buttonimage: "IMG/calendar.jpeg", buttonimageonly: true Saisir une date: <input type="text" name="date" id="date1" > => <input type="text" id="altdate" size=0>

16 Widget slider... $("#monslider"). slider ({ min: 0, max: 10, value : 0, slide: function(event, ui){$("#variation").html(ui.value);} <b>variation</b> [ <span id="variation"> 0 </span> ] <div id="monslider"></div>

17 Widget Button... $("#radio"). buttonset (); <form> <div id="radio"> <input type="radio" id="radio1" name="btn-radio" checked><label for="radio1"> Radio 1</label> <input type="radio" id="radio2" name="btn-radio"><label for="radio2"> Radio 2</label> <input type="radio" id="radio" name="btn-radio"><label for="radio"> Radio </label> </div> </form>

checked><label for="radio1"> Radio 1</label> <input type="radio" id="radio2"

18 Widget Menu... $("#monmenu"). menu ({ select: function( event, ui ) { }... var link = ui.item.children( "a:first" ); if ( link.attr( "target" ) event.metakey event.shiftkey event.ctrlkey ) {return;} location.href = link.attr( "href" ); <ul id="monmenu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li> <a href="#">item </a> <ul> <li><a href="#">item -1</a></li> <li><a href="#">item -2</a></li> <li><a href="#">item -</a></li> </ul> </li> </ul>

Web - Travaux Pratiques 1

Web - Travaux Pratiques 1 Pour rappel, le squelette d une page HTML5 est la suivante : Syntaxe ... ... Une fois qu une page est terminée,