JqueryUI - ปุ่ม

jQueryUI มีวิธีการปุ่ม () เพื่อเปลี่ยนองค์ประกอบ HTML (เช่นปุ่มอินพุตและจุดยึด) ให้เป็นปุ่มที่กำหนดธีมได้พร้อมการจัดการการเคลื่อนไหวของเมาส์โดยอัตโนมัติทั้งหมดนี้จัดการได้อย่างโปร่งใสโดย jQuery UI

เพื่อให้ปุ่มกลุ่มปุ่มนอกจากนี้ยังมีเครื่องมือเพิ่มเติมที่เรียกว่าButtonset Buttonsetถูกนำมาใช้โดยการเลือกองค์ประกอบภาชนะ (ซึ่งมีปุ่ม) และเรียก.buttonset ()

ไวยากรณ์

button() วิธีการสามารถใช้ได้สองรูปแบบ -

$ (ตัวเลือกบริบท) .button (ตัวเลือก)วิธีการ
$ (ตัวเลือกบริบท) .button ("การกระทำ", พารามิเตอร์)วิธีการ

$ (ตัวเลือกบริบท) .button (ตัวเลือก) วิธีการ

วิธีการปุ่ม (ตัวเลือก)ประกาศว่าองค์ประกอบ HTML ควรได้รับการปฏิบัติเป็นปุ่ม ตัวเลือกพารามิเตอร์เป็นวัตถุที่ระบุพฤติกรรมและลักษณะของปุ่มที่

ไวยากรณ์

$(selector, context).button (options);

คุณสามารถระบุตัวเลือกได้ครั้งละหนึ่งตัวเลือกโดยใช้วัตถุ Javascript หากมีให้เลือกมากกว่าหนึ่งตัวเลือกคุณจะแยกตัวเลือกโดยใช้ลูกน้ำดังนี้ -

$(selector, context).button({option1: value1, option2: value2..... });

ตารางต่อไปนี้แสดงรายการตัวเลือกต่างๆที่สามารถใช้ได้กับวิธีนี้ -

ซีเนียร์	ตัวเลือกและคำอธิบาย
1	ปิดการใช้งาน ตัวเลือกนี้จะยกเลิกการใช้งานปุ่มถูกตั้งค่าเป็นจริง โดยค่าเริ่มต้นคือfalse. Option - disabled ตัวเลือกนี้จะยกเลิกการใช้งานปุ่มถูกตั้งค่าเป็นจริง โดยค่าเริ่มต้นคือfalse. Syntax `$( ".selector" ).button({ disabled: true });`
2	ไอคอน ตัวเลือกนี้ระบุว่าจะแสดงไอคอนหนึ่งหรือสองไอคอนในปุ่ม:ไอคอนหลักทางด้านซ้ายไอคอนรองทางด้านขวา ไอคอนหลักถูกระบุโดยคุณสมบัติหลักของอ็อบเจ็กต์และไอคอนรองถูกระบุโดยคุณสมบัติรอง โดยค่าเริ่มต้นคือprimary: null, secondary: null. Option - icons ตัวเลือกนี้ระบุว่าจะแสดงไอคอนหนึ่งหรือสองไอคอนในปุ่ม:ไอคอนหลักทางด้านซ้ายไอคอนรองทางด้านขวา ไอคอนหลักถูกระบุโดยคุณสมบัติหลักของอ็อบเจ็กต์และไอคอนรองถูกระบุโดยคุณสมบัติรอง โดยค่าเริ่มต้นคือprimary: null, secondary: null. Syntax `$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });`
3	ฉลาก ตัวเลือกนี้ระบุข้อความที่จะแสดงบนปุ่มที่ลบล้างป้ายกำกับธรรมชาติ หากละเว้นป้ายกำกับธรรมชาติสำหรับองค์ประกอบจะแสดงขึ้น ในกรณีของปุ่มตัวเลือกและช่องทำเครื่องหมายป้ายกำกับธรรมชาติคือองค์ประกอบ <label> ที่เกี่ยวข้องกับตัวควบคุม โดยค่าเริ่มต้นคือnull. Option - label ตัวเลือกนี้ระบุข้อความที่จะแสดงบนปุ่มที่ลบล้างป้ายกำกับธรรมชาติ หากละเว้นป้ายกำกับธรรมชาติสำหรับองค์ประกอบจะแสดงขึ้น ในกรณีของปุ่มตัวเลือกและช่องทำเครื่องหมายป้ายกำกับธรรมชาติคือองค์ประกอบ <label> ที่เกี่ยวข้องกับตัวควบคุม โดยค่าเริ่มต้นคือnull. Syntax `$( ".selector" ).button({ label: "custom label" });`
4	ข้อความ ตัวเลือกนี้ระบุว่าจะแสดงข้อความบนปุ่มหรือไม่ หากระบุเป็นเท็จข้อความจะถูกระงับหาก (และเฉพาะในกรณีที่) ตัวเลือกไอคอนระบุไอคอนอย่างน้อยหนึ่งไอคอน โดยค่าเริ่มต้นคือtrue. Option - text ตัวเลือกนี้ระบุว่าจะแสดงข้อความบนปุ่มหรือไม่ หากระบุเป็นเท็จข้อความจะถูกระงับหาก (และเฉพาะในกรณีที่) ตัวเลือกไอคอนระบุไอคอนอย่างน้อยหนึ่งไอคอน โดยค่าเริ่มต้นคือtrue. Syntax `$( ".selector" ).button({ text: false });`

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

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงตัวอย่างง่ายๆของฟังก์ชันวิดเจ็ตปุ่มโดยไม่ต้องส่งพารามิเตอร์ไปยังไฟล์ button() วิธี.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML buttonexample.htmและเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ ตอนนี้คุณสามารถเล่นกับผลลัพธ์ -

