jQuery UI API - สมาชิก Rotator (ปินเนอร์ Widget)

ก่อนหน้านี้: jQuery UI API - ชิ้นส่วนเลื่อน (Slider Widget)

ถัดไป: jQuery UI API สมาชิก - แท็บ (แท็บ Widget)

หมวดหมู่

การใช้

คำอธิบาย: ขึ้น / ลงปุ่มลูกศรและการประมวลผลที่สำคัญค่าการป้อนข้อความเพิ่มฟังก์ชั่นการป้อนข้อมูล

รุ่นใหม่: 1.9

Rotator (ปินเนอร์) หรือการควบคุมจำนวนของขั้นตอนที่ (หมายเลข stepper Widget) ถูกนำมาใช้ในการประมวลผลอินพุตดิจิตอลต่าง ๆ การควบคุมที่สมบูรณ์แบบ จะช่วยให้ผู้ใช้สามารถป้อนค่าโดยตรงหรือหมุนเพื่อเปลี่ยนค่าที่มีอยู่ผ่านแป้นพิมพ์ล้อเมาส์ เมื่อรวมกับโลกาภิวัตน์ (Globalize) คุณยังสามารถหมุนจอแสดงผลสกุลเงินและวันที่ในภูมิภาคต่างๆ

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

ปฏิสัมพันธ์แป้นพิมพ์

UP: เพื่อเพิ่มมูลค่าขั้นตอนหนึ่ง
ลง: เพื่อลดขั้นตอนค่า
PAGE UP: เพื่อเพิ่มมูลค่า
PAGE DOWN: เพื่อลดค่า

คลิกที่ปุ่มหมุนด้วยเมาส์, โฟกัสยังคงอยู่ในฟิลด์ข้อความ

เมื่อโรซาลีจะไม่ได้อ่าน ( <input readonly> ) ผู้ใช้สามารถป้อนค่าซึ่งอาจส่งผลให้ค่าไม่ถูกต้อง (น้อยกว่าขั้นต่ำมากกว่าสูงสุดเพิ่มหรือลดไม่ตรงกันการป้อนข้อมูลที่ไม่ใช่ตัวเลข) เมื่อการเพิ่มขึ้นหรือลดลงทั้งโปรแกรมหรือโดยวิธีการของปุ่มหมุนค่าจะถูกบังคับให้ค่าที่ถูกต้อง (สำหรับข้อมูลเพิ่มเติมโปรดดู stepUp() และ stepDown() จะอธิบาย

ชุดรูปแบบ

Rotator สมาชิก (ปินเนอร์ Widget) โดยใช้ กรอบ jQuery UI CSS เพื่อกำหนดรูปลักษณ์และความรู้สึกของสไตล์ หากคุณจำเป็นต้องใช้เครื่องปั่นด้ายสไตล์ที่ระบุคุณสามารถใช้ชื่อคลาส CSS ต่อไปนี้:

ui-spinner : Rotator ภาชนะนอก
- ui-spinner-input : Rotator สมาชิก (ปินเนอร์ Widget) instantiated <input> องค์ประกอบ
- ui-spinner-button : Rotator ถูกนำมาใช้เพื่อเพิ่มหรือลดลงของค่าของตัวควบคุมปุ่ม ปุ่มขึ้นนอกจากนี้จะมีการจัดมี ui-spinner-up ชั้นลงปุ่มที่มีเพิ่มเติม ui-spinner-down ชั้น

วางใจ

UI หลัก (UI หลัก)
ห้องสมุดองค์ประกอบ (โรงงาน Widget)
องค์ประกอบ Button (ปุ่ม Widget)
โลกาภิวัตน์ (Globalize) (ภายนอกตัวเลือก; เมื่อรวมกับ culture และ numberFormat เมื่อใช้ร่วมกับตัวเลือก)

ข้อมูลเพิ่มเติม

ส่วนที่ต้องมีการทำงาน CSS มิฉะนั้นมันจะไม่ทำงาน ถ้าคุณสร้างธีมที่กำหนดเองใช้วิดเจ็ตที่ระบุ CSS แฟ้มเป็นจุดเริ่มต้น
องค์ประกอบในการเขียนโปรแกรมจัดการค่าขององค์ประกอบเพื่อที่ว่าเมื่อค่าของการเปลี่ยนแปลงองค์ประกอบไม่ได้เรียกพื้นเมือง change เหตุการณ์
มันไม่สนับสนุน <input type="number"> สร้างตัวเลือกเพราะมันจะทำให้เกิดความขัดแย้งกับ Rotator UI ท้องถิ่น

ตัวอย่าง

เลือกดิจิตอลที่พบบ่อย

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สมาชิก Rotator (ปินเนอร์ Widget) สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<input id = "ปั่น">
 
<script>
$ ( "#spinner") .spinner ();
</ script>
 
</ body>
</ html>

ก่อนหน้านี้: jQuery UI API - ชิ้นส่วนเลื่อน (Slider Widget)

ถัดไป: jQuery UI API สมาชิก - แท็บ (แท็บ Widget)

jQuery UI หลักสูตร

jQuery UI กระทู้

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

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

jQuery UI ตัวอย่าง