Framework7 - Bộ chọn

Sự miêu tả

Bộ chọn trông giống như bộ chọn gốc của iOS và nó là một thành phần mạnh mẽ cho phép bạn chọn bất kỳ giá trị nào từ danh sách và cũng được sử dụng để tạo bộ chọn lớp phủ tùy chỉnh. Bạn có thể sử dụng Bộ chọn làm thành phần nội tuyến hoặc làm lớp phủ. Bộ chọn lớp phủ sẽ được tự động chuyển đổi thành Cửa sổ bật lên trên máy tính bảng (iPad).

Sử dụng phương pháp của Ứng dụng sau, bạn có thể tạo và khởi chạy phương thức JavaScript -

myApp.picker(parameters)

Trong đó các tham số là đối tượng bắt buộc, được sử dụng để khởi tạo thể hiện bộ chọn và nó là một phương thức bắt buộc.

Tham số bộ chọn

Bảng sau chỉ định các tham số có sẵn trong bộ chọn:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	container Chuỗi với bộ chọn CSS hoặc HTMLElement được sử dụng để tạo HTML bộ chọn cho bộ chọn nội tuyến.	chuỗi hoặc HTMLElement	-
2	input Phần tử đầu vào có liên quan được đặt với chuỗi bằng bộ chọn CSS hoặc HTMLElement.	chuỗi hoặc HTMLElement	-
3	scrollToInput Nó được sử dụng để cuộn khung nhìn (trang-nội dung) của đầu vào, bất cứ khi nào bộ chọn được mở.	boolean	thật
4	inputReadOnly Được sử dụng để đặt thuộc tính "chỉ đọc" trên đầu vào được chỉ định.	boolean	thật
5	convertToPopover Nó được sử dụng để chuyển đổi phương thức bộ chọn thành Popover trên màn hình lớn như iPad.	boolean	thật
6	onlyOnPopover Bạn có thể mở bộ chọn trong Popover bằng cách bật nó.	boolean	thật
7	cssClass Để chọn phương thức, bạn có thể sử dụng tên lớp CSS bổ sung.	chuỗi	-
số 8	closeByOutsideClick Bạn có thể đóng bộ chọn bằng cách nhấp vào bên ngoài bộ chọn hoặc phần tử đầu vào bằng cách bật phương pháp.	boolean	sai
9	toolbar Nó được sử dụng để kích hoạt thanh công cụ phương thức bộ chọn.	boolean	thật
10	toolbarCloseText Được sử dụng cho nút Xong / Đóng thanh công cụ.	chuỗi	'Làm xong'
11	toolbarTemplate Nó là Mẫu HTML của thanh công cụ, theo mặc định nó là chuỗi HTML với mẫu sau: `<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>`	chuỗi	-

Tham số bộ chọn cụ thể

Bảng sau liệt kê các thông số bộ chọn cụ thể có sẵn:

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	rotateEffect Nó cho phép hiệu ứng xoay 3D trong bộ chọn.	boolean	sai
2	momentumRatio Khi bạn nhả bộ chọn sau khi chạm và di chuyển nhanh, nó sẽ tạo ra nhiều động lực hơn.	con số	7
3	updateValuesOnMomentum Được sử dụng để cập nhật bộ chọn và giá trị đầu vào trong động lượng.	boolean	sai
4	updateValuesOnTouchmove Được sử dụng để cập nhật bộ chọn và giá trị đầu vào trong quá trình di chuyển chạm.	boolean	thật
5	value Mảng có các giá trị ban đầu của nó và mỗi mục mảng cũng đại diện cho giá trị của cột liên quan.	mảng	-
6	formatValue Hàm được sử dụng để định dạng giá trị đầu vào và nó sẽ trả về giá trị chuỗi mới / được định dạng. Giá trị và giá trị displayValues là mảng cột có liên quan.	hàm (p, giá trị, giá trị hiển thị)	-
7	cols Mọi mục mảng đại diện cho một đối tượng với các tham số cột.	mảng	-

Gọi lại thông số bộ chọn

Bảng sau đây cho thấy danh sách các hàm gọi lại có sẵn trong bộ chọn:

S. không	Gọi lại & Mô tả	Kiểu	Mặc định
1	onChange Hàm gọi lại sẽ được thực thi bất cứ khi nào giá trị bộ chọn thay đổi và các giá trị và displayValues là các mảng của cột có liên quan.	hàm (p, giá trị, giá trị hiển thị)	-
2	onOpen Hàm gọi lại sẽ được thực thi bất cứ khi nào bộ chọn được mở.	hàm (p)	-
3	onClose Hàm gọi lại sẽ được thực thi bất cứ khi nào bộ chọn đóng.	hàm (p)	-

Tham số cột

Tại thời điểm cấu hình của Picker, chúng ta cần truyền tham số cols . Nó được biểu diễn dưới dạng mảng, trong đó mỗi mục là đối tượng với các tham số cột -

