JqueryUI - สปินเนอร์

วิดเจ็ต Spinner จะเพิ่มลูกศรขึ้น / ลงทางด้านซ้ายของช่องป้อนข้อมูลซึ่งจะช่วยให้ผู้ใช้สามารถเพิ่ม / ลดค่าในช่องป้อนข้อมูลได้ ช่วยให้ผู้ใช้พิมพ์ค่าได้โดยตรงหรือแก้ไขค่าที่มีอยู่โดยการหมุนด้วยแป้นพิมพ์เมาส์หรือล้อเลื่อน นอกจากนี้ยังมีคุณสมบัติขั้นตอนในการข้ามค่าต่างๆ นอกเหนือจากคุณสมบัติตัวเลขพื้นฐานแล้วยังเปิดใช้งานตัวเลือกการจัดรูปแบบสากล (เช่นสกุลเงินตัวคั่นหลักพันทศนิยมและอื่น ๆ ) ด้วยเหตุนี้จึงมีช่องป้อนข้อมูลมาสก์สากลที่สะดวกสบาย

ตัวอย่างต่อไปนี้ขึ้นอยู่กับโลกาภิวัฒน์ คุณสามารถรับไฟล์ Globalize ได้จากhttps://github.com/jquery/globalize. คลิกที่เผยแพร่เชื่อมโยงเลือกรุ่นที่คุณต้องการและดาวน์โหลด.zipหรือtar.gzไฟล์ แตกไฟล์และคัดลอกไฟล์ต่อไปนี้ไปยังโฟลเดอร์ที่ตัวอย่างของคุณอยู่

  • lib / globalize.js: ไฟล์นี้มีโค้ด Javascript สำหรับจัดการกับโลคัลไลเซชัน

  • lib / globalize.culture.js: ไฟล์นี้มีชุดโลแคลทั้งหมดที่ไลบรารี Globalize มาพร้อมกับ

ไฟล์เหล่านี้ยังอยู่ในโฟลเดอร์ภายนอกของไลบรารี jquery-ui ของคุณ

jQueryUI มีวิธี spinner () ซึ่งสร้างสปินเนอร์

ไวยากรณ์

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

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

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

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

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

ไวยากรณ์

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

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

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

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

ซีเนียร์ ตัวเลือกและคำอธิบาย
1 วัฒนธรรม

ตัวเลือกนี้ตั้งค่าวัฒนธรรมที่จะใช้สำหรับการแยกวิเคราะห์และจัดรูปแบบค่า โดยค่าเริ่มต้นคือnull ซึ่งหมายความว่ามีการใช้วัฒนธรรมที่กำหนดในปัจจุบันใน Globalize

Option - culture

ตัวเลือกนี้ตั้งค่าวัฒนธรรมที่จะใช้สำหรับการแยกวิเคราะห์และจัดรูปแบบค่า โดยค่าเริ่มต้นคือnullซึ่งหมายความว่ามีการใช้วัฒนธรรมที่กำหนดในปัจจุบันใน Globalize เกี่ยวข้องเฉพาะในกรณีที่ตั้งค่าตัวเลือกnumberFormat ต้องมีGlobalizeรวมอยู่ด้วย

Syntax

$( ".selector" ).spinner(
   { culture: "fr" }
);
2 ปิดการใช้งาน

ตัวเลือกนี้หากตั้งค่าเป็น trueจะปิดใช้งานสปินเนอร์ โดยค่าเริ่มต้นคือfalse.

Option - disabled

ตัวเลือกนี้หากตั้งค่าเป็น trueจะปิดใช้งานสปินเนอร์ โดยค่าเริ่มต้นคือfalse.

Syntax

$( ".selector" ).spinner(
   { disabled: true }
);
3 ไอคอน

