Thuộc tính Data jQuery Mobile

Thuộc tính dữ liệu jQuery

jQuery Mobile sử dụng các thuộc tính HTML5 data-* để tạo ra外观 đẹp và thân thiện với cảm ứng cho thiết bị di động.

Trong danh sách tham khảo dưới đây, các giá trị in đậm quy định giá trị mặc định.

Button

Liên kết có thuộc tính data-role="button". Các yếu tố nút và liên kết trong thanh công cụ và trường nhập sẽ được tự động đặt phong cách nút, không cần data-role="button".

Thuộc tính Data Giá trị Mô tả
data-corners true | false Quy định nút có góc tròn hay không.
data-icon Tham khảo biểu tượng Quy định biểu tượng của nút. Mặc định không có biểu tượng.
data-iconpos left | right | top | bottom | notext Định nghĩa vị trí của biểu tượng.
data-iconshadow true | false Quy định biểu tượng nút có bóng hay không.
data-inline true | false Quy định nút có trong dòng hay không.
data-mini true | false Quy định nút là nhỏ hay cỡ tiêu chuẩn.
data-shadow true | false Quy định nút có bóng hay không.
data-theme ký tự (a-z) Quy định màu sắc chủ đề của nút.

Lưu ý:Nếu muốn kết hợp nhiều nút, hãy sử dụng khung có thuộc tính data-role="controlgroup" và data-type="horizontal|vertical" để quy định là kết hợp ngang hay dọc.

Checkbox

label và input có type="checkbox" là cặp. Sẽ được tự động đặt thành phong cách nút, không cần data-role.

Thuộc tính Data Giá trị Mô tả
data-mini true | false Định nghĩa hộp kiểm là nhỏ hay kích thước tiêu chuẩn.
data-role none Ngăn cản jQuery Mobile đặt hộp kiểm thành phong cách nút.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của hộp kiểm.

Lưu ý:Để kết hợp nhiều hộp kiểm, hãy sử dụng data-role="controlgroup" và data-type="ngang|dọc" để định nghĩa nhóm hộp kiểm theo hướng ngang hoặc dọc.

Collapsible

Các yếu tố tiêu đề, sau đó là bất kỳ HTML đánh dấu nào trong container có thuộc tính data-role="collapsible".

Thuộc tính Data Giá trị Mô tả
data-collapsed true | false Định nghĩa nội dung có nên đóng hoặc mở.
data-collapsed-icon Tham khảo biểu tượng Định nghĩa biểu tượng nút gấp mở. Mặc định là "plus".
data-content-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nội dung gấp mở. Đồng thời sẽ thêm góc tròn vào nội dung gấp mở.
data-expanded-icon Tham khảo biểu tượng Định nghĩa biểu tượng nút gấp mở khi nội dung được mở. Mặc định là “giảm số”.
data-iconpos trái | phải | trên | dưới Định nghĩa vị trí của biểu tượng.
data-inset true | false Định nghĩa nút gấp mở có có góc tròn và margin kiểu样式.
data-mini true | false Định nghĩa nút gấp mở là nhỏ hay kích thước tiêu chuẩn.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nút gấp mở.

Collapsible Set

Nội dung gấp mở trong container có thuộc tính data-role="collapsible-set".

Thuộc tính Data Giá trị Mô tả
data-collapsed-icon Tham khảo biểu tượng Định nghĩa biểu tượng nút gấp mở. Mặc định là “cộng số”.
data-content-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nội dung gấp mở.
data-expanded-icon Tham khảo biểu tượng Định nghĩa biểu tượng nút gấp mở khi nội dung được mở. Mặc định là “giảm số”.
data-iconpos left | right | top | bottom | notext Định nghĩa vị trí của biểu tượng.
data-inset true | false Định nghĩa nút gấp mở có có góc tròn và margin kiểu样式.
data-mini true | false Định nghĩa nút gấp mở là nhỏ hay kích thước tiêu chuẩn.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nhóm có thể gấp mở.

