Latest web development tutorials

jQuery UI par exemple - select (sélectionnable)

Utilisez la souris pour sélectionner un seul élément ou groupe d'éléments.

Pour plus de détails sur l'interaction sélectionnable, consultez la documentation de l' API peut sélectionner des widgets (le Sélectionnable le Widget) .

La fonction par défaut

Activation de fonctions sélectionnables ou sur un groupe d'éléments sur un élément DOM. Sélectionnez l'entrée en faisant glisser la souris. Maintenez la touche Ctrl enfoncée pour sélectionner plusieurs entrées non contiguës. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> sélection jQuery UI (sélectionnable) - La fonction par défaut </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-sélection {background: # FECA40;}
  #selectable .ui-sélectionné {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; largeur: 60%;}
  li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; hauteur: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Body>
 
<Ol id = "sélectionnable">
  <Li class = "ui-widget-content"> Article 1 </ li>
  <Li class = "ui-widget-content"> Article 2 </ li>
  <Li class = "ui-widget-content"> Article 3 </ li>
  <Li class = "ui-widget-content"> Article 4 </ li>
  <Li class = "ui-widget-content"> Article 5 </ li>
  <Li class = "ui-widget-content"> Article 6 </ li>
  <Li class = "ui-widget-content"> Article 7 </ li>
</ Ol>
 
 
</ Body>
</ Html>

la

Il est affiché sous la forme d'une grille

Laissez l'entrée sélectionnable est représenté par une grille, de sorte qu'ils utilisent CSS avec les mêmes dimensions et l'affichage flottant. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> sélection jQuery UI (sélectionnable) - afficher une grille </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-sélection {background: # FECA40;}
  #selectable .ui-sélectionné {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
  li #selectable {margin: 3px; padding: 1px; float: left; largeur: 100px; height: 80px; font-size: 4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Body>
 
<Ol id = "sélectionnable">
  <Class = Li "ui-state-default"> 1 </ li>
  <Class = Li "ui-state-default"> 2 </ li>
  <Class = Li "ui-state-default"> 3 </ li>
  <Class = Li "ui-state-default"> 4 </ li>
  <Class = Li "ui-state-default"> 5 </ li>
  <Class = Li "ui-state-default"> 6 </ li>
  <Class = Li "ui-state-default"> 7 </ li>
  <Class = Li "ui-state-default"> 8 </ li>
  <Class = Li "ui-state-default"> 9 </ li>
  <Class = Li "ui-state-default"> 10 </ li>
  <Class = Li "ui-state-default"> 11 </ li>
  <Class = Li "ui-state-default"> 12 </ li>
</ Ol>
 
 
</ Body>
</ Html>

la

sérialisation

Ecrire une fonction qui stop quand un événement déclencheur pour recueillir la valeur d'index des éléments sélectionnés. Ces valeurs sont présentées sous forme de rétroaction, ou sous la forme d'une chaîne de transfert de données. 

<! DOCTYPE html>
<Html lang = "fr">
<Head>
  <Meta charset = "utf-8">
  <Titre> sélection jQuery UI (sélectionnable) - sérialisé </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
 
  <Style>
  #feedback {font-size: 1.4em;}
  #selectable .ui-sélection {background: # FECA40;}
  #selectable .ui-sélectionné {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; largeur: 60%;}
  li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; hauteur: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ({
      stop: function () {
        var result = $ ( "# select-résultat») .empty ();
        $ ( ".ui-Selected", this) .each (function () {
          Index var = $ ( "li #selectable") .index (this);
          result.append ( "#" + (index + 1));
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P id = "feedback">
<Span> Vous avez choisi: </ span> <span id = "select-résultat"> Non </ span>.
</ P>
 
<Ol id = "sélectionnable">
  <Li class = "ui-widget-content"> Article 1 </ li>
  <Li class = "ui-widget-content"> Article 2 </ li>
  <Li class = "ui-widget-content"> Article 3 </ li>
  <Li class = "ui-widget-content"> Article 4 </ li>
  <Li class = "ui-widget-content"> Article 5 </ li>
  <Li class = "ui-widget-content"> Article 6 </ li>
</ Ol>
 
 
</ Body>
</ Html>

la