ชุดนี้ตัวเลือกไอคอนที่จะใช้สำหรับปุ่มจับคู่ไอคอนให้โดยjQuery UI CSS กรอบ โดยค่าเริ่มต้นคือ{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.

Option - icons

ชุดนี้ตัวเลือกไอคอนที่จะใช้สำหรับปุ่มจับคู่ไอคอนให้โดยjQuery UI CSS กรอบ โดยค่าเริ่มต้นคือ{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }.

Syntax

$( ".selector" ).spinner(
   { icons: { down: "custom-down-icon", up: "custom-up-icon" } }
);
4 เพิ่มขึ้น

ตัวเลือกนี้ควบคุมจำนวนก้าวที่ดำเนินการเมื่อกดปุ่มหมุนค้างไว้ โดยค่าเริ่มต้นคือtrue.

Option - incremental

ตัวเลือกนี้ควบคุมจำนวนก้าวที่ดำเนินการเมื่อกดปุ่มหมุนค้างไว้ โดยค่าเริ่มต้นคือtrue.

สิ่งนี้สามารถเป็นประเภท -

  • Boolean- หากตั้งค่าเป็นเท็จขั้นตอนทั้งหมดจะเท่ากัน หากตั้งค่าเป็นจริงเดลต้าก้าวจะเพิ่มขึ้นเมื่อหมุนอย่างไม่หยุดหย่อน

  • Function - ต้องส่งคืนจำนวนขั้นตอนที่ควรเกิดขึ้นสำหรับการหมุนปัจจุบัน

Syntax

$( ".selector" ).spinner(
   { incremental: false }
);
5 สูงสุด

ตัวเลือกนี้ระบุค่าสูงสุดที่อนุญาต โดยค่าเริ่มต้นคือnull ซึ่งหมายความว่าไม่มีการบังคับใช้สูงสุด

Option - max

ตัวเลือกนี้ระบุค่าสูงสุดที่อนุญาต โดยค่าเริ่มต้นคือnull ซึ่งหมายความว่าไม่มีการบังคับใช้สูงสุด

สิ่งนี้สามารถเป็นประเภท -

  • Number - ค่าสูงสุด

  • String- หากรวม Globalize ตัวเลือกสูงสุดสามารถส่งผ่านเป็นสตริงซึ่งจะถูกแยกวิเคราะห์ตามตัวเลือกnumberFormatและวัฒนธรรม

Syntax

$( ".selector" ).spinner(
   { max: 50 }
);
6 นาที

ตัวเลือกนี้ระบุค่าต่ำสุดที่อนุญาต โดยค่าเริ่มต้นคือnull ซึ่งหมายความว่าไม่มีการบังคับใช้ขั้นต่ำ

Option - min

ตัวเลือกนี้ระบุค่าต่ำสุดที่อนุญาต โดยค่าเริ่มต้นคือnull ซึ่งหมายความว่าไม่มีการบังคับใช้ขั้นต่ำ

สิ่งนี้สามารถเป็นประเภท -

  • Number - ค่าต่ำสุด

  • String- หากรวม Globalize ตัวเลือกขั้นต่ำสามารถส่งผ่านเป็นสตริงซึ่งจะแยกวิเคราะห์ตามตัวเลือกnumberFormatและวัฒนธรรม

    .

Syntax

$( ".selector" ).spinner(
   { min: 0 }
);
7 numberFormat

ตัวเลือกนี้ระบุรูปแบบของตัวเลขที่ส่งไปยังGlobalizeหากมี ที่พบมากที่สุดคือ "n" สำหรับตัวเลขทศนิยมและ "C" สำหรับค่าสกุลเงิน โดยค่าเริ่มต้นคือnull.

Option - numberFormat

ตัวเลือกนี้ระบุรูปแบบของตัวเลขที่ส่งไปยังGlobalizeหากมี ที่พบมากที่สุดคือ "n" สำหรับตัวเลขทศนิยมและ "C" สำหรับค่าสกุลเงิน โดยค่าเริ่มต้นคือnull.

Syntax

$( ".selector" ).spinner(
   { numberFormat: "n" }
);
8 หน้า

ตัวเลือกนี้ระบุจำนวนขั้นตอนที่ต้องดำเนินการเมื่อเพจผ่านเมธอด pageUp / pageDown โดยค่าเริ่มต้นคือ10.

Option - page

ตัวเลือกนี้ระบุจำนวนขั้นตอนที่ต้องดำเนินการเมื่อเพจผ่านเมธอด pageUp / pageDown โดยค่าเริ่มต้นคือ10.

Syntax

$( ".selector" ).spinner(
   { page: 5 }
);
9 ขั้นตอน

ตัวเลือกนี้จะแสดงให้เห็นขนาดของขั้นตอนที่จะใช้เมื่อปั่นผ่านทางปุ่มหรือผ่านทางStepUp () / stepDown ()วิธีการ แอตทริบิวต์ขั้นตอนขององค์ประกอบถูกใช้หากมีอยู่และไม่ได้ตั้งค่าตัวเลือกไว้อย่างชัดเจน

Option - step

ตัวเลือกนี้จะแสดงให้เห็นขนาดของขั้นตอนที่จะใช้เมื่อปั่นผ่านทางปุ่มหรือผ่านทางStepUp () / stepDown ()วิธีการ แอตทริบิวต์ขั้นตอนขององค์ประกอบถูกใช้หากมีอยู่และไม่ได้ตั้งค่าตัวเลือกไว้อย่างชัดเจน

สิ่งนี้สามารถเป็นประเภท -

  • Number - ขนาดของขั้นตอน

  • String- หากรวม Globalize ตัวเลือกขั้นตอนสามารถส่งผ่านเป็นสตริงซึ่งจะถูกแยกวิเคราะห์ตามตัวเลือกnumberFormatและวัฒนธรรมมิฉะนั้นจะกลับไปใช้ parseFloat ดั้งเดิม

    • Syntax

    $( ".selector" ).spinner(
   { step: 2 }
);

ส่วนต่อไปนี้จะแสดงตัวอย่างการทำงานบางส่วนของฟังก์ชันวิดเจ็ตสปินเนอร์

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

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-1 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-1" ).spinner();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-1" value = "0" />
      </div>
   </body>
</html>

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

การใช้ตัวเลือกขั้นต่ำสูงสุดและขั้นตอน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก min, สูงสุดและขั้นตอนในเครื่องมือปั่นของ jQueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-2,#spinner-3 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-2" ).spinner({
               min: -10, 
               max: 10
            });
            $('#spinner-3').spinner({
               step: 100, 
               min: -1000000, 
               max: 1000000
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         Spinner Min, Max value set:
         <input type = "text" id = "spinner-2" value = "0" /><br><br>
         Spinner increments/decrements in step of of 100:
         <input type = "text" id = "spinner-3" value = "0" />
      </div>
   </body>
</html>

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

ในตัวอย่างข้างต้นคุณจะเห็นในสปินเนอร์ตัวแรกค่าสูงสุดและต่ำสุดถูกตั้งค่าเป็น 10 และ -10 ตามลำดับ ดังนั้นการข้ามค่าเหล่านี้สปินเนอร์จะหยุดการเพิ่ม / ลด ในสปินเนอร์ตัวที่สองค่าของสปินเนอร์จะเพิ่มขึ้น / ลดทีละ 100

การใช้ไอคอนตัวเลือก

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ตัวเลือก icons ในวิดเจ็ต spinner ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-5 input {width: 100px}
      </style>
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-5" ).spinner({
               icons: {
                  down: "custom-down-icon", up: "custom-up-icon"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-5" value = "0" />
      </div>
   </body>
</html>

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

ในตัวอย่างด้านบนคุณสามารถสังเกตได้ว่าตัวหมุนรูปภาพเปลี่ยนไป

การใช้วัฒนธรรม numberFormat และตัวเลือกเพจ

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานสามตัวเลือก culture, numberFormatและเพจในวิดเจ็ต spinner ของ JqueryUI

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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 src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
      <script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
      
      <script>
         $(function() {
            $( "#spinner-4" ).spinner({
               culture:"de-DE",
               numberFormat:"C",
               step:2,
               page:10
            });
         });
      </script>
   </head>
   
   <body>
      <p>
         <label for = "spinner-4">Amount to donate:</label>
         <input id = "spinner-4" name = "spinner" value = "5">
      </p>
     
   </body>
</html>

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

ในตัวอย่างข้างต้นคุณจะเห็นตัวหมุนแสดงตัวเลขในรูปแบบสกุลเงินเนื่องจากnumberFormatถูกตั้งค่าเป็น "C" และวัฒนธรรมถูกตั้งค่าเป็น "de-DE" ที่นี่เราได้ใช้ไฟล์ Globalize จากไลบรารี jquery-ui

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

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

ไวยากรณ์

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

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

ซีเนียร์ การดำเนินการและคำอธิบาย
1 ทำลาย

การกระทำนี้ทำลายการทำงานของสปินเนอร์ขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - destroy

การกระทำนี้ทำลายการทำงานของสปินเนอร์ขององค์ประกอบโดยสิ้นเชิง องค์ประกอบกลับสู่สถานะก่อนเริ่มต้น วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$(".selector").spinner("destroy");
2 ปิดการใช้งาน

การดำเนินการนี้ปิดใช้งานฟังก์ชันสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - disable

การดำเนินการนี้ปิดใช้งานฟังก์ชันสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$(".selector").spinner("disable");
3 เปิดใช้งาน

การดำเนินการนี้เปิดใช้งานฟังก์ชันสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - enable

การดำเนินการนี้เปิดใช้งานฟังก์ชันสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

$(".selector").spinner("enable");
4 ตัวเลือก (optionName)

การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameคือชื่อของตัวเลือกที่จะได้รับ

Action - option( optionName )

การดำเนินการนี้ได้รับค่าเชื่อมโยงกับที่ระบุOptionName โดยoptionNameคือชื่อของตัวเลือกที่จะได้รับ

Syntax

var isDisabled = $( ".selector" ).spinner( "option", "disabled" );
5 ตัวเลือก

การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกสปินเนอร์ปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - option

การดำเนินการนี้ได้รับวัตถุที่มีคู่คีย์ / ค่าที่แสดงถึงแฮชตัวเลือกสปินเนอร์ปัจจุบัน วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

var options = $( ".selector" ).spinner( "option" );
6 ตัวเลือก (optionName ค่า)

การกระทำนี้จะตั้งค่าตัวเลือกของปินเนอร์ที่เกี่ยวข้องกับการระบุOptionName

Action - optionName

การกระทำนี้จะตั้งค่าตัวเลือกของปินเนอร์ที่เกี่ยวข้องกับการระบุOptionName

Syntax

$( ".selector" ).spinner( "option", "disabled", true );
7 option (ตัวเลือก)

การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับเครื่องปั่นด้าย

Action - option( options )

การดำเนินการนี้ตั้งค่าตัวเลือกอย่างน้อยหนึ่งตัวเลือกสำหรับเครื่องปั่นด้าย

Syntax

$(".selector").spinner("option", { disabled: true });
8 pageDown ([หน้า])

การดำเนินการนี้จะลดค่าตามจำนวนหน้าที่ระบุตามที่กำหนดโดยอ็อพชันเพจ

Action - pageDown( [pages ] )

การดำเนินการนี้จะลดค่าตามจำนวนหน้าที่ระบุตามที่กำหนดโดยอ็อพชันเพจ การเรียกใช้pageDown ()จะทำให้เหตุการณ์เริ่มหมุนและหยุดถูกทริกเกอร์

Syntax

$(".selector").spinner("pageDown");
9 pageUp ([หน้า])

การดำเนินการนี้จะเพิ่มค่าตามจำนวนหน้าที่ระบุตามที่กำหนดโดยอ็อพชันเพจ

Action - pageUp( [pages ] )

การดำเนินการนี้จะเพิ่มค่าตามจำนวนหน้าที่ระบุตามที่กำหนดโดยอ็อพชันเพจ การเรียกใช้pageUp ()จะทำให้เหตุการณ์เริ่มหมุนและหยุดถูกทริกเกอร์

Syntax

$(".selector").spinner("pageUp");
10 stepDown ([ขั้นตอน])

การดำเนินการนี้จะลดค่าตามจำนวนขั้นตอนที่ระบุ

Action - stepDown( [steps ] )

การดำเนินการนี้จะลดค่าตามจำนวนขั้นตอนที่ระบุ การเรียกใช้stepDown ()จะทำให้เหตุการณ์เริ่มหมุนและหยุดถูกทริกเกอร์

Syntax

$(".selector").spinner("stepDown");
11 stepUp ([ขั้นตอน])

การดำเนินการนี้จะเพิ่มค่าตามจำนวนขั้นตอนที่ระบุ

Action - stepUp( [steps ] )

การดำเนินการนี้จะเพิ่มค่าตามจำนวนขั้นตอนที่ระบุ การเรียกใช้stepUp ()จะทำให้เหตุการณ์เริ่มหมุนและหยุดถูกทริกเกอร์

Syntax

$(".selector").spinner("stepUp");
12 มูลค่า

การดำเนินการนี้ได้รับค่าปัจจุบันเป็นตัวเลข ค่าจะถูกแยกวิเคราะห์ตามตัวเลือก numberFormat และวัฒนธรรม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Action - value

การดำเนินการนี้ได้รับค่าปัจจุบันเป็นตัวเลข ค่าจะถูกแยกวิเคราะห์ตามตัวเลือก numberFormat และวัฒนธรรม วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Syntax

var value = $( ".selector" ).spinner( "value" );
13 มูลค่า (มูลค่า)

การดำเนินการนี้ตั้งค่า ถ้าค่าถูกส่งค่าจะถูกแยกวิเคราะห์ตามตัวเลือก numberFormat และวัฒนธรรม

Action - value( value )

การดำเนินการนี้ตั้งค่า ถ้าค่าถูกส่งค่าจะถูกแยกวิเคราะห์ตามตัวเลือก numberFormat และวัฒนธรรม

Syntax

$( ".selector" ).spinner( "value", 50 );
14 วิดเจ็ต

การดำเนินการนี้ส่งคืนองค์ประกอบวิดเจ็ตสปินเนอร์ คำอธิบายประกอบที่มีชื่อคลาสui-spinner

Action - widget

การดำเนินการนี้ส่งคืนองค์ประกอบวิดเจ็ตสปินเนอร์ คำอธิบายประกอบที่มีชื่อคลาสui-spinner

Syntax

$( ".selector" ).spinner( "widget");

ตัวอย่างต่อไปนี้สาธิตวิธีใช้การดำเนินการที่ให้ไว้ในตารางด้านบน

การใช้การดำเนินการ stepUp, stepDown, pageUp และ pageDown

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้งานของStepUp, stepDown, PageUpและPageDownวิธี

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-6 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-6").spinner();
            $('button').button();

            $('#stepUp-2').click(function () {
               $("#spinner-6").spinner("stepUp");
            });

            $('#stepDown-2').click(function () {
               $("#spinner-6").spinner("stepDown");
            });

            $('#pageUp-2').click(function () {
               $("#spinner-6").spinner("pageUp");
            });

            $('#pageDown-2').click(function () {
               $("#spinner-6").spinner("pageDown");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-6" />
      <br/>
      <button id = "stepUp-2">Increment</button>
      <button id = "stepDown-2">Decrement</button>
      <button id = "pageUp-2">Increment Page</button>
      <button id = "pageDown-2">Decrement Page</button>
   </body>
</html>

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

ในตัวอย่างข้างต้นใช้ปุ่มต่างๆเพื่อเพิ่ม / ลดสปินเนอร์

การใช้การดำเนินการเปิดใช้งานและปิดใช้งาน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้วิธีการเปิดและปิดใช้งาน

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-7 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $("#spinner-7").spinner();
            $('button').button();
            $('#stepUp-3').click(function () {
               $("#spinner-7").spinner("enable");
            });
            $('#stepDown-3').click(function () {
               $("#spinner-7").spinner("disable");
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <input id = "spinner-7" />
      <br/>
      <button id = "stepUp-3">Enable</button>
      <button id = "stepDown-3">Disable</button>
   </body>
</html>

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

ในตัวอย่างข้างต้นใช้ปุ่มเปิด / ปิดเพื่อเปิดหรือปิดใช้งานสปินเนอร์

การจัดการเหตุการณ์เกี่ยวกับองค์ประกอบสปินเนอร์

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

ซีเนียร์ วิธีการและคำอธิบายเหตุการณ์
1 การเปลี่ยนแปลง (เหตุการณ์, UI)

เหตุการณ์นี้จะเกิดขึ้นเมื่อค่าของสปินเนอร์เปลี่ยนไปและไม่มีการโฟกัสอินพุตอีกต่อไป

Event - change(event, ui)

เหตุการณ์นี้จะเกิดขึ้นเมื่อค่าของสปินเนอร์เปลี่ยนไปและไม่มีการโฟกัสอินพุตอีกต่อไป ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

Syntax

$( ".selector" ).spinner({
   change: function( event, ui ) {}
});
2 สร้าง (เหตุการณ์, UI)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสปินเนอร์ถูกสร้างขึ้น

Event - create(event, ui)

เหตุการณ์นี้จะถูกทริกเกอร์เมื่อสปินเนอร์ถูกสร้างขึ้น ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

Syntax

$( ".selector" ).spinner({
   create: function( event, ui ) {}
});
3 หมุน (เหตุการณ์ ui)

เหตุการณ์นี้จะถูกทริกเกอร์ระหว่างการเพิ่ม / ลด

Event - spin(event, ui)

เหตุการณ์นี้จะถูกทริกเกอร์ระหว่างการเพิ่ม / ลด ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

และแสดงถึงค่าใหม่ที่จะตั้งค่าเว้นแต่กิจกรรมจะถูกยกเลิก

Syntax

$( ".selector" ).spinner({
   spin: function( event, ui ) {}
});
4 เริ่มต้น (เหตุการณ์, UI)

เหตุการณ์นี้เกิดขึ้นก่อนการหมุน สามารถยกเลิกได้ป้องกันไม่ให้เกิดการหมุน

Event - start(event, ui)

เหตุการณ์นี้เกิดขึ้นก่อนการหมุน สามารถยกเลิกได้ป้องกันไม่ให้เกิดการหมุน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

Syntax

$( ".selector" ).spinner({
   start: function( event, ui ) {}
});
5 หยุด (เหตุการณ์, UI)

เหตุการณ์นี้จะเกิดขึ้นหลังจากการหมุน

Event - stop(event, ui)

เหตุการณ์นี้จะเกิดขึ้นหลังจากการหมุน ในกรณีที่เหตุการณ์เป็นประเภทที่จัดกิจกรรมและUIเป็นประเภทวัตถุ

Syntax

$( ".selector" ).spinner({
   stop: function( event, ui ) {}
});

ตัวอย่าง

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

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Spinner 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>
      
      <!-- CSS -->
      <style type = "text/css">
         #spinner-8 input {width: 100px}
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#spinner-8" ).spinner({
               spin: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
               },
               change: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
               },
               stop: function( event, ui ) {
                  var result = $( "#result-2" );
                  result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "example">
         <input type = "text" id = "spinner-8" value = "0" />
      </div>
      <span id = "result-2"></span>
   </body>
</html>

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

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

จุดต่อ

วิดเจ็ตสปินเนอร์ถูกสร้างขึ้นด้วยโรงงานวิดเจ็ตและสามารถขยายได้ ในการขยายวิดเจ็ตเราสามารถลบล้างหรือเพิ่มพฤติกรรมของวิธีการที่มีอยู่ได้ วิธีการต่อไปนี้เป็นจุดขยายที่มีความเสถียรของ API เช่นเดียวกับวิธีการสปินเนอร์ ที่ระบุไว้ในตารางข้างต้น

ซีเนียร์ วิธีการและคำอธิบาย
1 _buttonHtml (เหตุการณ์)

วิธีนี้ส่งคืน String ซึ่งเป็น HTML HTML นี้สามารถใช้สำหรับปุ่มเพิ่มและลดของสปินเนอร์ แต่ละปุ่มต้องได้รับชื่อคลาส ui-spinner-button เพื่อให้เหตุการณ์ที่เกี่ยวข้องทำงานได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Extension Point - _buttonHtml(event, ui)

วิธีนี้ส่งคืน String ซึ่งเป็น HTML HTML นี้สามารถใช้สำหรับปุ่มเพิ่มและลดของสปินเนอร์ แต่ละปุ่มต้องได้รับชื่อคลาส ui-spinner-button เพื่อให้เหตุการณ์ที่เกี่ยวข้องทำงานได้ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Code Example

_buttonHtml: function() {
  return "" +
    "" +
    "";
}
2 _uiSpinnerHtml (เหตุการณ์)

วิธีนี้กำหนด HTML ที่จะใช้ในการตัดองค์ประกอบ <input> ของสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Extension Point - _uiSpinnerHtml(event, ui)

วิธีนี้กำหนด HTML ที่จะใช้ในการตัดองค์ประกอบ <input> ของสปินเนอร์ วิธีนี้ไม่ยอมรับข้อโต้แย้งใด ๆ

Code Example

_uiSpinnerHtml: function() {
  return "
            ";
}
jQuery UI Widget Factory เป็นฐานที่ขยายได้ซึ่งสร้างวิดเจ็ตทั้งหมดของ jQuery UI การใช้โรงงานวิดเจ็ตเพื่อสร้างปลั๊กอินช่วยอำนวยความสะดวกสำหรับการจัดการสถานะเช่นเดียวกับข้อตกลงสำหรับงานทั่วไปเช่นการเปิดเผยเมธอดปลั๊กอินและการเปลี่ยนตัวเลือกหลังจากสร้างอินสแตนซ์
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2025 | All Rights Reserved