Content

Chcontainer có thuộc tính data-role="content".

Thuộc tính Data Giá trị Mô tả
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nội dung. Mặc định là "c".

Controlgroup

Ch容器 có thuộc tính data-role="controlgroup" hoặc <fieldset>. Kết hợp nhiều input có phong cách nút đơn nhất (các nút liên kết, nút chọn, hộp kiểm, menu chọn).

Thuộc tính Data Giá trị Mô tả
data-mini true | false Định nghĩa nhóm là nhỏ hay kích thước tiêu chuẩn.
data-type ngang | dọc Định nghĩa nhóm theo hướng ngang hoặc dọc hiển thị.

Dialog

Ch容 hoặc liên kết có data-role="dialog" hoặc data-rel="dialog".

Thuộc tính Data Giá trị Mô tả
data-close-btn-text sometext Định nghĩa văn bản cho nút đóng cửa chỉ sử dụng trong hộp thoại.
data-dom-cache true | false Định nghĩa việc xóa bộ nhớ cache jQuery DOM cho trang cá nhân (nếu thiết lập thành true, cần chú ý quản lý DOM và kiểm tra toàn diện trên tất cả các thiết bị di động).
data-overlay-theme ký tự (a-z) Quy định màu sắc叠加（bối cảnh）của trang thoại.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của trang đối thoại.
data-title sometext Định nghĩa tiêu đề của trang đối thoại.

Enhancement

Khung chứa thuộc tính data-enhance="false" hoặc data-ajax="false".

Thuộc tính Data Giá trị Mô tả
data-enhance true | false Nếu thiết lập thành "true" (mặc định), jQuery Mobile sẽ tự động thêm phong cách trang để phù hợp hơn với thiết bị di động. Nếu thiết lập thành "false", khung sẽ không thiết lập phong cách trang.
data-ajax true | false Định nghĩa việc tải trang bằng cách sử dụng AJAX.

Chú thích:data-enhance="false" ví dụ như kết hợp với $.mobile.ignoreContentEnabled=true" để ngăn jQuery Mobile tự động thêm phong cách trang.

Khi $.mobile.ignoreContentEnabled được thiết lập thành true, bất kỳ liên kết hoặc yếu tố biểu mẫu nào trong khung chứa data-ajax="false" sẽ bị chức năng điều hướng của khung làm ngơ.

Fieldcontainer

Khung chứa dữ liệu-role="fieldcontain" của các cặp yếu tố label/form.

Thanh công cụ cố định

Khung chứa có thuộc tính data-role="header" hoặc data-role="footer" và thuộc tính data-position="fixed".

Thuộc tính Data Giá trị Mô tả
data-disable-page-zoom true | false Định nghĩa người dùng có thể phóng to thu nhỏ trang.
data-fullscreen true | false Định nghĩa thanh công cụ luôn ở trên cùng hoặc dưới cùng.
data-tap-toggle true | false Định nghĩa người dùng có thể切换 khả năng hiển thị thanh công cụ bằng cách nhấn hoặc click.
data-transition slide | fade | none Định nghĩa hiệu ứng chuyển đổi khi nhấn hoặc click.
data-update-page-padding true | false Định nghĩa việc cập nhật mép trên, dưới và mép trong của trang khi xảy ra sự kiện resize, transition và "updatelayout" (jQuery Mobile luôn cập nhật mép trong khi sự kiện "pageshow" xảy ra)
data-visible-on-page-show true | false Định nghĩa khả năng hiển thị thanh công cụ khi hiển thị trang cha.

Chuyển đổi bật/tắt lật

Một yếu tố <select> có thuộc tính data-role="slider" và hai yếu tố <option>.

Thuộc tính Data Giá trị Mô tả
data-mini true | false Định nghĩa rằng nút chuyển đổi là cỡ nhỏ hay cỡ thường.
data-role none Ngăn cản jQuery Mobile đặt nút chuyển đổi thành phong cách nút.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nút chuyển đổi.
data-track-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của đường ray.

