Latest web development tutorials

jQuery UI contoh - pilih (dipilih)

Gunakan mouse untuk memilih satu elemen atau kelompok elemen.

Untuk rincian lebih lanjut tentang interaksi dipilih, lihat dokumentasi API dapat memilih widget (yang Dipilih Widget) .

Fungsi standar

Mengaktifkan fungsi dipilih atau pada sekelompok elemen pada elemen DOM. Pilih entri dengan menyeret mouse. Tahan tombol Ctrl untuk memilih beberapa entri non-contiguous. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI pilihan (dipilih) - The fungsi default </ 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">
 
  <Gaya>
  #feedback {font-size: 1.4em;}
  #selectable Ui-memilih {background: # FECA40;}
  #selectable Ui-operator {background: # F39814; warna: putih;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Kepala>
<Body>
 
<Ol id = "dipilih">
  <Li class = "ui-widget-content"> Item 1 </ li>
  <Li class = "ui-widget-content"> Item 2 </ li>
  <Li class = "ui-widget-content"> Item 3 </ li>
  <Li class = "ui-widget-content"> Item 4 </ li>
  <Li class = "ui-widget-content"> Butir 5 </ li>
  <Li class = "ui-widget-content"> Item 6 </ li>
  <Li class = "ui-widget-content"> Butir 7 </ li>
</ Ol>
 
 
</ Body>
</ Html>

Hal ini ditampilkan sebagai kotak

Mari entri dipilih ditampilkan sebagai grid, sehingga mereka menggunakan CSS dengan dimensi yang sama dan tampilan mengambang. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI pilihan (dipilih) - menampilkan grid </ 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">
 
  <Gaya>
  #feedback {font-size: 1.4em;}
  #selectable Ui-memilih {background: # FECA40;}
  #selectable Ui-operator {background: # F39814; warna: putih;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 450px;}
  #selectable li {margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#selectable") .selectable ();
  });
  </ Script>
</ Kepala>
<Body>
 
<Ol id = "dipilih">
  <Class Li = "ui-negara-default"> 1 </ li>
  <Class Li = "ui-negara-default"> 2 </ li>
  <Class Li = "ui-negara-default"> 3 </ li>
  <Class Li = "ui-negara-default"> 4 </ li>
  <Class Li = "ui-negara-default"> 5 </ li>
  <Class Li = "ui-negara-default"> 6 </ li>
  <Class Li = "ui-negara-default"> 7 </ li>
  <Class Li = "ui-negara-default"> 8 </ li>
  <Class Li = "ui-negara-default"> 9 </ li>
  <Class Li = "ui-negara-default"> 10 </ li>
  <Class Li = "ui-negara-default"> 11 </ li>
  <Class Li = "ui-negara-default"> 12 </ li>
</ Ol>
 
 
</ Body>
</ Html>

serialisasi

Menulis fungsi yang stop ketika acara pemicu untuk mengumpulkan dipilih nilai item indeks. Nilai-nilai ini disajikan sebagai umpan balik, atau dalam bentuk string transfer data. 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI pilihan (dipilih) - serial </ 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">
 
  <Gaya>
  #feedback {font-size: 1.4em;}
  #selectable Ui-memilih {background: # FECA40;}
  #selectable Ui-operator {background: # F39814; warna: putih;}
  #selectable {list-style-type: none; margin: 0; padding: 0; width: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px;}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#selectable") .selectable ({
      berhenti: function () {
        Hasil var = $ ( "# pilih-hasil") .empty ();
        $ ( "Ui-Dipilih", ini) .each (function () {
          Indeks var = $ ( "#selectable li") .index (ini);
          result.append ( "#" + (indeks + 1));
        });
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<P id = "umpan balik">
<Span> Anda telah memilih </ span> <span id = "pilih-hasil"> Tidak ada </ span>.
</ P>
 
<Ol id = "dipilih">
  <Li class = "ui-widget-content"> Item 1 </ li>
  <Li class = "ui-widget-content"> Item 2 </ li>
  <Li class = "ui-widget-content"> Item 3 </ li>
  <Li class = "ui-widget-content"> Item 4 </ li>
  <Li class = "ui-widget-content"> Butir 5 </ li>
  <Li class = "ui-widget-content"> Item 6 </ li>
</ Ol>
 
 
</ Body>
</ Html>