jQuery Mobile - Hướng dẫn nhanh
JQuery Mobile là một khung giao diện người dùng, được xây dựng trên jQuery Core và được sử dụng để phát triển các trang web hoặc ứng dụng đáp ứng có thể truy cập trên thiết bị di động, máy tính bảng và máy tính để bàn. Nó sử dụng các tính năng của cả jQuery và jQuery UI để cung cấp các tính năng API cho các ứng dụng web di động.
Nó được phát triển bởi nhóm dự án jQuery vào năm 2010 và được viết bằng JavaScript.
Tại sao sử dụng jQuery Mobile?
Nó tạo ra các ứng dụng web mà nó sẽ hoạt động theo cùng một cách trên thiết bị di động, máy tính bảng và máy tính để bàn.
Nó tương thích với các khuôn khổ khác như PhoneGap, Whitelight, v.v.
Nó cung cấp một tập hợp các đầu vào biểu mẫu thân thiện với cảm ứng và các tiện ích giao diện người dùng.
Cải tiến liên tục mang đến một chức năng độc đáo cho tất cả các nền tảng di động, máy tính bảng và máy tính để bàn, đồng thời thêm tải trang hiệu quả và hỗ trợ thiết bị rộng hơn.
Các tính năng của jQuery Mobile
Nó được xây dựng trên jQuery Core và khung giao diện người dùng "viết ít hơn, làm nhiều hơn".
Nó là một khung công tác mã nguồn mở và tương thích với nhiều nền tảng cũng như nhiều trình duyệt.
Nó được viết bằng JavaScript và sử dụng các tính năng của cả jQuery và jQuery UI để xây dựng các trang web thân thiện với thiết bị di động.
Nó tích hợp giao diện người dùng HTML5, CCS3, jQuery và jQuery vào một khuôn khổ để tạo các trang với tập lệnh tối thiểu.
Nó bao gồm hệ thống điều hướng Ajax sử dụng chuyển đổi trang động.
Ưu điểm của jQuery Mobile
Sẽ dễ dàng học và phát triển ứng dụng nếu bạn có kiến thức về các tính năng HTML5, CSS3.
Nó tương thích với nhiều nền tảng và trình duyệt chéo, do đó bạn không phải lo lắng về việc viết mã khác nhau cho từng độ phân giải thiết bị.
Bạn có thể tạo chủ đề tùy chỉnh bằng ThemeRoller mà không cần viết dòng mã. Nó hỗ trợ tất cả các trình duyệt HTML5.
Nó sử dụng HTML5 cùng với JavaScript để dễ dàng phát triển các ứng dụng web.
Nó được xây dựng theo cách cho phép cùng một mã tự động mở rộng từ màn hình di động sang màn hình máy tính để bàn.
Nhược điểm của jQuery Mobile
Có các tùy chọn hạn chế cho các chủ đề CSS, vì vậy các trang web có thể trông giống nhau được tạo bởi các chủ đề này.
Các ứng dụng được phát triển bằng jQuery Mobile trên điện thoại di động chậm hơn.
Sẽ tốn nhiều thời gian hơn khi bạn kết hợp jQuery mobile với các framework di động khác.
Khó cung cấp thiết kế trực quan tùy chỉnh hoàn chỉnh.
JavaScript không thể truy cập tất cả các tính năng trong một thiết bị trong trình duyệt.
Trong chương này, chúng ta sẽ thảo luận về cách cài đặt và thiết lập jQuery Mobile.
Tải xuống jQuery Mobile
Khi bạn mở liên kết jquerymobile.com/ , bạn sẽ thấy có hai tùy chọn để tải xuống thư viện di động jQuery.
Custom Download - Nhấp vào nút này để tải xuống phiên bản thư viện tùy chỉnh.
Latest Stable - Nhấp vào nút này để tải phiên bản ổn định và mới nhất của thư viện di động jQuery.
Tải xuống tùy chỉnh với Trình tạo tải xuống
Sử dụng Trình tạo tải xuống, bạn có thể tạo một bản dựng tùy chỉnh chỉ bao gồm các phần của thư viện mà bạn cần. Khi bạn tải xuống phiên bản jQuery Mobile tùy chỉnh mới này, bạn sẽ thấy màn hình sau.
Bạn có thể chọn các thư viện theo nhu cầu của mình và nhấp vào Build My Download cái nút.
Tải xuống ổn định
Nhấp vào nút Ổn định , dẫn trực tiếp đến tệp ZIP chứa tệp CSS và JQuery, cho phiên bản mới nhất của thư viện di động jQuery. Giải nén nội dung tệp ZIP vào thư mục di động jQuery.
Phiên bản này chứa tất cả các tệp bao gồm tất cả các phụ thuộc, một bộ sưu tập lớn các bản trình diễn và thậm chí cả bộ thử nghiệm đơn vị của thư viện. Phiên bản này rất hữu ích để bắt đầu.
Tải xuống Thư viện jQuery từ CDN
CDN (Mạng phân phối nội dung) là một mạng gồm các máy chủ được thiết kế để cung cấp tệp cho người dùng. Nếu bạn sử dụng liên kết CDN trong trang web của mình, liên kết này sẽ chuyển trách nhiệm lưu trữ tệp từ các máy chủ của riêng bạn sang một loạt các máy chủ bên ngoài. Điều này cũng mang lại một lợi thế là nếu khách truy cập vào trang web của bạn đã tải xuống bản sao jQuery mobile từ cùng một CDN, thì sẽ không phải tải xuống lại. Bạn có thể đưa các tệp CDN sau vào tài liệu HTML.
//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Chúng tôi đang sử dụng các phiên bản CDN của thư viện trong suốt hướng dẫn này. Chúng tôi sử dụng AMPPS (AMPPS là một ngăn xếp WAMP, MAMP và LAMP của máy chủ Apache, MySQL, MongoDB, PHP, Perl & Python) để thực thi tất cả các ví dụ của chúng tôi.
Thí dụ
Sau đây là một ví dụ đơn giản về jQuery Mobile.
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id = "pageone">
<div data-role = "header">
<h1>Header Text</h1>
</div>
<div data-role = "main" class = "ui-content">
<h2>Welcome to TutorialsPoint</h2>
</div>
<div data-role = "footer">
<h1>Footer Text</h1>
</div>
</div>
</body>
</html>
Chi tiết của đoạn mã trên là -
Mã này được chỉ định bên trong phần tử head.
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
Chế độ xem được sử dụng để chỉ định (bởi trình duyệt) để hiển thị mức và kích thước thu phóng của trang.
content = "width = device-width" được sử dụng để đặt chiều rộng pixel của trang hoặc thiết bị màn hình.
ban đầu-scale = 1 đặt mức thu phóng ban đầu, khi trang được tải lần đầu tiên.
Bao gồm các CDN sau
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
Nội dung bên trong thẻ <body> là một trang được hiển thị trong trình duyệt.
<div data-role = "page">
...
</div>
data-role = "header" tạo tiêu đề ở đầu trang.
data-role = "main" được sử dụng để xác định nội dung của trang.
data-role = "footer" tạo chân trang ở cuối trang.
class = "ui-content" bao gồm phần đệm và lề bên trong nội dung trang.
Đầu ra
Hãy thực hiện các bước sau để xem mã trên hoạt động như thế nào -
Lưu mã html ở trên thành simple_example.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/simple_example.html và kết quả sau sẽ được hiển thị.
Người dùng có thể tương tác với các trang jQuery Mobile, nhóm này sẽ nhóm nội dung thành các chế độ xem hợp lý và các chế độ xem trang. Chế độ xem trang có thể được làm động bằng cách sử dụng chuyển đổi trang. Nhiều trang có thể được tạo bằng tài liệu HTML và do đó, không cần yêu cầu nội dung từ máy chủ.
Bảng sau trình bày chi tiết các loại trang.
Sr.No. | Loại & Mô tả |
---|---|
1 | Trang đơn Một trang đơn được tạo trong tài liệu HTML bằng cách viết mẫu chuẩn. |
2 | Mẫu nhiều trang Nhiều trang có thể được bao gồm trong một tài liệu HTML duy nhất, tài liệu này tải cùng nhau bằng cách thêm nhiều div với data-role = "page" . |
3 | Trang hộp thoại Hộp thoại phương thức mở nội dung trong lớp phủ tương tác phía trên trang. |
Quy ước, không phải yêu cầu
Các phần tử thuộc tính vai trò dữ liệu như đầu trang, chân trang, trang và nội dung được sử dụng để cung cấp định dạng và cấu trúc cơ bản của trang.
Đối với tài liệu một trang, trình bao bọc trang được yêu cầu để tự động khởi tạo được đặt làm tùy chọn.
Yếu tố cấu trúc có thể được loại trừ đối với một trang web có bố cục tùy chỉnh.
Để quản lý các trang, trình bao bọc trang được đưa vào bởi khuôn khổ khi nó không được bao gồm bởi đánh dấu.
Tìm nạp trước các trang
Bao gồm tìm nạp trước dữ liệu thuộc tính , chúng tôi có thể tìm nạp trước các trang vào DOM trong các mẫu trang đơn. Để biết thêm thông tin bấm vào đây .
DOM Cache
Khi bộ nhớ trình duyệt đầy trong DOM, thì nó sẽ làm chậm trình duyệt trên thiết bị di động hoặc có thể gặp sự cố do tải nhiều trang. Có một phương pháp đơn giản để giữ cho DOM gọn gàng -
Khi một trang được tải qua ajax, thì nó cho biết xóa trang đó khỏi DOM khi bạn chuyển hướng đến một trang khác.
Trang trước mà bạn đã truy cập có thể được truy xuất lại từ bộ nhớ cache khi bạn truy cập lại.
Thay vì xóa các trang, bạn có thể yêu cầu jQuery mobile giữ nó trong DOM bằng cách sử dụng dòng sau:
$.mobile.page.prototype.options.domCache = true;
Đặt tùy chọn domCache là true trên plugin trang để giữ tất cả các trang trong DOM, đã được truy cập trước đó.
pageContainerElement.page({ domCache: true });
jQuery Mobile cung cấp một tập hợp các biểu tượng có sẵn, có thể được sử dụng với các nút, nút dạng xem danh sách sẽ làm cho các nút trở nên hấp dẫn hơn.
Bảng sau liệt kê một số biểu tượng được sử dụng trong khuôn khổ jQuery Mobile.
Sr.No. | Khu vực Biểu tượng & Mô tả |
---|---|
1 | Bộ biểu tượng Nó đặt biểu tượng trong nút. |
2 | Biểu tượng định vị Nó chỉ định vị trí của biểu tượng trong nút. |
3 | Chỉ biểu tượng Nó chỉ hiển thị một biểu tượng trong nút. |
4 | Bóng biểu tượng Nó thêm một bóng biểu tượng trong nút của bạn. |
5 | Xóa vòng kết nối Nó loại bỏ vòng tròn màu xám xung quanh biểu tượng. |
6 | Biểu tượng đen hoặc trắng Nó thay đổi màu của các biểu tượng thành màu đen hoặc trắng. |
7 | Kết hợp alt và gật đầu Nó kết hợp các lớp alt và nút vào biểu tượng. |
Nó cho phép thay đổi các giá trị thuộc tính xảy ra trong khoảng thời gian xác định và thay đổi hành vi của một phần tử từ trạng thái này sang trạng thái khác bằng cách áp dụng các kiểu khác nhau cho từng trạng thái.
Bảng sau liệt kê một số chuyển đổi trang được sử dụng trong khuôn khổ jQuery Mobile:
Sr.No. | Chuyển tiếp & Mô tả | Đối với các trang | Đối với hộp thoại |
---|---|---|---|
1 | fade Bạn có thể làm cho các yếu tố mờ dần và khuất tầm nhìn. |
Trang Fade | Hộp thoại Fade |
2 | flip Lật các phần tử từ sau ra trước sang trang tiếp theo. |
Lật trang | Hộp thoại lật |
3 | pop Bạn có thể tạo một cửa sổ bật lên. |
Trang Pop | Hộp thoại Pop |
4 | flow Hiển thị trang tiếp theo bằng cách giữ trang hiện tại cách xa. |
Trang dòng chảy | Hộp thoại Luồng |
5 | slide Bạn có thể trượt trang từ phải sang trái. |
Trang trình chiếu | Hộp thoại Trượt |
6 | slidefade Trượt trang từ phải sang trái và mờ dần ở trang tiếp theo. |
Trang slidefade | Hộp thoại Slidefade |
7 | slideup Trượt trang từ dưới lên. |
Trang trình chiếu | Hộp thoại Slideup |
số 8 | slidedown Trượt trang từ trên xuống dưới. |
Trang trình chiếu | Hộp thoại trượt xuống |
9 | turn Bạn có thể lật sang trang tiếp theo. |
Sang trang | Quay hộp thoại |
10 | none Bạn không thể sử dụng bất kỳ hiệu ứng chuyển tiếp nào bằng cách sử dụng thuộc tính này. |
Không có trang | Không có hộp thoại |
Đặt cấu hình chuyển tiếp và toàn cục
Theo mặc định, các trang sẽ có fadechuyển tiếp trong khuôn khổ. Bạn có thể sử dụng chuyển đổi tùy chỉnh bằng cách thêmdata-transitionthuộc tính cho liên kết. Bạn có thể sử dụng các hiệu ứng chuyển tiếp mặc định khác nhau cho trang bằng cách sử dụngdefaultPageTransitiontùy chọn trên toàn cầu. Đối với hộp thoại, bạn có thể sử dụngdefaultDialogTransition Lựa chọn.
Chuyển đổi dự phòng
Tất cả các chuyển đổi đều hỗ trợ chuyển đổi 3D ngoại trừ chuyển đổi mờ dần. Các thiết bị không hỗ trợ chuyển đổi 3D, chúng sẽ phải sử dụng chuyển đổi mờ dần. Một số trình duyệt không hỗ trợ chuyển đổi 3D cho từng loại chuyển đổi, vì vậy bạn có thể sử dụngfade làm dự phòng chuyển tiếp mặc định.
Cuộn tối đa cho chuyển đổi
Chuyển đổi được đặt thành không khi bạn đang cuộn từ hoặc đến một trang và vị trí cuộn sẽ gấp ba lần chiều cao của màn hình thiết bị. Đôi khi, bạn có thể phản hồi chậm hoặc trình duyệt có thể gặp sự cố khi bạn nhấp vào bất kỳ phần tử điều hướng nào; vì vậy để tránh điều này, chúng tôi đang sử dụng vị trí cuộn để chuyển đổi bằng cách sử dụnggetMaxScrollForTransition chức năng.
Chiều rộng tối đa cho chuyển tiếp
Bạn có thể tắt chuyển đổi khi chiều rộng cửa sổ cao hơn chiều rộng pixel. Bạn có thể định cấu hình chiều rộng tối đa cho các chuyển đổi bằng cách sử dụng$.mobile.maxTransitionWidthtùy chọn toàn cầu, được đặt thành false theo mặc định. Nó nhận các giá trị như chiều rộng pixel hoặc giá trị false và quá trình chuyển đổi sẽ được đặt thành không nếu nó không phải là giá trị sai khi cửa sổ cao hơn giá trị được chỉ định.
Chuyển đổi cùng một trang
Bạn có thể thêm các chuyển đổi vào trang hiện tại bằng cách sử dụng allowSamePageTransition tùy chọn của tiện ích con vùng chứa trang change() phương pháp.
Tạo chuyển đổi tùy chỉnh
Bạn có thể tạo các chuyển đổi tùy chỉnh trong trang bằng cách sử dụng $.mobile.transitionHandlers tùy chọn mở rộng lựa chọn chuyển tiếp trên trang web hoặc ứng dụng.
Hệ thống lưới được sử dụng để tạo bố cục trang thông qua một loạt các hàng và cột chứa nội dung của bạn.
Bảng dưới đây trình bày chi tiết các loại lưới.
Sr.No. | Loại & Mô tả |
---|---|
1 | Lưới Hệ thống lưới di động jQuery tạo bố cục trang thông qua một loạt các hàng và cột. |
2 | Các nút trong lưới Bộ sưu tập nút ở định dạng lưới trong jQuery mobile. |
3 | Lưới đáp ứng tùy chỉnh Kiểu lưới cơ bản có thể dễ dàng mở rộng sang bố cục đáp ứng tùy chỉnh bằng cách sử dụng truy vấn phương tiện trong CSS. |
Tiện ích con là một tiện ích nhỏ hoặc quyền kiểm soát ứng dụng di động jQuery của bạn. Các widget có thể rất tiện dụng vì chúng cho phép bạn đặt các ứng dụng yêu thích của mình trên màn hình chính để truy cập nhanh chóng.
Bảng sau trình bày chi tiết các loại Widget.
Sr.No. | Loại & Mô tả |
---|---|
1 | nút Nó chỉ định nút có thể nhấp bao gồm nội dung như văn bản hoặc hình ảnh. |
2 | Hộp kiểm Hộp kiểm được sử dụng khi bắt buộc phải chọn nhiều tùy chọn. |
3 | Hộp đài Nút radio được sử dụng khi trong số nhiều tùy chọn, chỉ cần chọn một tùy chọn. |
4 | Bảng chọn ngày Nó được tập trung vào đầu vào để mở lịch tương tác trong một lớp phủ nhỏ. |
5 | Có thể thu gọn Collapsible cho phép bạn mở rộng hoặc thu gọn nội dung bất cứ khi nào nhấp vào nó. Nó rất hữu ích cho thiết bị di động, trình bày một nội dung ngắn gọn. |
6 | Nhóm kiểm soát Nhóm điều khiển cung cấp một tập hợp các nút để chỉ định một khối duy nhất trông giống như một thành phần điều hướng. |
7 | Có thể lọc Bằng cách sử dụng thuộc tính data-filter = "true" , bạn có thể lọc phần tử con của bất kỳ phần tử nào. |
số 8 | Flipswitch Flip Switch cho phép bạn tắt / bật hoặc đúng / sai công tắc bằng cách nhấp vào nó để nhập kiểu boolean. |
9 | Listview Mục đích của thành phần listview là hiển thị nội dung phức tạp và tùy chỉnh trong danh sách. |
10 | Bộ tải JQuery Mobile cung cấp các cách tải trạng thái khác nhau cho một phần tử. |
11 | Navbar Tiện ích thanh điều hướng là một tập hợp các nút liên kết bạn đến các trang hoặc phần web khác. |
12 | Panels Các bảng được sử dụng để hiển thị các thành phần DOM trong hộp. |
13 | Cửa sổ bật lên Popup là một giao diện người dùng xuất hiện trong một cửa sổ nhỏ để hiển thị văn bản, hình ảnh và các nội dung khác. |
14 | Rangeslider Tiện ích con Rangeslider cung cấp cho bạn một cặp tay cầm cho phép bạn chọn phạm vi giá trị số. |
15 | Selectmenu Menu chọn cung cấp các tùy chọn khác nhau dưới dạng danh sách thả xuống, từ đó người dùng có thể chọn một hoặc nhiều tùy chọn. |
16 | Thanh trượt Thanh trượt cho phép bạn chọn một giá trị bằng cách trượt tay cầm của thanh trượt. |
17 | Bàn jQuery Mobile sử dụng bảng để biểu diễn dữ liệu dưới dạng hàng và cột, tức là hiển thị dữ liệu ở định dạng bảng. |
18 | Các tab Tiện ích tab là tiện ích mở rộng của jQuery ui tab, chấp nhận tất cả các phương pháp và tùy chọn. |
19 | Textinput Thẻ <input> được sử dụng để khai báo một phần tử đầu vào, một điều khiển cho phép người dùng nhập dữ liệu. |
20 | Thanh công cụ Tiện ích thanh công cụ di động jQuery cho phép bạn tạo đầu trang và chân trang. |
jQuery Mobile cho phép tạo các trang web động. Bằng cách sử dụng các sự kiện, bạn có thể thiết lập quy trình hướng sự kiện trên các phần tử, được kích hoạt bởi sự tương tác của người dùng như nhấp chuột, di chuột vào một phần tử, nhấn phím trên bàn phím, v.v.
Bảng sau liệt kê một số sự kiện dành cho thiết bị di động được jQuery Mobile hỗ trợ.
Sr.No. | Sự kiện & Mô tả |
---|---|
1 | Sự kiện trên điện thoại di động jQuery Nó phản hồi tương tác của người dùng khi người dùng nhấp vào một trang nhất định hoặc di chuột qua một phần tử, v.v. |
2 | Sự kiện jQuery Touch Nó cung cấp các sự kiện cảm ứng khi người dùng chạm vào màn hình. |
3 | Sự kiện cuộn jQuery Nó kích hoạt các sự kiện cuộn khi người dùng cuộn lên và cuộn xuống. |
4 | Sự kiện định hướng jQuery Nó kích hoạt sự kiện định hướng khi người dùng xoay thiết bị theo chiều dọc hoặc chiều ngang. |
5 | Sự kiện trang jQuery Nó cung cấp các sự kiện trang khi người dùng ẩn, tạo, tải hoặc dỡ trang. |
Việc tạo biểu mẫu rất dễ dàng và rất linh hoạt, được xây dựng với sự kết hợp của các phần tử biểu mẫu và các nút được tiêu chuẩn hóa.
Bảng sau trình bày chi tiết các loại biểu mẫu.
Sr.No. | Loại & Mô tả |
---|---|
1 | Biểu mẫu cơ bản jQuery Mobile cung cấp hệ thống bố cục mạnh mẽ, dễ dàng và linh hoạt cho Biểu mẫu, kết hợp các kiểu biểu mẫu, nút nhập và hỗ trợ thanh trượt. |
2 | Đầu vào biểu mẫu Thẻ <input> là một điều khiển cho phép người dùng nhập dữ liệu. |
3 | Chọn biểu mẫu Ở dạng tùy chọn, một danh sách thả xuống được cung cấp cho menu chọn. |
4 | Thanh trượt biểu mẫu Thanh trượt cho phép bạn chọn một giá trị bằng cách trượt tay cầm của thanh trượt. |
5 | Làm mới và tự động khởi tạo các phần tử biểu mẫu Phương thức làm mới được sử dụng để tự cập nhật trạng thái mới của điều khiển biểu mẫu và cập nhật điều khiển biểu mẫu bằng JavaScript. |
Nó đặt các loại chủ đề khác nhau trên các nút, thanh điều hướng, khối, liên kết, v.v. Bạn có thể đặt chủ đề bằng thuộc tính data-theme .
Bảng sau mô tả việc sử dụng chức năng chủ đề trong các lĩnh vực khác nhau được jQuery Mobile hỗ trợ.
Sr.No. | Chức năng & Mô tả |
---|---|
1 | Chủ đề Nó cung cấp hai loại chủ đề khác nhau như chủ đề "a" và chủ đề "b" để tùy chỉnh giao diện của ứng dụng. |
2 | Chủ đề Đầu trang và Chân trang trong Hộp thoại Đặt chủ đề cho đầu trang và chân trang trong hộp thoại. |
3 | Các nút chủ đề, biểu tượng và cửa sổ bật lên Chỉ định chủ đề cho các nút, biểu tượng và cửa sổ bật lên. |
4 | Các nút chủ đề trong Đầu trang và Chân trang Hiển thị chủ đề cho các nút trong đầu trang và chân trang. |
5 | Thanh điều hướng chủ đề Áp dụng chủ đề cho thanh điều hướng trong đầu trang hoặc chân trang. |
6 | Bảng chủ đề Bạn có thể áp dụng chủ đề cho bảng điều khiển. |
7 | Nút có thể thu gọn theo chủ đề và các nút tách Hiển thị chủ đề cho các nút có thể thu gọn và chia nhỏ. |
số 8 | Danh sách chủ đề và danh sách có thể thu gọn Hiển thị chủ đề cho danh sách và danh sách có thể thu gọn. |
9 | Biểu mẫu có thể thu gọn Bạn có thể áp dụng chủ đề cho các biểu mẫu. |
jQuery CSS Classes
Bạn có thể sử dụng các loại lớp CSS khác nhau để tạo kiểu cho các phần tử như được mô tả trong các phần bên dưới.
Lớp học toàn cầu
Các lớp sau có thể được sử dụng làm lớp toàn cục trên các widget jQuery Mobile:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-corner-all Nó hiển thị các phần tử với các góc tròn. |
2 | ui-shadow Nó hiển thị bóng cho các phần tử. |
3 | ui-overlay-shadow Nó hiển thị bóng lớp phủ cho các phần tử. |
4 | ui-mini Nó hiển thị các phần tử nhỏ hơn. |
Các lớp nút
Bảng sau liệt kê các lớp nút được sử dụng với các phần tử neo hoặc nút:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-btn Nó chỉ định rằng phần tử sẽ được tạo kiểu như nút. |
2 | ui-btn-inline Nó hiển thị nút dưới dạng phần tử nội tuyến giúp tiết kiệm không gian cần thiết cho nhãn. |
3 | ui-btn-icon-top Nó đặt biểu tượng phía trên văn bản. |
4 | ui-btn-icon-right Nó đặt biểu tượng bên phải của văn bản. |
5 | ui-btn-icon-bottom Nó đặt biểu tượng bên dưới văn bản. |
6 | ui-btn-icon-left Nó đặt biểu tượng bên trái của văn bản. |
7 | ui-btn-icon-notext Nó hiển thị biểu tượng duy nhất. |
số 8 | ui-btn-a|b Nó hiển thị màu của nút ("a" sẽ là màu nền mặc định tức là màu xám và "b" sẽ thay đổi màu nền thành màu đen). |
Lớp biểu tượng
Bảng sau liệt kê các lớp biểu tượng được sử dụng với các phần tử neo hoặc nút:
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-icon-action Nó hiển thị biểu tượng hành động. |
2 | ui-icon-alert Nó hiển thị dấu chấm than bên trong một hình tam giác. |
3 | ui-icon-arrow-d-l Nó chỉ định xuống bằng mũi tên trái. |
4 | ui-icon-arrow-d-r Nó chỉ định xuống bằng mũi tên phải. |
5 | ui-icon-arrow-u-l Nó chỉ định lên bằng mũi tên trái. |
6 | ui-icon-arrow-u-r Nó chỉ định lên bằng mũi tên phải. |
7 | ui-icon-arrow-l Nó chỉ định mũi tên bên trái. |
số 8 | ui-icon-arrow-r Nó chỉ định mũi tên bên phải. |
9 | ui-icon-arrow-u Nó chỉ định mũi tên lên. |
10 | ui-icon-arrow-d Nó chỉ định mũi tên xuống. |
11 | ui-icon-bars Nó hiển thị 3 thanh ngang ở trên thanh kia. |
12 | ui-icon-bullets Nó hiển thị 3 viên đạn nằm ngang phía trên viên đạn kia. |
13 | ui-icon-carat-d Nó hiển thị carat để giảm xuống. |
14 | ui-icon-carat-l Nó hiển thị carat bên trái. |
15 | ui-icon-carat-r Nó hiển thị carat ở bên phải. |
16 | ui-icon-carat-u Nó hiển thị carat lên đến. |
17 | ui-icon-check Nó hiển thị biểu tượng dấu kiểm. |
18 | ui-icon-comment Nó chỉ định bình luận hoặc tin nhắn. |
19 | ui-icon-forbidden Nó hiển thị biểu tượng bị cấm. |
20 | ui-icon-forward Nó chỉ định biểu tượng chuyển tiếp. |
21 | ui-icon-navigation Nó chỉ định biểu tượng điều hướng. |
22 | ui-icon-recycle Nó hiển thị biểu tượng tái chế. |
23 | ui-icon-refresh Nó hiển thị biểu tượng làm mới. |
24 | ui-icon-tag Nó chỉ ra biểu tượng thẻ. |
25 | ui-icon-video Nó cho biết biểu tượng video hoặc máy ảnh. |
Lớp chủ đề
Nó cung cấp hai loại chủ đề khác nhau như chủ đề "a" và chủ đề "b" để tùy chỉnh giao diện của ứng dụng. Bạn có thể tạo các lớp chủ đề của riêng mình bằng cách thêm ký tự mẫu (az). Bảng sau liệt kê các lớp chủ đề được chỉ định từ ký tự a đến z.
Sr.No. | Lớp & Mô tả |
---|---|
1 | ui-bar-(a-z) Nó hiển thị màu cho thanh bao gồm đầu trang, chân trang và các thanh khác trong trang. |
2 | ui-body-(a-z) Nó hiển thị màu cho khối nội dung bao gồm danh sách, cửa sổ bật lên, thanh trượt, bảng điều khiển, trình tải, v.v. |
3 | ui-btn-(a-z) Nó hiển thị màu cho nút. |
4 | ui-group-theme-(a-z) Nó hiển thị màu cho nhóm điều khiển, chế độ xem danh sách và tập hợp có thể thu gọn. |
5 | ui-overlay-(a-z) Nó hiển thị màu nền cho hộp chứa cửa sổ bật lên, hộp thoại và trang. |
6 | ui-page-theme-(a-z) Nó hiển thị màu cho các trang. |
Lớp lưới
Bảng sau liệt kê các lớp lưới được sử dụng với chiều rộng bằng nhau, không có đường viền, nền, lề hoặc phần đệm.
Sr.No. | Lớp lưới | Cột | Độ rộng cột | Tương ứng với |
---|---|---|---|---|
1 | ui-lưới-solo | 1 | 100% | ui-block-a |
2 | ui-lưới-a | 2 | 50% / 50% | ui-block-a | b |
3 | ui-lưới-b | 3 | 33% / 33% / 33% | ui-block-a | b | c |
4 | ui-lưới-c | 4 | 25% / 25% / 25% / 25% | ui-block-a | b | c | d |
5 | ui-lưới-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a | b | c | d | e |
Cái nút
Nó chỉ định một nút có thể nhấp được bao gồm nội dung như văn bản hoặc hình ảnh bằng cách sử dụng lớp ui-btn . Nó không được dùng trong phiên bản 1.4. Sử dụng thuộc tính ui-btn thay vì sử dụng thuộc tính data-role = "button" .
Bảng sau liệt kê các phần tử nút được sử dụng với thuộc tính dữ liệu.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-corners Nó xác định xem nút có nên chứa các góc tròn hay không. |
sự thật | sai |
2 | data-icon Nó xác định biểu tượng của nút. |
Mặc định là không có biểu tượng |
3 | data-iconpos Nó xác định vị trí của biểu tượng. |
trái | đúng | đầu trang | đáy |
4 | data-iconshadow Nó xác định xem biểu tượng của nút có nên chứa bóng hay không. |
sự thật | sai |
5 | data-inline Nó xác định xem nút có phải là nội tuyến hay không. |
sự thật | sai |
6 | data-mini Nó xác định xem nút sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
7 | data-shadow Nó xác định xem nút có nên chứa bóng hay không. |
sự thật | sai |
số 8 | data-theme Nó hiển thị màu chủ đề cho nút. |
chữ cái (az) |
Hộp kiểm
Bảng sau liệt kê các phần tử hộp kiểm được sử dụng với type = "checkbox".
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-mini Nó xác định xem hộp kiểm sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
2 | data-role Nó ngừng tạo kiểu các hộp kiểm dưới dạng các nút. |
không ai |
3 | data-theme Nó hiển thị màu chủ đề cho hộp kiểm. |
chữ cái (az) |
Có thể thu gọn
Bảng sau liệt kê các phần tử có thể thu gọn được sử dụng với data-role = "collapsible" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-collapsed Nó cho biết nội dung nên được đóng lại hay mở rộng. |
sự thật | sai |
2 | data-collapsed-cue-text Nó hiển thị phản hồi cho người dùng với phần mềm đọc màn hình. |
Nội dung mặc định là thu gọn |
3 | data-collapsed-icon Nó xác định biểu tượng của nút đóng mở. |
Biểu tượng mặc định là "dấu cộng" |
4 | data-content-theme Nó hiển thị màu chủ đề cho nội dung có thể thu gọn. |
chữ cái (az) |
5 | data-expanded-cue-text Nó hiển thị phản hồi cho người dùng với phần mềm đọc màn hình. |
Mặc định đang mở rộng nội dung |
6 | data-expanded-icon Nó hiển thị nút có thể thu gọn khi bạn mở rộng nội dung. |
Biểu tượng mặc định là "dấu trừ" |
7 | data-iconpos Nó xác định vị trí của biểu tượng. |
trái | đúng | đầu trang | đáy |
số 8 | data-inset Nó xác định xem nút đóng mở có hiển thị với các góc và lề tròn hay không. |
sự thật | sai |
9 | data-mini Nó xác định xem các nút có thể thu gọn sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
10 | data-theme Nó hiển thị màu chủ đề cho nút đóng mở. |
chữ cái (az) |
Bộ có thể thu gọn
Bảng sau liệt kê các phần tử tập hợp có thể thu gọn được sử dụng với data-role = "collapsibleset" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-collapsed-icon Nó xác định biểu tượng của nút đóng mở. |
Biểu tượng mặc định là "dấu cộng" |
2 | data-content-theme Nó hiển thị màu chủ đề cho nội dung có thể thu gọn. |
chữ cái (az) |
3 | data-expanded-icon Nó hiển thị nút có thể thu gọn khi bạn mở rộng nội dung. |
Biểu tượng mặc định là "dấu trừ" |
4 | data-iconpos Nó xác định vị trí của biểu tượng. |
trái | đúng | đầu trang | đáy |
5 | data-inset Nó xác định xem nút đóng mở có hiển thị với các góc và lề tròn hay không. |
sự thật | sai |
6 | data-mini Nó xác định xem các nút có thể thu gọn sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
7 | data-theme Nó hiển thị màu chủ đề cho nút đóng mở. |
chữ cái (az) |
Nhóm kiểm soát
Bảng sau liệt kê các phần tử Nhóm điều khiển được sử dụng với data-role = "controlgroup" thuộc tính -
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-exclude-invisible Nó xác định xem có nên loại trừ các trẻ em không nhìn thấy trong việc gán các góc tròn hay không. |
sự thật | sai |
2 | data-mini Nó xác định xem nhóm sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
3 | data-theme Nó hiển thị màu chủ đề cho nhóm điều khiển. |
chữ cái (az) |
4 | data-type Nó cho biết nhóm sẽ hiển thị ở định dạng ngang hay dọc. |
ngang | theo chiều dọc |
Hộp thoại
Bảng sau liệt kê các phần tử hộp thoại được sử dụng với data-dialog="true" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-close-btn Nó xác định vị trí của nút đóng. |
trái | đúng | không ai |
2 | data-close-btn-text Nó xác định văn bản cho nút đóng. |
bản văn |
3 | data-corners Nó xác định xem hộp thoại có nên hiển thị với các góc tròn hay không. |
sự thật | sai |
4 | data-dom-cache Nó cho biết liệu bộ nhớ cache DOM có phải xóa hay không cho các trang riêng lẻ. |
sự thật | sai |
5 | data-overlay-theme Nó xác định màu lớp phủ của trang hộp thoại. |
chữ cái (az) |
6 | data-theme Nó xác định màu chủ đề của trang hộp thoại. |
chữ cái (az) |
7 | data-title Nó xác định tiêu đề của trang hộp thoại. |
bản văn |
Cải tiến
Bảng sau liệt kê các phần tử nâng cao được sử dụng với data-enhance="false" or data-ajax = "false" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-enhance Bạn có thể tạo kiểu cho trang bằng cách đặt thuộc tính này thành "true". Bạn không thể tạo kiểu cho trang nếu nó được đặt thành "false". |
sự thật | sai |
2 | data-ajax Nó cho biết liệu các trang có phải tải từ Ajax hay không. |
sự thật | sai |
Thanh công cụ cố định
Bảng sau liệt kê các phần tử thanh công cụ được sử dụng với data-position = "fixed" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-disable-page-zoom Nó xác định xem người dùng có thể mở rộng / thu phóng trang hay không. |
sự thật | sai |
2 | data-fullscreen Nó xác định các thanh công cụ phải được đặt ở trên cùng và / hoặc dưới cùng. |
sự thật | sai |
3 | data-tap-toggle Nó cho biết liệu người dùng có thể chuyển đổi chế độ hiển thị của thanh công cụ trên các vòi hay không. |
sự thật | sai |
4 | data-transition Nó hiển thị hiệu ứng chuyển tiếp khi bạn chạm hoặc nhấp vào phần tử. |
trượt | phai | không ai |
5 | data-update-page-padding Nó cập nhật phần đệm của trang bằng cách sử dụng các sự kiện thay đổi kích thước, chuyển tiếp và cập nhật bố cục. |
sự thật | sai |
6 | data-visible-on-page-show Nó xác định khả năng hiển thị của thanh công cụ khi trang mẹ được hiển thị. |
sự thật | sai |
Công tắc chuyển đổi lật
Bảng sau liệt kê các phần tử chuyển đổi lật được sử dụng với data-role = "flipswitch" thuộc tính -
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-mini Nó xác định xem công tắc sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
2 | data-on-text Nó xác định văn bản "bật" trên công tắc lật. |
Mặc định là "bật" |
3 | data-off-text Nó xác định văn bản "tắt" trên công tắc lật. |
Mặc định là "tắt" |
Chân trang
Bảng sau liệt kê các phần tử chân trang được sử dụng với thuộc tính data-role = "footer" -
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-id Nó xác định ID duy nhất. |
bản văn |
2 | data-position Nó xác định xem chân trang nên được đặt ở cuối hay nội dòng với nội dung trang. |
nội tuyến | đã sửa |
3 | data-fullscreen Nó xác định xem chân trang có nên được đặt ở cuối và trên nội dung trang hay không. |
sự thật | sai |
4 | data-theme Nó xác định màu chủ đề của footer. |
chữ cái (az) |
Tiêu đề
Bảng sau liệt kê các phần tử tiêu đề được sử dụng với data-role = "header" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-id Nó xác định ID duy nhất. |
bản văn |
2 | data-position Nó xác định xem tiêu đề nên được đặt ở dưới cùng hay nội dòng với nội dung trang. |
nội tuyến | đã sửa |
3 | data-fullscreen Nó xác định xem tiêu đề có nên được đặt ở cuối và trên nội dung trang hay không. |
sự thật | sai |
4 | data-theme Nó xác định màu chủ đề của tiêu đề. |
chữ cái (az) |
Đầu vào
Bảng sau liệt kê các phần tử đầu vào được sử dụng với type = "text|search|etc" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-clear-btn Nó xác định liệu phần tử đầu vào có nên chứa nút rõ ràng hay không. |
sự thật | sai |
2 | data-clear-btn-text Nó xác định văn bản cho nút rõ ràng. |
bản văn |
3 | data-mini Nó xác định xem đầu vào sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
4 | data-role Nó ngừng tạo kiểu đầu vào hoặc các vùng văn bản dưới dạng các nút. |
không ai |
5 | data-theme Nó xác định màu chủ đề của phần tử đầu vào. |
chữ cái (az) |
Liên kết
Bảng sau liệt kê các phần tử liên kết được sử dụng với jQuery Mobile.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-ajax Nó cho biết liệu các trang có phải được tải qua Ajax hay không. |
sự thật | sai |
2 | data-direction Nó được sử dụng để chuyển đổi ngược lại. |
đảo ngược |
3 | data-dom-cache Nó cho biết liệu bộ đệm jQuery DOM có phải rõ ràng hay không cho các trang. |
sự thật | sai |
4 | data-prefetch Nó được sử dụng để tìm nạp trước các trang vào DOM. |
sự thật | sai |
5 | data-rel Nó chỉ định hành vi của liên kết. |
trở lại | hộp thoại | bên ngoài | bật lên |
6 | data-transition Nó xác định quá trình chuyển đổi từ trang này sang trang khác. |
phai | lật | dòng chảy | pop | trượt | trượt xuống | slidefade | slideup | lần lượt | không ai |
7 | data-position-to Nó xác định vị trí của các hộp bật lên. |
xuất xứ | bộ chọn jQuery | cửa sổ |
Danh sách
Bảng sau hiển thị các phần tử danh sách được sử dụng với data-role = "listview" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-autodividers Nó tự động chia danh sách. |
sự thật | sai |
2 | data-count-theme Nó xác định màu chủ đề của phần tử đếm. |
chữ cái (az) |
3 | data-divider-theme Nó xác định màu chủ đề cho bộ chia danh sách. |
chữ cái (az) |
4 | data-filter Nó được sử dụng để lọc các giá trị danh sách trong hộp tìm kiếm. |
sự thật | sai |
5 | data-filter-placeholder Nó xác định một số văn bản bên trong hộp tìm kiếm. |
bản văn |
6 | data-filter-theme Nó xác định màu chủ đề cho bộ lọc tìm kiếm. |
chữ cái (az) |
7 | data-icon Nó cung cấp biểu tượng cho danh sách. |
Mặc định là không có biểu tượng |
số 8 | data-inset Nó xác định xem danh sách có nên hiển thị với các góc và lề tròn hay không. |
sự thật | sai |
9 | data-split-icon Nó xác định biểu tượng cho nút chia. |
Biểu tượng mặc định là "arrow-r" |
10 | data-split-theme Nó xác định màu chủ đề cho nút tách. |
chữ cái (az) |
11 | data-theme Nó xác định màu chủ đề cho danh sách. |
chữ cái (az) |
Liệt kê Mục
Bảng sau hiển thị các phần tử mục danh sách được sử dụng với data-role = "listview" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-filtertext Nó được sử dụng để lọc các giá trị danh sách bằng văn bản trong hộp tìm kiếm. |
bản văn |
2 | data-icon Nó cung cấp biểu tượng cho mục danh sách. |
Mặc định là không có biểu tượng |
3 | data-role Nó xác định dải phân cách cho các mục danh sách. |
bộ chia danh sách |
4 | data-theme Nó xác định màu chủ đề cho mục danh sách. |
chữ cái (az) |
Navbar
Bảng sau liệt kê các phần tử thanh điều hướng được sử dụng với data-role = "navbar" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-icon Nó cung cấp biểu tượng cho mục danh sách. |
Mặc định là không có biểu tượng |
2 | data-iconpos Nó xác định vị trí cho biểu tượng. |
trái | đúng | đầu trang | đáy | không có văn bản |
Trang
Bảng sau liệt kê các phần tử trang được sử dụng với data-role = "page" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-dom-cache Nó cho biết liệu bộ nhớ cache DOM có phải xóa hay không cho các trang riêng lẻ. |
sự thật | sai |
2 | data-overlay-theme Nó xác định màu lớp phủ của các trang hộp thoại. |
chữ cái (az) |
3 | data-theme Nó xác định màu chủ đề cho trang. |
chữ cái (az) |
4 | data-title Nó cung cấp tiêu đề cho trang. |
Mặc định là không có biểu tượng |
5 | data-url Nó được sử dụng để cập nhật URL. |
url |
Cửa sổ bật lên
Bảng sau liệt kê các phần tử bật lên được sử dụng với data-role = "popup" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-corners Nó xác định xem cửa sổ bật lên có nên hiển thị với các góc và lề tròn hay không. |
sự thật | sai |
2 | data-dismissible Nó xác định xem có nên đóng cửa sổ bật lên bằng cách nhấp vào bên ngoài hay không. |
sự thật | sai |
3 | data-history Nó xác định xem cửa sổ bật lên có hiển thị lịch sử của mục khi được mở hay không. |
sự thật | sai |
4 | data-overlay-theme Nó xác định màu lớp phủ của hộp bật lên. |
chữ cái (az) |
5 | data-shadow Nó hiển thị bóng cho hộp bật lên. |
sự thật | sai |
6 | data-theme Nó xác định màu chủ đề cho hộp bật lên. |
chữ cái (az) |
7 | data-tolerance Nó xác định các cạnh của cửa sổ. |
30, 15, 30, 15 |
Nút radio
Bảng sau liệt kê các phần tử nút radio được sử dụng với type = "radio" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-mini Nó xác định xem nút sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
2 | data-role Nó dừng kiểu dáng của các nút radio dưới dạng các nút nâng cao. |
không ai |
3 | data-theme Nó xác định màu chủ đề cho nút radio. |
chữ cái (az) |
Lựa chọn
Bảng sau liệt kê các phần tử được chọn được sử dụng với jQuery Mobile.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-icon Nó cung cấp biểu tượng cho phần tử được chọn. |
Mặc định là "arrow-d" |
2 | data-iconpos Nó xác định vị trí của biểu tượng. |
trái | đúng | đầu trang | đáy |
3 | data-inline Nó xác định xem nút có phải là nội tuyến hay không. |
sự thật | sai |
4 | data-mini Nó xác định xem lựa chọn sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
5 | data-native-menu Nó sử dụng menu tùy chỉnh khi nó đã được đặt thành false. |
sự thật | sai |
6 | data-overlay-theme Nó xác định màu lớp phủ cho menu chọn tùy chỉnh. |
chữ cái (az) |
7 | data-placeholder Nó được sử dụng để đặt một phần tử tùy chọn của lựa chọn không phải gốc. |
sự thật | sai |
số 8 | data-role Nó dừng việc tạo kiểu của các phần tử được chọn dưới dạng các nút. |
không ai |
9 | data-theme Nó hiển thị màu chủ đề cho các phần tử được chọn. |
chữ cái (az) |
Thanh trượt
Bảng sau liệt kê các phần tử thanh trượt được sử dụng với type = "range" thuộc tính.
Sr.No. | Thuộc tính và mô tả dữ liệu | Giá trị |
---|---|---|
1 | data-highlight Nó làm nổi bật thanh trượt. |
sự thật | sai |
2 | data-mini Nó xác định xem thanh trượt sẽ hiển thị ở kích thước nhỏ hơn hay kích thước thông thường. |
sự thật | sai |
3 | data-role Nó dừng kiểu dáng của các điều khiển thanh trượt dưới dạng các nút. |
không ai |
4 | data-theme Nó hiển thị màu chủ đề cho điều khiển thanh trượt. |
chữ cái (az) |
5 | data-track-theme Nó hiển thị màu chủ đề cho rãnh trượt. |
chữ cái (az) |