Chân trang

Khung chứa có thuộc tính data-role="footer".

Thuộc tính Data Giá trị Mô tả
data-id sometext Định nghĩa ID duy nhất. Đòi hỏi phải có cho chân trang持久.
data-position nội tuyến | cố định Định nghĩa chân trang có là mối quan hệ nội tuyến với nội dung trang hay giữ lại ở dưới cùng.
data-fullscreen true | false Định nghĩa có nên để chân trang luôn ở dưới cùng và che盖 nội dung trang (sáng qua một chút).
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của chân trang. Mặc định là "a".

Chú thích:Để kích hoạt định vị fullscreen, hãy sử dụng data-position="fixed", sau đó thêm thuộc tính data-fullscreen cho yếu tố đó.

Tiêu đề

Khung chứa có data-role="header".

Thuộc tính Data Giá trị Mô tả
data-id sometext Định nghĩa ID duy nhất. Đòi hỏi phải có cho tiêu đề持久.
data-position nội tuyến | cố định Định nghĩa tiêu đề trang có là mối quan hệ nội tuyến với nội dung trang hay giữ lại ở trên cùng.
data-fullscreen true | false Định nghĩa có nên để trang luôn ở trên cùng và che盖 nội dung trang (sáng qua một chút).
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của tiêu đề trang. Mặc định là "a".

Chú thích:Để kích hoạt định vị fullscreen, hãy sử dụng data-position="fixed", sau đó thêm thuộc tính data-fullscreen cho yếu tố đó.

Liên kết

Tất cả các liên kết, bao gồm liên kết có data-role="button" và nút gửi biểu mẫu.

Thuộc tính Data Giá trị Mô tả
data-ajax true | false Định nghĩa có nên tải trang bằng AJAX để cải thiện trải nghiệm người dùng và hiệu ứng chuyển đổi. Nếu thiết lập là false, jQuery Mobile sẽ thực hiện yêu cầu trang thông thường.
data-direction đảo ngược Đảo ngược hiệu ứng chuyển đổi (chỉ áp dụng cho trang hoặc đối thoại)
data-dom-cache true | false Quy định có xóa bộ nhớ cache jQuery DOM của trang cá nhân hay không (nếu thiết lập là true, bạn cần chú ý quản lý DOM và kiểm tra toàn diện trên tất cả các thiết bị di động).
data-prefetch true | false Định nghĩa có nên lấy trước trang vào DOM để nó có thể được sử dụng khi người dùng truy cập.
data-rel quay lại | đối thoại | liên kết ngoài | bật lên Định nghĩa các tùy chọn về cách liên kết hoạt động. Quay lại - Chuyển động ngược lại trong lịch sử. Đối thoại - Mở trang làm đối thoại, không ghi lại trong lịch sử. Liên kết ngoài - Liên kết đến một域 khác. Mở - Mở cửa sổ bật lên.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Quy định cách chuyển đổi từ một trang sang trang tiếp theo. Tham khảo jQuery Mobile transition.
data-position-to origin | jQuery selector | window Quy định vị trí của hộp thoại bật lên. Gốc - Mặc định. Tạo cửa sổ bật lên khi mở liên kết. jQuery selector - Tạo cửa sổ弹出 trên phần tử được chỉ định. Window - Tạo cửa sổ弹出 giữa màn hình.

List

<ol> hoặc <ul> có thuộc tính data-role="listview".

