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	ตัวเลือกแบบอินไลน์ / วันที่ - เวลา คุณสามารถเลือกจำนวนค่าในตัวเลือกแบบอินไลน์ได้วันที่ไลค์มีวันที่เดือนปีและเวลามีชั่วโมงนาทีวินาที