ตัวอย่างนี้แสดงให้เห็นถึงมาร์กอัปที่สามารถใช้สำหรับปุ่ม: องค์ประกอบของปุ่มอินพุตประเภท submit และจุดยึด

การใช้ไอคอนข้อความและปิดใช้งาน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้สองตัวเลือก icons, text และ disabled ในฟังก์ชั่นปุ่มของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

ที่นี่คุณจะเห็นปุ่มที่มีไอคอนเท่านั้นปุ่มที่มีไอคอนสองไอคอนและปุ่มปิดใช้งาน

$ (ตัวเลือกบริบท) .button ("action", params) Method

ปุ่ม ( "การกระทำ" params)วิธีการสามารถดำเนินการกระทำที่ปุ่มเช่นการปิดใช้งานปุ่ม การดำเนินการถูกระบุเป็นสตริงในอาร์กิวเมนต์แรก (เช่นปุ่ม "ปิด" เพื่อปิดใช้งาน) ตรวจสอบการดำเนินการที่สามารถส่งผ่านได้ในตารางต่อไปนี้

ไวยากรณ์

$(selector, context).button ("action", params);

ตารางต่อไปนี้แสดงการดำเนินการต่างๆที่สามารถใช้ได้กับวิธีนี้ -


$( ".selector" ).button("destroy");
$( ".selector" ).button("disable");
$( ".selector" ).button("enable");
var isDisabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button("option");
$( ".selector" ).button( "option", "disabled", true );
$( ".selector" ).button( "option", { disabled: true } );
$( ".selector" ).button("refresh");
$( ".selector" ).button("widget");