Thuộc tính Data Giá trị Mô tả
data-autodividers true | false Định nghĩa có tự động phân cách mục danh sách hay không.
data-count-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của bọt tính toán. Mặc định là "c".
data-divider-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của dấu phân cách danh sách. Mặc định là "b".
data-filter true | false Định nghĩa có thêm thanh tìm kiếm trong danh sách hay không.
data-filter-placeholder sometext Định nghĩa văn bản trong thanh tìm kiếm. Mặc định là "Filter items...".
data-filter-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của chương trình lọc tìm kiếm. Mặc định là "c".
data-icon Tham khảo biểu tượng Định nghĩa biểu tượng của danh sách.
data-inset true | false Định nghĩa có thêm phong cách bo góc và mép ngoài cho danh sách hay không.
data-split-icon Tham khảo biểu tượng Định nghĩa biểu tượng của nút phân chia. Mặc định là "arrow-r".
data-split-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nút phân chia. Mặc định là "b".
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của danh sách.

List item

Mục danh sách <li> trong <ol> hoặc <ul> có thuộc tính data-role="listview".

Thuộc tính Data Giá trị Mô tả
data-filtertext sometext Định nghĩa văn bản được tìm kiếm khi lọc yếu tố. Văn bản này thay vì văn bản thực tế của mục danh sách sẽ được tìm kiếm.
data-icon Tham khảo biểu tượng Định nghĩa biểu tượng của mục danh sách.
data-role list-divider Định nghĩa dấu phân cách của mục danh sách.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của mục danh sách.

Chú thích:Thuộc tính data-icon chỉ áp dụng cho mục danh sách chứa liên kết.

Navbar

Thiết bị chứa có thuộc tính data-role="navbar" và phần tử <li> bên trong.

Thuộc tính Data Giá trị Mô tả
data-icon Tham khảo biểu tượng Định nghĩa biểu tượng của mục danh sách.
data-iconpos left | right | top | bottom | notext Định nghĩa vị trí của biểu tượng.

Lưu ý:Thanh điều hướng kế thừa theme-swatch từ th容器 cha. Việc đặt thuộc tính data-theme cho thanh điều hướng là không thể thực hiện được. Có thể đặt riêng thuộc tính data-theme cho mỗi liên kết trong navbar.

Page

Thiết bị chứa có thuộc tính data-role="page".

Thuộc tính Data Giá trị Mô tả
data-add-back-btn true | false Tự động thêm nút quay lại, chỉ sử dụng cho tiêu đề trang.
data-back-btn-text sometext Định nghĩa văn bản của nút quay lại.
data-back-btn-theme ký tự (a-z) Định nghĩa màu sắc chủ đề của nút quay lại.
data-close-btn-text ký tự (a-z) Định nghĩa văn bản của nút đóng trên giao diện đối thoại.
data-dom-cache true | false Quy định có xóa bộ nhớ cache jQuery DOM của trang cá nhân hay không (nếu thiết lập là true, bạn cần chú ý quản lý DOM và kiểm tra toàn diện trên tất cả các thiết bị di động).
data-overlay-theme ký tự (a-z) Quy định màu sắc叠加（bối cảnh）của trang thoại.
data-theme ký tự (a-z) Quy định màu sắc chủ đề của trang. Mặc định là "c".
data-title sometext Quy định tiêu đề của trang.
data-url url Giá trị này dùng để cập nhật URL, không phải để yêu cầu trang.

Popup

Bộ chứa có thuộc tính data-role="popup".

Thuộc tính Data Giá trị Mô tả
data-corners true | false Quy định hộp thoại bật lên có góc tròn hay không.
data-overlay-theme ký tự (a-z) Quy định màu sắc叠加（bối cảnh）của hộp thoại bật lên. Mặc định là nền trong suốt (none).
data-shadow true | false Quy định hộp thoại bật lên có bóng hay không.
data-theme ký tự (a-z) Quy định màu sắc chủ đề của hộp thoại bật lên. Mặc định là kế thừa, "none" thiết lập thành trong suốt.
data-tolerance 30, 15, 30, 15 Quy định khoảng cách từ mép cửa sổ (top, right, bottom, left).

Mã chèn có thuộc tính data-rel="popup":

