Sử dụng các thành phần giao diện người dùng trong jQuery Mobile docx

Sử dụng các thành phần giao diện người dùng trong jQuery Mobile Các hộp thoại và các cửa sổ bật lên Một hộp thoại là một phần tử giao diện người dùng quan trọng, nhắc người dùng đáp ứng hay chỉ đơn giản là hiển thị thông tin. Các hộp thoại hầu như được sử dụng thường xuyên để đưa ra các tùy chọn cho những người dùng để thực hiện một số loại lệnh dựa trên đáp ứng của người dùng. Thông thường, bạn có thể đưa ra các hộp thoại theo một trong hai cách — là một cửa sổ phương thức - modal hoặc không theo phương thức - non-modal (với jQuery Mobile, các hộp thoại này được trình bày như một hộp thoại phương thức). Các hộp thoại phương thức chặn không cho người dùng tương tác với trang web bên dưới hộp thoại, đòi hỏi một đáp ứng từ những người dùng trước khi họ có thể tiếp tục. Để tạo ra một hộp thoại với jQuery Mobile, bạn phải sử dụng thuộc tính data-rel trên một siêu liên kết mà bạn muốn mở như một cửa sổ dialog (hộp thoại) và gán cho nó giá trị là dialog. Đoạn mã dưới đây cho thấy cách chuyển đổi một siêu liên kết đơn giản đến một trang web thành một siêu liên kết sẽ mở trang web liên quan như là một hộp thoại: <a href="dialog.html" data-rel="dialog">Open dialog</a> Theo mặc định, khung công tác jQuery Mobile bổ sung các góc tròn, một lề trang và một nền tối cho trang web để làm cho nó xuất hiện như một hộp thoại đặt lên trên trang web đó. Có một số cách để đóng một hộp thoại. Tùy chọn đầu tiên chỉ đơn giản là liên kết đến một trang khác, có thể liên quan đến đáp ứng từ người dùng. Đây sẽ là một tùy chọn tốt cho bất kỳ loại xử lý nào cần diễn ra — ví dụ, một nút ấn Save (Lưu) có thể liên kết đến một trang web để lưu một số loại thông tin vào một cơ sở dữ liệu và sau đó trả về trang web cha mẹ ban đầu với một thông báo xác nhận. Tùy chọn thứ hai là sử dụng thuộc tính data-rel trên siêu liên kết trong hộp thoại của bạn và thiết lập giá trị của nó là back, như trong đoạn mã dưới đây. Đây là một tùy chọn tốt khi kèm theo một nút ấn Cancel (Hủy bỏ) trong hộp thoại của bạn. <a href="parent.html" data-rel="back">Cancel</a> Thật không may, tùy chọn này không làm việc trên các thiết bị không hỗ trợ JavaScript. Tùy chọn cuối cùng sẽ sử dụng JavaScript để gọi trực tiếp phương thức close (đóng lại) của hộp thoại: $('#my-dialog').dialog('close'); Bạn cũng có thể sử dụng một số cách chuyển tiếp cho các hộp thoại để thêm hương vị vào trang web di động của mình. Bạn có thể thiết lập các chuyển tiếp bằng cách bao gồm một thuộc tính data-transition cho siêu liên kết mà bạn đang chuyển đổi thành hộp thoại: <a href="dialog.html" data-rel="dialog" data- transition="pop">Open dialog</a> Các cách chuyển tiếp dữ liệu hiện có là pop (bật lên), slidedown (trượt xuống) và flip (lật); mỗi hàm có hành vi đúng như bạn giả định. Chuyển tiếp phổ biến nhất gắn với hộp thoại là pop, nhưng tất nhiên có những trường hợp có thể áp dụng các chuyển tiếp khác. Về đầu trang Các thanh công cụ Khung công tác jQuery Mobile gồm có các phần đầu trang và các phần chân trang như các thanh công cụ tiêu chuẩn của nó; tuy nhiên, các thanh công cụ cũng có thể được sử dụng để hiển thị dẫn hướng, như với navbar (thanh dẫn hướng). Cách sử dụng mặc định cho phần đầu trang trong jQuery Mobile là dùng làm tiêu đề trang được neo trên đầu của trang web; phần chân trang hầu hết thường là phần tử cuối cùng trong một trang web và gồm các nội dung như thông tin bản quyền, các siêu liên kết bổ sung và v.v Việc tạo phần đầu trang và phần chân trang rất dễ dàng, chỉ cần thêm một thuộc tính data-role vào một phần tử HTML. Liệt kê 1 cho thấy để tạo thanh công cụ Header và Footer. Liệt kê 1. Tạo một thanh công cụ đầu trang và chân trang với khung công tác jQuery Mobile <div data-role="header"> <h1>My Page Title</h1> </div> <! Some page content > <div data-role="footer"> <p>Copyright notice</p> </div> Bạn có thể tùy chỉnh các phần đầu trang và chân trang bằng CSS hoặc bạn có thể sử dụng một số các thuộc tính data- có sẵn, chẳng hạn như data-position (vị trí-dữ liệu), thiết lập hành vi định vị của thanh công cụ. Giá trị mặc định với thuộc tính này là inline (nội dòng), nhưng bạn cũng có thể thiết lập giá trị của nó là fixed (cố định) để duy trì một thanh công cụ, ví dụ như đầu trang, ở một vị trí cụ thể, ngay cả khi cuộn trang web đó. Một vị trí khác đáng nhắc đến là fullscreen (toàn màn hình). Chế độ fullscreen giống như fixed, nhưng các thanh công cụ không xuất hiện trên trang web cho đến khi người dùng bắt đầu tương tác với trang đó. Khi người dùng tương tác với một trang web, các thanh công cụ xuất hiện, cho phép người dùng tương tác với chúng, rồi biến mất khi người dùng ngừng tương tác với trang đó (Liệt kê 2). Tùy chọn này rất có ích khi hiển thị phát lại đoạn video, thư viện ảnh hoặc các thứ tương tự. Liệt kê 2. Thiết lập một thanh công cụ đầu trang và chân trang ở chế độ toàn màn hình với khung công tác jQuery Mobile <div data-role="header" data- position="fullscreen"> <h1>My Page Title</h1> </div> <! Some page content > <div data-role="footer" data- position="fullscreen"> <p>Copyright notice</p> </div> Thanh dẫn hướng navbar được sử dụng để hiển thị lên đến năm nút ấn hoặc mục dẫn hướng trong một phần đầu trang hay chân trang. Tùy thuộc vào bạn thêm bao nhiêu nút ấn vào navbar, nó sẽ phân phối đồng đều các nút ấn sao cho tất cả nút ấn đều có cùng một kích thước. Để tạo một navbar, bạn có thể chỉ cần thêm một thuộc tính data-role vào một phần tử bao ngoài một danh sách và thiết lập giá trị của nó là navbar (Liệt kê 3). Danh sách này được chuyển đổi động thành một thanh dẫn hướng nằm ngang có trạng thái di chuột, trạng thái tĩnh và trạng thái hoạt động, tất cả có thể được tùy chỉnh khi sử dụng khung công tác chủ đề jQuery Mobile. Liệt kê 3. Chuyển đổi một danh sách sang một thanh chuyển hướng khi sử dụng navbar <div data-role="header" data- position="fullscreen"> <div data-role="navbar"> <ul> <li><a href="#">Nav item 1</a></li> <li><a href="#">Nav item 2</a></li> </ul> </div> </div> Một tính năng tốt đẹp khác của navbar là bạn có thể đưa thêm các biểu tượng tùy chỉnh vào trong mỗi nút ấn. Khung công tác jQuery Mobile gồm có một tập các biểu tượng di động tiêu chuẩn, có thể được sử dụng thông qua thuộc tính data-icon hoặc bạn có thể sử dụng bất kỳ biểu tượng tùy chỉnh nào mà bạn tạo ra hoặc mua lại. Về đầu trang Các tùy chọn bố trí Nội dung theo định dạng là một biện pháp quan trọng để cung cấp cho người dùng một cách dễ dùng để tham khảo và thu thập thông tin mà bạn đang cung cấp trên trang web của mình. Với sự gia tăng về lưu lượng web di động và sự cần thiết với các phiên bản trang web di động, nội dung theo định dạng ngày càng trở nên quan trọng hơn. Chúng ta có thể không còn chỉ dựa vào những người dùng của mình ngồi tại bàn làm việc và dành thời gian tương tác với trang web của mình nữa. Nhưng người dùng đang di chuyển và nội dụng theo định dạng hấp dẫn, đơn giản trở nên quan trọng hơn bao giờ hết. Khi định dạng nội dung cho một trang web di động, điều quan trọng cần nhớ là hầu hết các thiết bị di động có màn hình hẹp. Nói vậy, nhưng vẫn còn có rất nhiều tình huống yêu cầu các lưới cột. jQuery Mobile gồm có một lưới bố trí mà bạn có thể sử dụng dễ dàng để tạo ra một lưới dữ liệu thông qua một lớp CSS (Liệt kê 4). Liệt kê 4. Sử dụng một lưới bố trí để tạo ra các cột <div class="ui-grid-a"> <div class="ui-block-a"> Left column </div> <div class="ui-block-b"> Right column </div> </div> Lớp CSS được sử dụng theo mặc định để tạo ra một lưới từ một nhóm các phần tử HTML là lớp ui-grid-*. Dấu hoa thị (*) đại diện cho chủ đề bạn chọn để sử dụng với lưới của bạn. (Để biết thêm thông tin về hệ thống tạo chủ đề, xem phần Tài nguyên .) Bạn có thể tạo ra bao nhiêu cột tùy ý bạn, nhưng tôi khuyên bạn nên sử dụng chỉ nhiều nhất là hai cột thôi và cũng chỉ những khi cần thiết. Một cách tiện dụng khác để định dạng nội dung là chỉ hiển thị một phần của nội dung, cung cấp cho người dùng một tổng quan và tùy chọn để đọc thêm. Do hầu hết các thiết bị di động có một màn hình rất nhỏ, nên điều quan trọng là giữ cho chiều dài trang tương đối ngắn và đừng lạc đề. Các khối nội dung có khả năng xếp gọn lại được cung cấp một cách rất tốt để xử lý chức năng này (Liệt kê 5). Khung công tác jQuery Mobile cung cấp một data-role dành cho nội dung collapsible (xếp gọn lại được), mà khi sử dụng đúng cách sẽ chuyển đổi một phần tử header và nội dung liên quan của nó thành một khối xếp gọn được. Liệt kê 5. Sử dụng một vùng nội dung xếp gọn lại được <div data-role="collapsible"> <h2>My header</h2> <p>The full content would normally be longer than this, which is why we would want to hide it by default and allow the user to choose whether they wanted to read it by viewing the title. Therefore the title plays an important role when creating collapsible content blocks.</p> </div> Theo mặc định, khối này hiển thị văn bản đầu trang như một nút ấn có một biểu tượng +. Khi được nhấn vào, toàn bộ nội dung sẽ được lộ ra và biểu tượng + sẽ thay đổi thành một biểu tượng -, cho biết rằng nút ấn đó có thể được nhấn lại để đóng toàn bộ nội dung và trở về trạng thái nút ấn mặc định. Về đầu trang Tạo các danh sách đơn giản Các danh sách là một phần tử nhìn thấy phổ biến trên một trang web di động. Với jQuery Mobile, bạn có thể tạo ra một số định dạng danh sách khác nhau, ví dụ như danh sách liên kết cơ bản, danh sách lồng nhau, danh sách đánh số thứ tự, danh sách với nút ấn chia tách (split button), các danh sách có các thanh chia làm nhiều đoạn (dividers), các danh sách có các biểu tượng, hình thu nhỏ hoặc các bong bóng đếm và các danh sách gồm có một thanh bộ lọc tìm kiếm. Một kiểu danh sách được sử dụng phổ biến là danh sách liên kết cơ bản. Để tạo ra một danh sách liên kết cơ bản, bạn chỉ cần tạo một danh sách không theo thứ tự HTML tiêu chuẩn, thêm một thuộc tính data-role và gán cho nó một giá trị là listview (Liệt kê 6). Liệt kê 6. Tạo một danh sách liên kết cơ bản với khung công tác jQuery Mobile <ul data-role="listview"> <li><a href="#">List item 1</a></li> <li><a href="#">List item 2</a></li> </ul> Để tạo một danh sách đánh số, bạn sẽ sử dụng mã tương tự như trong Liệt kê 6, chỉ cần thay đổi ul thành ol để chuyển đổi nó thành một danh sách có thứ tự. Về đầu trang Nâng cao các danh sách Một khi bạn hiểu để tạo ra các danh sách cơ bản đơn giản đến mức nào, bạn có thể tự thấy muốn có thêm nhiều tùy chọn hơn. Một tùy chọn để cung cấp chức năng bổ sung cho một danh sách là tùy chọn có tên là split button list (danh sách nút ấn chia tách). Một danh sách nút ấn chia tách cho phép bạn cung cấp hai tùy chọn có thể nhấn được trong cùng một mục danh sách. Chức năng này rất có ích đối với các mục danh sách gồm có một liên kết, nói ví dụ, cho các chi tiết riêng về mục cụ thể đó nhưng cũng có thể cần phải bao gồm các hành động khác có liên quan đến mục đó, chẳng hạn như một nút ấn để mua mục này hoặc chia sẻ nó trên một mạng xã hội. Việc tạo một danh sách nút ấn chia tách rất đơn giản: Bạn thêm hai thẻ neo cạnh nhau trong mục danh sách sử dụng listview data-role (Liệt kê 7). Liệt kê 7. Tạo một danh sách nút ấn chia tách với khung công tác jQuery Mobile <ul data-role="listview" data-split-icon="gear"> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data- rel="dialog">Purchase item</a> </li> <li> <a href="item-detail.html"> <h3>Item title</h3> <p>Item overview</p> </a> <a href="item-purchase.html" data- rel="dialog">Purchase item</a> </li> </ul> Danh sách nút ấn chia tách trong Liệt kê 7 cung cấp các mục danh sách có một tiêu đề và một tổng quan mà những người dùng có thể nhấn vào để xem các chi tiết bổ sung về sản phẩm. Các mục danh sách cũng có một biểu tượng được sử dụng như là một siêu liên kết để mua mục đó trong một hộp thoại. Bạn cũng có thể thay đổi biểu tượng mặc định cho nút ấn chia tách, xuất hiện ở phía bên phải của mục danh sách bằng cách sử dụng thuộc tính data-split-icon. Một bổ sung có ích khác cho các danh sách cơ bản là các thanh chia danh sách. Các thanh chia danh sách cung cấp một phương tiện để phân loại các mục danh sách của bạn. Ví dụ, bạn có thể sắp xếp theo vần chữ cái các mục danh sách của mình và sử dụng các thanh chia danh sách để tách đoạn theo từng chữ cái trong bảng chữ cái hoặc bạn có thể có một nhóm các mục danh sách có liên quan đến âm nhạc và phân loại chúng bằng các thanh chia danh sách, tương ứng với các thể loại âm nhạc khác nhau. Liệt kê 8 cho thấy một ví dụ về một danh sách đơn giản được nâng cao bằng các thanh chia danh sách. Liệt kê 8. Thêm các thanh chia danh sách vào một listview <ul data-role="listview"> <li data-role="list-divider">Alternative</li> <li><a href="#">Nirvana</a></li> <li data-role="list-divider">Rock and Roll</li> <li><a href="#">Jimi Hendrix</a></li> <li><a href="#">Led Zeppelin</a></li> </ul> Việc sử dụng giá trị của thuộc tính data-role là list-divider (thanh chia-danh sách) cung cấp một kiểu dáng trực quan để phân biệt giữa các mục danh sách này với các các mục danh sách khác. Bạn cũng có thể tạo ra các kiểu dáng khác nhau bằng cách sử dụng các biểu tượng, các hình thu nhỏ và các bong bóng đếm. Bạn có thể thêm các bong bóng đếm vào một mục danh sách bằng cách sử dụng lớp ul-li-count (Liệt kê 9). Liệt kê 9. Thêm các bong bóng đếm vào các mục danh sách của jQuery Mobile <ul data-role="listview"> <li> <a href="inbox.html">Inbox <span class="ui-li-count">12</span> </a> </li> </ul> Bạn có thể thêm các hình thu nhỏ cũng giống như bạn thêm một hình ảnh vào một trang HTML. Chỉ cần thêm một phần tử neo tới một mục danh sách, thêm một hình ảnh sẽ hoạt động như hình thu nhỏ, rồi thêm bản sao mà bạn muốn xuất hiện bên cạnh nó. jQuery Mobile sẽ xử lý phần còn lại (Liệt kê 10). Liệt kê 10. Thêm các hình thu nhỏ vào các mục danh sách jQuery Mobile <ul data-role="listview"> <li> <a href="zeppelin.html#thank-you"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Thank You</p> </a> </li> <li> <a href="zeppelin.html#ten-years"> <img src="images/album-cover.jpg" /> <h3>Led Zeppelin</h3> <p>Ten Years</p> </a> </li> </ul> Bạn thêm các biểu tượng cùng cách như các hình thu nhỏ; sự khác biệt duy nhất là ở chỗ bạn sử dụng lớp ui-li-icon, như trong Liệt kê 11. Liệt kê 11. Thêm biểu tượng vào các mục danh sách jQuery Mobile <ul data-role="listview"> <li> <a href="zeppelin.html"> <img src="images/album-cover.jpg" class="ui- li-icon" /> Led Zeppelin Album </a> </li> <li> <a href="hendrix.html"> <img src="images/album-cover.jpg" class="ui- li-icon" /> Jimi Hendrix Album </a> </li> </ul> Lớp ul-li-icon hạn chế kích cỡ hình ảnh có chiều rộng và chiều cao tối đa là 40px (40 điểm ảnh) và bố trí đúng hình ảnh trong các mục danh sách. Về đầu trang Lọc tìm kiếm Ngoài tất cả tính năng nâng cao rất thú vị của danh sách vừa mới được trình bày, tính năng nâng cao cuối cùng mang lại các cải tiến ấn tượng về tính tiện dụng cho các danh sách dài. Đôi khi, đúng là không thể giảm tất cả nội dung cần phải xuất hiện trên một trang web di động. Khi xảy ra trường hợp này và bạn có một danh sách dài, gần như không thể dùng được, thanh bộ lọc tìm kiếm là một cách tuyệt vời để xử lý vấn đề này. May mắn thay, không mất nhiều nỗ lực để thêm một thanh bộ lọc tìm kiếm vào một danh sách với jQuery Mobile. Chỉ cần thêm thuộc tính data- filter (bộ lọc-dữ liệu) vào danh sách của bạn và gán cho nó giá trị là true (Liệt kê 12). Liệt kê 12. Thêm một thanh bộ lọc tìm kiếm vào một danh sách jQuery Mobile <ul data-role="listview" data-filter="true"> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li><a href="#">John B.</a></li> <li><a href="#">Tammy D.</a></li> </ul> Thanh bộ lọc tìm kiếm bổ sung một trường nhập văn bản, cung cấp chức năng cho những người dùng gõ những gì họ đang tìm kiếm, trong khi đó, danh sách được lọc theo thời gian thực dựa trên trường nhập này. Ví dụ, nếu bạn đã có một danh sách các tên nhân viên và bạn đã thêm một thanh bộ lọc tìm kiếm vào danh sách đó, người dùng sẽ có thể lọc và thu hẹp các kết quả được hiển thị trên trang đó bằng cách nhập một hoặc nhiều ký tự vào trường nhập văn bản của bộ lọc tìm kiếm. Bạn cũng có thể đi một bước xa hơn và thêm các thanh chia vào listview của bạn trong khi vẫn có một thanh bộ lọc tìm kiếm (Liệt kê 13). Liệt kê 13. Thêm một thanh bộ lọc tìm kiếm vào một danh sách jQuery Mobile có các thanh chia danh sách <ul data-role="listview" data-filter="true"> <li data-role="list-divider">C</li> <li><a href="#">Chris A.</a></li> <li><a href="#">Cindy V.</a></li> <li data-role="list-divider">J</li> <li><a href="#">John B.</a></li> <li data-role="list-divider">T</li> <li><a href="#">Tammy D.</a></li> </ul> Sự kết hợp các thanh chia danh sách với thanh bộ lọc tìm kiếm là một tính năng rất tốt và thực sự bổ sung vào tính tiện dụng cho các danh sách dài, tẻ nhạt nếu không sẽ không thể sử dụng được. Về đầu trang Các phần tử biểu mẫu Với jQuery Mobile, tất cả các phần tử biểu mẫu nguyên gốc được chuyển đổi thành các nút điều khiển tùy chỉnh khi trình duyệt hỗ trợ nó. Các nút điều khiển tùy chỉnh này là phiên bản nâng cao của các phần tử biểu mẫu nguyên gốc cũng như một số phần tử biểu mẫu đặc biệt được tạo riêng bởi khung công tác. May mắn thay, tất cả các phần tử biểu mẫu ấy tự hạ cấp khi gặp các trình duyệt không hỗ trợ chúng, vì vậy không phải quan tâm đến tính tiện dụng của chúng. Các trường nhập văn bản với jQuery Mobile về cơ bản là giống như các trường nhập văn bản nguyên gốc; tuy nhiên, bạn có thể sử dụng các kiểu trường nhập HTML5 mới như email, tel và number. Để tạo ra bất kỳ phần tử biểu mẫu nào trong số này, bạn chỉ cần thiết lập kiểu trường nhập là một trong các giá trị đã đề cập. Để có một danh sách đầy đủ về các kiểu trường nhập HTML5, xem phần Tài nguyên . Ngoài các kiểu trường nhập HTML5 được hỗ trợ, bạn có thể tạo ra một thanh trượt. Một thanh trượt gồm có một tay gạt và đường rãnh mà tay gạt này trượt trên đó. Giá trị của thanh trượt được lưu trữ khi di chuyển tay gạt và sau đó giá trị đó được gửi đi khi biểu mẫu được gửi đi. Để tạo một thanh trượt, bạn bắt đầu với một trường nhập HTML cơ bản, nhưng bạn định nghĩa thuộc tính type là range (phạm vi). Sau đó, bạn thêm các thuộc tính min (tối thiểu), max (tối đa) và value (giá trị) và định nghĩa một giá trị mặc định cho thuộc tính value, xác định vị trí nơi sẽ đặt tay gạt trên thanh trượt. Liệt kê 14 cho thấy một ví dụ về một phần tử thanh trượt có một giá trị max là 10, giá trị min là 0 và value mặc định là 2. Liệt kê 14. Tạo một phần tử thanh trượt khi sử dụng khung jQuery Mobile <div data-role="fieldcontain"> <label for="slider">My slider:</label> <input type="range" name="slider" id="slider" value="2" min="0" max="10" /> </div> Kiểu trường nhập tùy chỉnh cuối cùng là một công tắc lật (flip), đã phổ biến trên các thiết bị di động. Đó là một phần tử tuyệt vời để xử lý các kiểu bật/tắt (on/off) hoặc đúng/sai (true/false) của dữ liệu. Có nhiều cách để người dùng có thể làm việc với công tắc lật này— bằng cách gõ nhẹ một bên hoặc bên kia của công tắc hoặc bằng cách kéo tay gạt lật như một thanh trượt. Việc tạo một công tắc lật cũng giống như việc tạo một thanh trượt, mặc dù có một vài sự khác biệt lớn. Đầu vào trở thành một phần tử select (lựa chọn) và hai tùy chọn được thêm vào. Liệt kê 15 đưa ra một ví dụ về một công tắc lật có thể được sử dụng để cung cấp chức năng bật/tắt. Liệt kê 15. Tạo một công tắc lật khi sử dụng khung jQuery Mobile <div data-role="fieldcontain"> <label for="slider">Select slider:</label> <select name="slider" id="slider" data- role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> Bạn có lẽ cũng đã nhận thấy rằng có một thuộc tính data-role có giá trị là slider (thanh trượt). Giá trị của thuộc tính này chuyển đổi một danh sách lựa chọn di động jQuery tùy chỉnh thành một công tắc lật. . Sử dụng các thành phần giao diện người dùng trong jQuery Mobile Các hộp thoại và các cửa sổ bật lên Một hộp thoại là một phần tử giao diện người dùng. thể áp dụng các chuyển tiếp khác. Về đầu trang Các thanh công cụ Khung công tác jQuery Mobile gồm có các phần đầu trang và các phần chân trang như các