Latest web development tutorials

jQuery UI esempio - select (selezionabile)

Usa il mouse per selezionare un singolo elemento o gruppo di elementi.

Per maggiori dettagli su l'interazione selezionabili, consultare la documentazione delle API può selezionare i widget (la selezionabile il Widget) .

La funzione di default

Attivazione funzioni selezionabili o su un gruppo di elementi su un elemento DOM. Selezionare la voce trascinando il mouse. Tenere premuto il tasto Ctrl per selezionare più voci non contigue. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> selezione jQuery UI (selezionabile) - La funzione di default </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // 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-selezionando {background: # FECA40;}
  #selectable .ui-selezionato {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
  Li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Body>
 
<Ol id = "selezionabile">
  <Li class = "ui-widget di-content"> Articolo 1 </ li>
  <Li class = "ui-widget di-content"> Articolo 2 </ li>
  <Li class = "ui-widget di-content"> Articolo 3 </ li>
  <Li class = "ui-widget di-content"> Articolo 4 </ li>
  <Li class = "ui-widget di-content"> Articolo 5 </ li>
  <Li class = "ui-widget di-content"> Articolo 6 </ li>
  <Li class = "ui-widget di-content"> Articolo 7 </ li>
</ Ol>
 
 
</ Corpo>
</ Html>

Esso viene visualizzato come una griglia

Sia voce selezionabile è mostrata come una griglia, in modo che usano CSS con le stesse dimensioni e il display flottante. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> selezione jQuery UI (selezionabile) - visualizzare una griglia </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // 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-selezionando {background: # FECA40;}
  #selectable .ui-selezionato {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
  Li #selectable {margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Head>
<Body>
 
<Ol id = "selezionabile">
  <Li class = "ui-stato-default"> 1 </ li>
  <Li class = "ui-stato-default"> 2 </ li>
  <Li class = "ui-stato-default"> 3 </ li>
  <Li class = "ui-stato-default"> 4 </ li>
  <Li class = "ui-stato-default"> 5 </ li>
  <Li class = "ui-stato-default"> 6 </ li>
  <Li class = "ui-stato-default"> 7 </ li>
  <Li class = "ui-stato-default"> 8 </ li>
  <Li class = "ui-stato-default"> 9 </ li>
  <Li class = "ui-stato-default"> 10 </ li>
  <Li class = "ui-stato-default"> 11 </ li>
  <Li class = "ui-stato-default"> 12 </ li>
</ Ol>
 
 
</ Corpo>
</ Html>

serializzazione

Scrivere una funzione che stop quando un evento di trigger per raccogliere il valore dell'indice elementi selezionati. Questi valori sono presentati come feedback, o sotto forma di una stringa di trasferimento dati. 

<! Html Doctype>
<Html lang = "it">
<Head>
  <META charset = "utf-8">
  <Title> selezione jQuery UI (selezionabile) - serializzato </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Src = "script // code.jquery.com/jquery-1.9.1.js"> </ script>
  <Src = "script // 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-selezionando {background: # FECA40;}
  #selectable .ui-selezionato {background: # F39814; color: white;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
  Li #selectable {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
  </ Style>
  <Script>
  $ (Function () {
    $ ( "#selectable") .selectable ({
      fermare: function () {
        var result = $ ( "# select-risultato") .empty ();
        $ ( ".ui-Selected", questo) .each (function () {
          Indice var = $ ( "#selectable Li") .index (questo);
          result.append ( "#" + (indice + 1));
        });
      }
    });
  });
  </ Script>
</ Head>
<Body>
 
<P id = "feedback">
<Span> Hai selezionato: </ span> <span id = "select-risultato"> No </ span>.
</ P>
 
<Ol id = "selezionabile">
  <Li class = "ui-widget di-content"> Articolo 1 </ li>
  <Li class = "ui-widget di-content"> Articolo 2 </ li>
  <Li class = "ui-widget di-content"> Articolo 3 </ li>
  <Li class = "ui-widget di-content"> Articolo 4 </ li>
  <Li class = "ui-widget di-content"> Articolo 5 </ li>
  <Li class = "ui-widget di-content"> Articolo 6 </ li>
</ Ol>
 
 
</ Corpo>
</ Html>