Framework7 - ตัวเลือก

คำอธิบาย

เครื่องมือเลือกดูเหมือนตัวเลือกเนทีฟของ iOS และเป็นส่วนประกอบที่มีประสิทธิภาพที่ช่วยให้คุณสามารถเลือกค่าใด ๆ จากรายการและยังใช้ในการสร้างตัวเลือกการวางซ้อนแบบกำหนดเอง คุณสามารถใช้ Picker เป็นองค์ประกอบแบบอินไลน์หรือเป็นภาพซ้อนทับ ตัวเลือกการวางซ้อนจะถูกแปลงเป็น Popover บนแท็บเล็ต (iPad) โดยอัตโนมัติ

ใช้วิธีการของแอพต่อไปนี้คุณสามารถสร้างและเริ่มต้นวิธีการ JavaScript -

myApp.picker(parameters)

ในกรณีที่พารามิเตอร์เป็นอ็อบเจ็กต์ที่ต้องการใช้เพื่อเริ่มต้นอินสแตนซ์ตัวเลือกและเป็นวิธีการที่จำเป็น

พารามิเตอร์ตัวเลือก

ตารางต่อไปนี้ระบุพารามิเตอร์ที่มีอยู่ในตัวเลือก -

ส. เลขที่ พารามิเตอร์และคำอธิบาย ประเภท ค่าเริ่มต้น
1

container

สตริงที่มีตัวเลือก CSS หรือ HTMLElement ที่ใช้ในการสร้าง Picker HTML สำหรับตัวเลือกแบบอินไลน์

สตริงหรือ HTMLElement -
2

input

องค์ประกอบอินพุตที่เกี่ยวข้องวางด้วยสตริงด้วยตัวเลือก CSS หรือ HTMLElement

สตริงหรือ HTMLElement -
3

scrollToInput

ใช้เพื่อเลื่อนวิวพอร์ต (เนื้อหาหน้า) ของอินพุตเมื่อใดก็ตามที่เปิดตัวเลือก

บูลีน จริง
4

inputReadOnly

ใช้เพื่อตั้งค่าแอตทริบิวต์ "อ่านอย่างเดียว" ในอินพุตที่ระบุ

บูลีน จริง
5

convertToPopover

ใช้เพื่อแปลงตัวเลือกกิริยาเป็น Popover บนหน้าจอขนาดใหญ่เช่น iPad

บูลีน จริง
6

onlyOnPopover

คุณสามารถเปิดเครื่องมือเลือกใน Popover ได้โดยเปิดใช้งาน

บูลีน จริง
7

cssClass

ในการเลือกโมดอลคุณสามารถใช้ชื่อคลาส CSS เพิ่มเติมได้

สตริง -
8

closeByOutsideClick

คุณสามารถปิดเครื่องมือเลือกได้โดยคลิกด้านนอกตัวเลือกหรือองค์ประกอบอินพุตโดยเปิดใช้งานเมธอด

บูลีน เท็จ
9

toolbar

ใช้เพื่อเปิดใช้งานแถบเครื่องมือโมดอลตัวเลือก

บูลีน จริง
10

toolbarCloseText

ใช้สำหรับปุ่มแถบเครื่องมือเสร็จสิ้น / ปิด

สตริง 'เสร็จสิ้น'
11

toolbarTemplate

เป็นเทมเพลต HTML ของแถบเครื่องมือโดยค่าเริ่มต้นจะเป็นสตริง HTML พร้อมเทมเพลตต่อไปนี้ -

<div class = "toolbar">
  <div class = "toolbar-inner">
    <div class = "left"></div>
    <div class = "right">
      <a href = "#" class = "link close-picker">
         {{closeText}}
      </a>
    </div>
  </div>
</div>
สตริง -

พารามิเตอร์ตัวเลือกเฉพาะ

ตารางต่อไปนี้แสดงรายการพารามิเตอร์ตัวเลือกเฉพาะที่มี -

ส. เลขที่ พารามิเตอร์และคำอธิบาย ประเภท ค่าเริ่มต้น
1

rotateEffect

เปิดใช้งานเอฟเฟกต์การหมุน 3 มิติในตัวเลือก

บูลีน เท็จ
2

momentumRatio

เมื่อคุณปล่อยตัวเลือกหลังจากสัมผัสและเคลื่อนที่อย่างรวดเร็วมันจะสร้างโมเมนตัมมากขึ้น