S. không	Thông số & Mô tả	Kiểu	Mặc định
1	values Bạn có thể chỉ định các giá trị cột chuỗi bằng một mảng.	mảng	-
2	displayValues Nó có mảng với các giá trị cột chuỗi và nó sẽ hiển thị giá trị từ tham số giá trị , Khi nó không được chỉ định.	mảng	-
3	cssClass Tên lớp CSS được sử dụng để đặt trên vùng chứa HTML cột.	chuỗi	-
4	textAlign Nó được sử dụng để đặt căn chỉnh văn bản của các giá trị cột và nó có thể là "trái", "giữa" hoặc "phải" .	chuỗi	-
5	width Chiều rộng được tính toán tự động, theo mặc định. Nếu bạn cần sửa độ rộng cột trong bộ chọn với các cột phụ thuộc phải bằng px .	con số	-
6	divider Nó được sử dụng cho cột phải là bộ chia trực quan, nó không có bất kỳ giá trị nào.	boolean	sai
7	content Nó được sử dụng để chỉ định cột chia (divider: true) với nội dung của cột.	chuỗi	-

Tham số gọi lại cột

S. không	Gọi lại & Mô tả	Kiểu	Mặc định
1	onChange Bất cứ khi nào giá trị cột sẽ thay đổi lúc đó hàm gọi lại sẽ thực thi. Các giá trị và displayValue đại diện cho cột hiện giá trị và displayValue .	function (p, value, displayValue)	-

Thuộc tính bộ chọn

Biến Picker có nhiều thuộc tính được đưa ra trong bảng sau:

S. không	Thuộc tính & Mô tả
1	myPicker.params Bạn có thể khởi tạo các tham số được truyền với đối tượng.
2	myPicker.value Giá trị đã chọn cho mỗi cột được biểu thị bằng một mảng mục.
3	myPicker.displayValue Giá trị hiển thị đã chọn cho mỗi cột được biểu thị bằng một mảng mục.
4	myPicker.opened Khi bộ chọn được mở, nó đặt thành giá trị thực .
5	myPicker.inline Khi bộ chọn nằm trong dòng, nó đặt thành giá trị thực .
6	myPicker.cols Các cột Bộ chọn có các phương thức và thuộc tính riêng của nó.
7	myPicker.container Phiên bản Dom7 được sử dụng cho vùng chứa HTML.

Phương pháp chọn

Biến bộ chọn có các phương thức hữu ích, được đưa ra trong bảng sau:

S. không	Phương pháp & Mô tả
1	myPicker.setValue(values, duration) Sử dụng để đặt giá trị bộ chọn mới. Các giá trị nằm trong mảng trong đó mỗi mục đại diện cho giá trị cho mỗi cột. thời lượng - Đó là thời lượng chuyển đổi tính bằng mili giây.
2	myPicker.open() Sử dụng để mở Bộ chọn.
3	myPicker.close() Sử dụng để đóng Bộ chọn.
4	myPicker.destroy() Sử dụng để hủy thể hiện Bộ chọn và xóa tất cả các sự kiện.

Thuộc tính cột

Mỗi cột trong mảng myPicker.cols cũng có các thuộc tính hữu ích riêng của nó, được đưa ra trong bảng sau:

//Get first column
var col = myPicker.cols[0];

S. không	Thuộc tính & Mô tả
1	col.container Bạn có thể tạo một phiên bản với cột chứa HTML.
2	col.items Bạn có thể tạo một phiên bản với các phần tử HTML của các mục cột.
3	col.value Được sử dụng để chọn giá trị cột hiện tại.
4	col.displayValue Được sử dụng để chọn giá trị cột hiện tại của màn hình.
5	col.activeIndex Cung cấp số chỉ mục hiện tại, là mục đã chọn / đang hoạt động.

Phương pháp cột

Các phương pháp cột hữu ích được đưa ra trong bảng sau:

S. không	Phương pháp & Mô tả
1	col.setValue(value, duration) Được sử dụng để đặt giá trị mới cho cột hiện tại. Các giá trị phải là một giá trị mới, và thời gian là thời gian chuyển tiếp được đưa ra trong ms.
2	col.replaceValues(values, displayValues) Được sử dụng để thay thế các giá trị cột và displayValues bằng những giá trị mới.

Nó được sử dụng để truy cập phiên bản của Bộ chọn từ vùng chứa HTML của nó, bất cứ khi nào bạn khởi tạo Bộ chọn dưới dạng Bộ chọn nội tuyến.

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

Có các loại Bộ chọn khác nhau như được chỉ định trong bảng sau:

S. không	Loại & Mô tả tab
1	Bộ chọn với một giá trị Nó là một thành phần mạnh mẽ cho phép bạn chọn bất kỳ giá trị nào từ danh sách.
2	Hai giá trị và Hiệu ứng xoay 3D Trong bộ chọn, bạn có thể sử dụng cho hiệu ứng xoay 3D.
3	Giá trị phụ thuộc Các giá trị phụ thuộc vào nhau cho phần tử được chỉ định.
4	Thanh công cụ tùy chỉnh Bạn có thể sử dụng một hoặc nhiều bộ chọn trên một trang để tùy chỉnh.
5	Bộ chọn nội tuyến / Ngày-giờ Bạn có thể chọn số lượng giá trị trong bộ chọn nội tuyến. Ngày tương tự có ngày, tháng, năm và thời gian có giờ, phút, giây.