Thuộc tính Data Giá trị Mô tả
data-position-to origin | jQuery selector | window Quy định vị trí của hộp thoại bật lên. Origin - Mặc định. Hộp thoại bật lên nằm trên liên kết mở nó. jQuery selector - Hộp thoại bật lên nằm trên phần tử được chỉ định. Window - Hộp thoại bật lên nằm ở trung tâm của màn hình cửa sổ.
data-rel popup Dùng để mở hộp thoại bật lên.
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none Quy định cách chuyển đổi từ một trang sang trang tiếp theo. Tham khảo jQuery Mobile transition.

Radio Button

label với input có type="radio" sẽ được tự động thiết lập thành phong cách nút, không cần data-role.

Thuộc tính Data Giá trị Mô tả
data-mini true | false Quy định nút chọn một có kích thước nhỏ hay kích thước tiêu chuẩn.
data-role none Đặt jQuery Mobile để thiết lập nút chọn một với phong cách enhanced buttons.
data-theme ký tự (a-z) Quy định màu sắc chủ đề của nút chọn một.

Lưu ý:Nếu muốn kết hợp nhiều nút chọn một, hãy sử dụng data-role="controlgroup" và data-type="horizontal|vertical" để quy định kết hợp theo chiều ngang hay chiều dọc của các nút.

Select

Tất cả các phần tử <select>. Sẽ được tự động đặt thành樣 thức nút, không cần date-role.

Thuộc tính Data Giá trị Mô tả
data-icon Tham khảo biểu tượng Định nghĩa biểu tượng của phần tử select. Mặc định là "arrow-d".
data-iconpos left | right | top | bottom | notext Định nghĩa vị trí của biểu tượng.
data-inline true | false Định nghĩa phần tử select có phải là nội tuyến hay không.
data-mini true | false Định nghĩa phần tử select là nhỏ hay kích thước tiêu chuẩn.
data-native-menu true | false Nếu đặt thành false, sẽ sử dụng menu chọn tùy chỉnh của jQuery tự nhiên (nếu bạn muốn menu chọn có cùng外观 trên tất cả các thiết bị di động, thì khuyến nghị sử dụng).
data-overlay-theme ký tự (a-z) Định nghĩa màu chủ đề của menu chọn tùy chỉnh jQuery (kết hợp với data-native-menu="false").
data-placeholder true | false Có thể đặt trên phần tử <option> không phải select tự nhiên.
data-role none Đặt jQuery Mobile để đặt phần tử select thành樣 thức nút.
data-theme ký tự (a-z) Định nghĩa màu chủ đề của phần tử select.

Lưu ý:Nếu cần kết hợp nhiều phần tử select, hãy sử dụng data-role="controlgroup" và data-type="horizontal|vertical" để định nghĩa rằng phần tử này được kết hợp theo chiều ngang hay chiều dọc.

Cuộn

Các phần tử input có type="range" sẽ được tự động đặt thành樣 thức nút, không cần data-role.

Thuộc tính Data Giá trị Mô tả
data-highlight true | false Định nghĩa có nên nổi bật đường dẫn cuộn hay không.
data-mini true | false Định nghĩa cuộn là nhỏ hay kích thước tiêu chuẩn.
data-role none Đặt jQuery Mobile để đặt樣式 cho nút cuộn.
data-theme ký tự (a-z) Định nghĩa màu chủ đề của các điều khiển cuộn (input, handle và track).
data-track-theme ký tự (a-z) Định nghĩa màu chủ đề của đường dẫn cuộn.

Text input và Textarea

Các phần tử input hoặc textarea có type="text|search|etc." sẽ được tự động đặt樣式, không cần data-role.

Thuộc tính Data Giá trị Mô tả
data-mini true | false Định nghĩa liệu element input là nhỏ hay kích thước tiêu chuẩn.
data-role none Đặt jQuery Mobile sẽ thiết lập input/textarea thành nút.
data-theme ký tự (a-z) Định nghĩa màu sắc chủ đề cho trường nhập vào.