จำนวน 7
3

updateValuesOnMomentum

ใช้เพื่ออัปเดตตัวเลือกและค่าอินพุตระหว่างโมเมนตัม

บูลีน เท็จ
4

updateValuesOnTouchmove

ใช้เพื่ออัปเดตตัวเลือกและค่าอินพุตระหว่างการเคลื่อนย้ายแบบสัมผัส

บูลีน จริง
5

value

อาร์เรย์มีค่าเริ่มต้นและแต่ละรายการอาร์เรย์แสดงถึงค่าของคอลัมน์ที่เกี่ยวข้อง

อาร์เรย์ -
6

formatValue

ฟังก์ชันนี้ใช้เพื่อจัดรูปแบบค่าอินพุตและควรส่งคืนค่าสตริงใหม่ / จัดรูปแบบ ค่าและdisplayValuesมีอาร์เรย์ของคอลัมน์ที่เกี่ยวข้อง

ฟังก์ชัน (p, ค่า, displayValues) -
7

cols

ทุกรายการอาร์เรย์แทนออบเจ็กต์ที่มีพารามิเตอร์คอลัมน์

อาร์เรย์ -

การโทรกลับของพารามิเตอร์ตัวเลือก

ตารางต่อไปนี้แสดงรายการฟังก์ชันการโทรกลับที่มีอยู่ในตัวเลือก -

ส. เลขที่ การโทรกลับและคำอธิบาย ประเภท ค่าเริ่มต้น
1

onChange

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

ฟังก์ชัน (p, ค่า, displayValues) -
2

onOpen

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

ฟังก์ชัน (p) -
3

onClose

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

ฟังก์ชัน (p) -

พารามิเตอร์คอลัมน์

ในช่วงเวลาของการกำหนดค่า Picker เราจำเป็นต้องส่งพารามิเตอร์cols มันแสดงเป็นอาร์เรย์โดยที่แต่ละรายการเป็นวัตถุที่มีพารามิเตอร์คอลัมน์ -

ส. เลขที่ พารามิเตอร์และคำอธิบาย ประเภท ค่าเริ่มต้น
1

values

คุณสามารถระบุค่าคอลัมน์สตริงด้วยอาร์เรย์

อาร์เรย์ -
2

displayValues

มีอาร์เรย์ที่มีค่าคอลัมน์สตริงและจะแสดงค่าจากพารามิเตอร์ค่าเมื่อไม่ได้ระบุ

อาร์เรย์ -
3

cssClass

คลาส CSSชื่อที่ใช้ในการตั้งค่าที่ภาชนะบรรจุ HTML คอลัมน์

สตริง -
4

textAlign

มันถูกใช้เพื่อการจัดตำแหน่งข้อความชุดของค่าในคอลัมน์และมันอาจจะ"ซ้าย", "ศูนย์" หรือ "สิทธิ"

สตริง -
5

width

ความกว้างจะถูกคำนวณโดยอัตโนมัติโดยค่าเริ่มต้น หากคุณต้องการที่จะแก้ไขความกว้างของคอลัมน์ในตัวเลือกที่มีคอลัมน์ขึ้นอยู่ว่าควรจะอยู่ในpx

จำนวน -
6

divider

ใช้สำหรับคอลัมน์ที่ควรเป็นตัวแบ่งภาพ แต่ไม่มีค่าใด ๆ

บูลีน เท็จ
7

content

ใช้เพื่อระบุ divider-column (divider: true)พร้อมเนื้อหาของคอลัมน์

สตริง -

พารามิเตอร์การโทรกลับของคอลัมน์

ส. เลขที่ การโทรกลับและคำอธิบาย ประเภท ค่าเริ่มต้น
1

onChange

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

ฟังก์ชัน (p, ค่า, displayValue) -

คุณสมบัติตัวเลือก

ตัวแปร Picker มีคุณสมบัติมากมายที่ได้รับในตารางต่อไปนี้ -

ส. เลขที่ คุณสมบัติและคำอธิบาย
1

myPicker.params

คุณสามารถเริ่มต้นพารามิเตอร์ที่ส่งผ่านด้วยออบเจ็กต์

2

myPicker.value

ค่าที่เลือกสำหรับแต่ละคอลัมน์จะแสดงด้วยอาร์เรย์ของรายการ

3

myPicker.displayValue