ซีเนียร์	การดำเนินการและคำอธิบาย
1	ทำลาย การดำเนินการนี้จะลบฟังก์ชันปุ่มขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - destroy การดำเนินการนี้จะลบฟังก์ชันปุ่มขององค์ประกอบทั้งหมด องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).button("destroy");`
2	ปิดการใช้งาน การดำเนินการนี้ปิดใช้งานการทำงานของปุ่มขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - disable การดำเนินการนี้ปิดใช้งานการทำงานของปุ่มขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).button("disable");`
3	เปิดใช้งาน การดำเนินการนี้เปิดใช้งานการทำงานของปุ่มขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - enable การดำเนินการนี้เปิดใช้งานการทำงานของปุ่มขององค์ประกอบ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).button("enable");`
4	ตัวเลือก (optionName) การดำเนินการนี้จะดึงค่าของตัวเลือกที่ระบุไว้ในOptionName โดยoptionNameคือ String Action - option( optionName ) การดำเนินการนี้จะดึงค่าของตัวเลือกที่ระบุไว้ในOptionName โดยoptionNameคือ String Syntax `var isDisabled = $( ".selector" ).button( "option", "disabled" );`
5	ตัวเลือก การดำเนินการนี้ดึงอ็อบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชันปุ่มปัจจุบัน Action - option การดำเนินการนี้ดึงอ็อบเจ็กต์ที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชอ็อพชันปุ่มปัจจุบัน Syntax `$( ".selector" ).button("option");`
6	ตัวเลือก (optionName ค่า) การกระทำนี้จะตั้งค่าตัวเลือกปุ่มที่เกี่ยวข้องกับการระบุOptionName Action - option( optionName, value ) การกระทำนี้จะตั้งค่าตัวเลือกปุ่มที่เกี่ยวข้องกับการระบุOptionName โดยoptionNameคือชื่อของตัวเลือกที่จะตั้งค่าและค่าคือค่าที่จะตั้งค่าสำหรับตัวเลือก Syntax `$( ".selector" ).button( "option", "disabled", true );`
7	option (ตัวเลือก) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับปุ่ม โดยที่ตัวเลือกคือแมปของคู่ค่าตัวเลือกที่จะตั้งค่า Action - option( options ) การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับปุ่ม โดยที่ตัวเลือกคือแมปของคู่ค่าตัวเลือกที่จะตั้งค่า Syntax `$( ".selector" ).button( "option", { disabled: true } );`
8	รีเฟรช การดำเนินการนี้จะรีเฟรชการแสดงปุ่ม สิ่งนี้มีประโยชน์เมื่อโปรแกรมจัดการปุ่มและการแสดงผลไม่จำเป็นต้องสอดคล้องกับสถานะภายใน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - refresh การดำเนินการนี้จะรีเฟรชการแสดงปุ่ม สิ่งนี้มีประโยชน์เมื่อโปรแกรมจัดการปุ่มและการแสดงผลไม่จำเป็นต้องสอดคล้องกับสถานะภายใน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).button("refresh");`
9	วิดเจ็ต การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบปุ่ม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Action - widget การดำเนินการนี้ส่งคืนวัตถุ jQuery ที่มีองค์ประกอบปุ่ม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ Syntax `$( ".selector" ).button("widget");`

ตัวอย่าง

ตอนนี้ให้เราดูตัวอย่างโดยใช้การดำเนินการจากตารางด้านบน ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ เมธอดdestroy ()และ disable ()

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML buttonexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณจะเห็นผลลัพธ์ต่อไปนี้ -

การจัดการเหตุการณ์บนปุ่ม

นอกเหนือจากวิธีการปุ่ม (ตัวเลือก) ที่เราเห็นในส่วนก่อนหน้านี้ JqueryUI ยังมีวิธีการเหตุการณ์ที่จะเรียกใช้สำหรับเหตุการณ์หนึ่ง ๆ วิธีการจัดกิจกรรมเหล่านี้แสดงไว้ด้านล่าง -

ซีเนียร์	วิธีการและคำอธิบายเหตุการณ์
1	สร้าง (เหตุการณ์, UI) เหตุการณ์นี้จะถูกทริกเกอร์เมื่อปุ่มถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Event - create(event, ui) เหตุการณ์นี้จะทริกเกอร์เมื่อองค์ประกอบปุ่มถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ Syntax `$( ".selector" ).button({ create: function( event, ui ) {} });`

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานเมธอดเหตุการณ์สำหรับฟังก์ชันวิดเจ็ตปุ่ม ตัวอย่างนี้แสดงให้เห็นถึงการใช้งานของเหตุการณ์ที่สร้าง

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

ให้เราบันทึกโค้ดด้านบนในไฟล์ HTML buttonexample.htm และเปิดในเบราว์เซอร์มาตรฐานที่รองรับจาวาสคริปต์คุณต้องเห็นผลลัพธ์ต่อไปนี้ -