ตัวอย่างเช่น jQuery UI - เลือก (เลือกได้)

ก่อนหน้านี้: เช่น jQuery UI - ซูม (ปรับขนาดได้)

ถัดไป: jQuery UI เช่น - การเรียงลำดับ (จัดเรียง)

ใช้เมาส์ในการเลือกองค์ประกอบเดียวหรือกลุ่มขององค์ประกอบ

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการมีปฏิสัมพันธ์ที่เลือก, ดูเอกสาร API สามารถเลือกวิดเจ็ต (คนที่เลือก Widget ที่)

ฟังก์ชั่นเริ่มต้น

การเปิดใช้งานฟังก์ชั่นที่เลือกหรือในกลุ่มขององค์ประกอบบนองค์ประกอบ DOM เลือกรายการโดยการลากเมาส์ กดปุ่ม Ctrl ค้างไว้เพื่อเลือกรายการที่ไม่ต่อเนื่องกันหลาย

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> เลือก jQuery UI (เลือกได้) - ฟังก์ชั่นเริ่มต้น </ title>
  <link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
 
  <style>
  #feedback {font-size: 1.4em;}
  #selectable .ui การเลือกพื้นหลัง {: # FECA40;}
  #selectable .ui เลือก {พื้นหลัง: # F39814 สี: สีขาว;}
  #selectable {list สไตล์-Type: none; margin: 0; padding: 0; ความกว้าง: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; ความสูง: 18px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#selectable") .selectable ();
  });
  </ script>
</ head>
<body>
 
<ol id = "เลือก">
  <li class = "UI-Widget เนื้อหา"> รายการที่ 1 </ li>
  <li class = "UI-Widget เนื้อหา"> รายการที่ 2 </ li>
  <li class = "UI-Widget เนื้อหา"> วาระที่ 3 </ li>
  <li class = "UI-Widget เนื้อหา"> วาระที่ 4 </ li>
  <li class = "UI-Widget เนื้อหา"> 5 รายการ </ li>
  <li class = "UI-Widget เนื้อหา"> 6 รายการ </ li>
  <li class = "UI-Widget เนื้อหา"> รายการที่ 7 </ li>
</ ol>
 
 
</ body>
</ html>

มันจะแสดงเป็นตาราง

ให้เลือกรายการที่จะแสดงเป็นตารางเพื่อให้พวกเขาใช้ CSS ที่มีขนาดเดียวกันและแสดงผลลอย

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> เลือก jQuery UI (เลือกได้) - จอแสดงตาราง </ title>
  <link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
 
  <style>
  #feedback {font-size: 1.4em;}
  #selectable .ui การเลือกพื้นหลัง {: # FECA40;}
  #selectable .ui เลือก {พื้นหลัง: # F39814 สี: สีขาว;}
  #selectable {list สไตล์-Type: none; margin: 0; padding: 0; กว้าง: 450px;}
  #selectable li {margin: 3px; padding: 1px; ลอย: ด้านซ้าย; กว้าง: 100px; ความสูง: 80px; font-size: 4em; text-align: ศูนย์;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#selectable") .selectable ();
  });
  </ script>
</ head>
<body>
 
<ol id = "เลือก">
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 1 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 2 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 3 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 4 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 5 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 6 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 7 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 8 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 9 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 10 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 11 </ li>
  <ระดับ Li = "UI-รัฐเริ่มต้น"> 12 </ li>
</ ol>
 
 
</ body>
</ html>

การทำให้เป็นอันดับ

เขียนฟังก์ชั่นที่ stop เมื่อมีเหตุการณ์ทริกเกอร์ที่จะเก็บค่าดัชนีรายการที่เลือก ค่าเหล่านี้จะนำเสนอเป็นข้อเสนอแนะหรือในรูปแบบของสตริงของการถ่ายโอนข้อมูลที่

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> เลือก jQuery UI (เลือกได้) - ต่อเนื่อง </ title>
  <link rel = "สไตล์ชีต" 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 = "สไตล์ชีต" href = "http://jqueryui.com/resources/demos/style.css">
 
  <style>
  #feedback {font-size: 1.4em;}
  #selectable .ui การเลือกพื้นหลัง {: # FECA40;}
  #selectable .ui เลือก {พื้นหลัง: # F39814 สี: สีขาว;}
  #selectable {list สไตล์-Type: none; margin: 0; padding: 0; ความกว้าง: 60%;}
  #selectable li {margin: 3px; padding: 0.4em; font-size: 1.4em; ความสูง: 18px;}
  </ style>
  <script>
  $ (ฟังก์ชั่น () {
    $ ( "#selectable") .selectable ({
      หยุด: ฟังก์ชั่น () {
        ผล var = $ ( "# เลือกผล") .empty ();
        $ ( ".ui-เลือก" นี้) .each (ฟังก์ชั่น () {
          ดัชนี var = $ ( "Li #selectable") .index (นี้);
          result.append ( "#" + (ดัชนี + 1));
        });
      }
    });
  });
  </ script>
</ head>
<body>
 
<p id = "ข้อเสนอแนะ">
<span> คุณได้เลือก: </ span> <span id = "เลือกผล"> ไม่ </ span>
</ p>
 
<ol id = "เลือก">
  <li class = "UI-Widget เนื้อหา"> รายการที่ 1 </ li>
  <li class = "UI-Widget เนื้อหา"> รายการที่ 2 </ li>
  <li class = "UI-Widget เนื้อหา"> วาระที่ 3 </ li>
  <li class = "UI-Widget เนื้อหา"> วาระที่ 4 </ li>
  <li class = "UI-Widget เนื้อหา"> 5 รายการ </ li>
  <li class = "UI-Widget เนื้อหา"> 6 รายการ </ li>
</ ol>
 
 
</ body>
</ html>

ก่อนหน้านี้: เช่น jQuery UI - ซูม (ปรับขนาดได้)

ถัดไป: jQuery UI เช่น - การเรียงลำดับ (จัดเรียง)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง

ตัวอย่างเช่น jQuery UI - เลือก (เลือกได้)

ฟังก์ชั่นเริ่มต้น

มันจะแสดงเป็นตาราง

การทำให้เป็นอันดับ