ค่าการแสดงผลที่เลือกสำหรับแต่ละคอลัมน์จะแสดงด้วยอาร์เรย์ของรายการ

4

myPicker.opened

เมื่อเปิดเครื่องมือเลือกจะตั้งค่าเป็นค่าจริง

5

myPicker.inline

เมื่อเครื่องมือเลือกอยู่ในบรรทัดจะตั้งค่าเป็นค่าจริง

6

myPicker.cols

คอลัมน์ Picker มีวิธีการและคุณสมบัติของตัวเอง

7

myPicker.container

อินสแตนซ์ Dom7 ใช้สำหรับคอนเทนเนอร์ HTML

วิธีการเลือก

ตัวแปรตัวเลือกมีวิธีการที่เป็นประโยชน์ซึ่งได้รับในตารางต่อไปนี้ -

ส. เลขที่ วิธีการและคำอธิบาย
1

myPicker.setValue(values, duration)

ใช้เพื่อตั้งค่าตัวเลือกใหม่ ค่าอยู่ในอาร์เรย์โดยแต่ละรายการแทนค่าสำหรับแต่ละคอลัมน์ ระยะเวลา - เป็นระยะเวลาการเปลี่ยนแปลงในหน่วยมิลลิวินาที

2

myPicker.open()

ใช้เพื่อเปิด Picker

3

myPicker.close()

ใช้เพื่อปิด Picker

4

myPicker.destroy()

ใช้เพื่อทำลายอินสแตนซ์ Picker และลบเหตุการณ์ทั้งหมด

คุณสมบัติของคอลัมน์

แต่ละคอลัมน์ในอาร์เรย์myPicker.colsยังมีคุณสมบัติที่เป็นประโยชน์ของตัวเองซึ่งได้รับในตารางต่อไปนี้ -

//Get first column
var col = myPicker.cols[0];
ส. เลขที่ คุณสมบัติและคำอธิบาย
1

col.container

คุณสามารถสร้างอินสแตนซ์ด้วยคอนเทนเนอร์ HTML ของคอลัมน์

2

col.items

คุณสามารถสร้างอินสแตนซ์ที่มีองค์ประกอบ HTML ของรายการคอลัมน์

3

col.value

ใช้เพื่อเลือกค่าคอลัมน์ปัจจุบัน

4

col.displayValue

ใช้เพื่อเลือกค่าคอลัมน์ปัจจุบันของการแสดงผล

5

col.activeIndex

ระบุหมายเลขดัชนีปัจจุบันซึ่งเป็นรายการที่เลือก / ใช้งานอยู่

วิธีการคอลัมน์

วิธีการคอลัมน์ที่เป็นประโยชน์มีให้ในตารางต่อไปนี้ -

ส. เลขที่ วิธีการและคำอธิบาย
1

col.setValue(value, duration)

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

2

col.replaceValues(values, displayValues)

ใช้เพื่อแทนที่ค่าคอลัมน์และ displayValues ​​ด้วยค่าใหม่

ใช้เพื่อเข้าถึงอินสแตนซ์ของ Picker จากคอนเทนเนอร์ HTML เมื่อใดก็ตามที่คุณเริ่มต้น Picker เป็นตัวเลือกแบบอินไลน์

var myPicker = $$('.picker-inline')[0].f7Picker;

Pickers มีหลายประเภทตามที่ระบุไว้ในตารางต่อไปนี้ -

ส. เลขที่ ประเภทแท็บและคำอธิบาย
1 ตัวเลือกที่มีค่าเดียว

เป็นส่วนประกอบที่มีประสิทธิภาพที่ช่วยให้คุณสามารถเลือกค่าใด ๆ จากรายการ

2 สองค่าและ 3D-Rotate Effect

ในเครื่องมือเลือกคุณสามารถใช้สำหรับเอฟเฟกต์การหมุน 3 มิติ

3 ขึ้นอยู่กับค่านิยม

ค่าต่างๆขึ้นอยู่กับองค์ประกอบที่ระบุ

4 Custom Toolbar

คุณสามารถใช้ตัวเลือกอย่างน้อยหนึ่งตัวในหน้าเดียวเพื่อปรับแต่ง

5 ตัวเลือกแบบอินไลน์ / วันที่ - เวลา

คุณสามารถเลือกจำนวนค่าในตัวเลือกแบบอินไลน์ได้วันที่ไลค์มีวันที่เดือนปีและเวลามีชั่วโมงนาทีวินาที