Tạo trang web trên điện thoại di động với jQuery Mobile

NộI Dung

• Cách viết mã nhiều trang trong một tệp HTML
• Sự miêu tả
• Cách sử dụng hộp thoại và chuyển tiếp
• Các chuyển đổi có thể được sử dụng
• Sự miêu tả
• Cách tạo các nút
• Sự miêu tả
• Cách tạo thanh điều hướng
• Cách viết mã HTML cho thanh điều hướng:
• Cách định dạng nội dung bằng jQuery Mobile
• Các kiểu mặc định mà jQuery Mobile sử dụng
• Sự miêu tả
• Cách áp dụng các chủ đề cho các phần tử HTML
• Hai cách để áp dụng một chủ đề:
• Sự miêu tả
• Góc nhìn cá nhân

Đây là một đoạn trích đã được chỉnh sửa từ Chương 15 của HTML5 và CSS3 của Murach của Zak Ruvalcaba và Anne Boehm.

jQuery Mobile là một thư viện JavaScript miễn phí, mã nguồn mở, đa nền tảng, mà bạn có thể sử dụng để phát triển các trang web trên điện thoại di động. Thư viện này cho phép bạn tạo các trang trông giống như các trang của một ứng dụng di động gốc.

Mặc dù jQuery Mobile hiện có sẵn dưới dạng phiên bản thử nghiệm beta, nhưng phiên bản này đã cung cấp tất cả các tính năng mà bạn cần để phát triển một trang web di động xuất sắc. Do đó, bạn có thể bắt đầu sử dụng nó ngay lập tức. Bạn cũng có thể mong đợi phiên bản này sẽ liên tục được cải tiến, vì vậy jQuery Mobile sẽ chỉ ngày càng trở nên tốt hơn.

Trong bài viết này, bạn sẽ học các kỹ thuật cơ bản để tạo các trang của một trang web trên điện thoại di động. Điều đó sẽ bao gồm việc sử dụng hộp thoại, nút và thanh điều hướng.

Cách viết mã nhiều trang trong một tệp HTML

Trái ngược với cách bạn phát triển các trang cho một trang web màn hình, jQuery Mobile cho phép bạn tạo nhiều trang trong một tệp HTML duy nhất. Điều này được minh họa bằng hình 15-7. Tại đây, bạn có thể thấy hai trang của một trang web cùng với HTML cho các trang này. Điều đáng ngạc nhiên là cả hai trang đều được mã hóa trong một tệp HTML duy nhất.

Đối với mỗi trang, bạn viết mã một phần tử div với “trang” là giá trị của thuộc tính vai trò dữ liệu. Sau đó, trong mỗi phần tử div đó, bạn viết mã các phần tử div cho đầu trang, nội dung và chân trang của mỗi trang. Sau đó, khi tệp HTML được tải, trang đầu tiên trong phần nội dung của tệp sẽ được hiển thị.

Để liên kết giữa các trang trong tệp HTML, bạn sử dụng trình giữ chỗ như thể hiện trong hình 7-11 của chương 7. Ví dụ: phần tử a> trong trang đầu tiên trong ví dụ này chuyển đến "#toobin" khi người dùng nhấn vào phần tử h2 hoặc img được mã hóa làm nội dung cho liên kết này. Điều này đề cập đến phần tử div với “toobin” làm thuộc tính id của nó, có nghĩa là việc nhấn vào liên kết sẽ đưa người đọc đến trang thứ hai trong tệp.

Mặc dù ví dụ này chỉ hiển thị hai trang, nhưng bạn có thể viết mã nhiều trang trong một tệp HTML. Tuy nhiên, hãy nhớ rằng tất cả các trang cùng với hình ảnh, tệp JavaScript và CSS của chúng đều được tải bằng một tệp HTML duy nhất. Do đó, thời gian tải sẽ trở nên quá mức nếu bạn lưu trữ quá nhiều trang trong một tệp duy nhất. Khi điều đó xảy ra, bạn có thể chia các trang của mình thành nhiều tệp HTML.

HTML cho hai trang trong phần nội dung của một tệp HTML:

div data-role = "page"> header data-role = "header"> h1> Tòa thị chính SJV / h1> / header> section data-role = "content"> h3> Loa 2011-2012 / h3> a href = "# toobin"> h4> Jeffrey Toobinbr> Ngày 19 tháng 10 năm 2011 / h4> img src = "images / toobin75.webp" alt = "Jeffrey Toobin"> / a>! - CÁC YẾU TỐ CHO VIỆC NGHIÊN CỨU CỦA NGƯỜI NÓI - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Tòa thị chính SJV / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Black Robed Secrets / h3> img src = "images / toobin_court.cnn.webp" alt = "Jeffrey Toobin "> p> Tác giả của cuốn sách bán chạy được giới phê bình đánh giá cao, i> The Nine:! - BẢN SAO TIẾP TỤC -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Sự miêu tả

• Khi bạn sử dụng jQuery Mobile, bạn không phải phát triển một tệp HTML riêng cho mỗi trang. Thay vào đó, trong phần tử nội dung của một tệp HTML, bạn mã một phần tử div cho mỗi trang với thuộc tính vai trò dữ liệu được đặt thành “trang”.
• Đối với mỗi phần tử div, bạn đặt thuộc tính id thành giá trị trình giữ chỗ có thể được truy cập bởi các thuộc tính href trong phần tử a> của các trang khác.

Cách sử dụng hộp thoại và chuyển tiếp

Hình 15-8 cho thấy cách tạo một hộp thoại mở ra khi nhấn vào một liên kết. Để làm điều đó, bạn mã hộp thoại giống như bạn làm với bất kỳ trang nào. Nhưng trong phần tử a> chuyển đến trang đó, bạn viết mã thuộc tính data-rel với giá trị là “dia- log”.

Như các ví dụ trong hình này cho thấy, tệp jQuery Mobile CSS định dạng một hộp thoại khác với một trang web bình thường. Theo mặc định, một hộp thoại sẽ có nền tối với văn bản nền trước màu trắng, đầu trang và chân trang sẽ không kéo dài theo chiều rộng của trang. Một hộp thoại cũng sẽ có “X” trong tiêu đề mà người dùng phải nhấn để quay lại trang trước.

Khi bạn viết mã một phần tử> chuyển đến một trang hoặc hộp thoại khác, bạn cũng có thể sử dụng thuộc tính chuyển tiếp dữ liệu để chỉ định một trong sáu chuyển đổi được tóm tắt trong bảng trong hình này. Mỗi quá trình chuyển đổi này nhằm mục đích bắt chước một hiệu ứng mà một thiết bị di động như iPhone sử dụng.

Các chuyển đổi có thể được sử dụng

HTML mở trang dưới dạng hộp thoại với chuyển đổi "pop":

a href = "# toobin" data-rel = "hộp thoại" data-transfer = "pop">

HTML mở trang với quá trình chuyển đổi "mờ dần":

a href = "# toobin" data-transfer = "fade">

Sự miêu tả

• HTML cho một hộp thoại được mã hóa theo cách mã hóa bất kỳ trang nào. Tuy nhiên, phần tử a> liên kết đến trang bao gồm thuộc tính data-rel với giá trị của nó là “hộp thoại”. Để đóng hộp thoại, người dùng nhấn vào X trong tiêu đề của hộp.
• Để chỉ định cách một trang hoặc hộp thoại được mở, bạn có thể sử dụng thuộc tính chuyển đổi dữ liệu với một trong các giá trị trong bảng trên. Nếu một thiết bị không hỗ trợ quá trình chuyển đổi mà bạn chỉ định, thì thuộc tính này sẽ bị bỏ qua.
• Việc tạo kiểu cho hộp thoại được thực hiện bởi tệp CSS jQuery Mobile.

Cách tạo các nút

Hình 15-9 cho thấy cách sử dụng các nút để điều hướng từ trang này sang trang khác. Để làm điều đó, bạn chỉ cần đặt thuộc tính vai trò dữ liệu cho phần tử a> thành “nút” và jQuery Mobile thực hiện phần còn lại.
Tuy nhiên, bạn cũng có thể đặt một số thuộc tính khác cho các nút. Ví dụ: nếu bạn muốn hai hoặc nhiều nút xuất hiện cạnh nhau, như hai nút đầu tiên trong hình này, bạn có thể đặt thuộc tính data-inline thành “true”.

Nếu bạn muốn thêm một trong 18 biểu tượng do jQuery Mobile cung cấp vào một nút, bạn cũng mã thuộc tính data-icon. Ví dụ: nút thứ ba trong ví dụ này sử dụng biểu tượng “xóa” và nút thứ tư sử dụng biểu tượng “trang chủ”. Tất cả các biểu tượng này trông giống như các biểu tượng mà bạn có thể thấy trong một ứng dụng di động gốc. Ngẫu nhiên, các biểu tượng này không phải là các tệp riêng biệt mà trang phải truy cập. Thay vào đó, chúng được cung cấp bởi thư viện jQuery Mobile.

Nếu bạn muốn nhóm hai hoặc nhiều nút theo chiều ngang, như các nút Có, Không và Có thể trong hình này, bạn có thể mã các phần tử a> cho các nút trong phần tử div có “nhóm điều khiển” làm thuộc tính vai trò dữ liệu của nó và "Ngang" làm thuộc tính kiểu dữ liệu của nó. Hoặc, để nhóm các nút theo chiều dọc, bạn có thể thay đổi thuộc tính kiểu dữ liệu thành "chiều dọc".

Nếu bạn đặt thuộc tính data-rel cho một nút thành “back” và thuộc tính href thành ký hiệu bảng Anh (#), thì nút đó sẽ quay lại trang đã gọi nó. Nói cách khác, nút này hoạt động giống như nút Quay lại. Điều này được minh họa bằng nút cuối cùng trong nội dung của trang.

Hai nút cuối cùng hiển thị cách các nút xuất hiện trong chân trang của một trang. Ở đây, các biểu tượng và văn bản có màu trắng trên nền đen. Trong trường hợp này, thuộc tính class cho footer được đặt thành “ui-bar”, điều này cho jQuery Mobile biết rằng nó nên đặt thêm một chút không gian xung quanh nội dung của footer. Bạn sẽ tìm hiểu thêm về điều đó trong hình 15-12.

HTML cho các nút trong phần:

! - Đối với các nút nội dòng, hãy đặt thuộc tính data-line thành true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Để thêm biểu tượng vào một nút, hãy sử dụng thuộc tính data-icon -> a href = "#" data-role = "button "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Để nhóm các nút, hãy sử dụng phần tử div với các thuộc tính theo sau -> div data-role = "controlgroup" data-type = "ngang"> a href = "#" data-role = "button" data-icon = "check"> Có / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Không / a> a href = "#" data-role = "button"> Có thể / a> / div>! - Tới viết mã nút Quay lại, đặt thuộc tính data-rel trở lại -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Quay lại trang trước / a >

HTML cho các nút ở chân trang:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Thêm vào Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Tweet trang này / a> / footer>

Sự miêu tả

• Để thêm một nút vào trang web, bạn đặt mã một phần tử> với thuộc tính vai trò dữ liệu của nó được đặt thành “nút”.

Cách tạo thanh điều hướng

Hình 15-10 cho thấy cách bạn có thể thêm thanh điều hướng vào một trang web. Để làm điều đó, bạn viết mã một phần tử div với vai trò dữ liệu của nó được đặt thành “navbar”. Trong phần tử này, bạn viết mã một phần tử ul chứa các phần tử li có chứa các phần tử a> cho các mục trong thanh điều hướng. Tuy nhiên, lưu ý rằng bạn không viết mã thuộc tính vai trò dữ liệu cho các phần tử a>.

Để thay đổi màu cho các mục trong thanh điều hướng, mã trong ví dụ này bao gồm thuộc tính data-theme-b cho từng mục. Do đó, jQuery Mobile thay đổi màu nền của từng mục từ màu đen, là màu mặc định, thành màu xanh lam hấp dẫn. Ngoài ra, mã này đặt thuộc tính lớp cho nút đang hoạt động thành “ui-btn-active” để jQuery Mobile thay đổi màu cho nút đang hoạt động thành màu xanh lam nhạt hơn. Điều này cho thấy cách bạn có thể thay đổi định dạng được jQuery Mobile sử dụng và bạn sẽ tìm hiểu thêm về định dạng đó tiếp theo.

HTML cho thanh điều hướng:

header data-role = "header"> h1> Tòa thị chính SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Trang chủ / a> / li> li> a href =" # speaker "data-icon =" star "data-theme =" b "> Speakers / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Liên hệ với Chúng tôi / a> / li> / ul> / div> / header>

Cách viết mã HTML cho thanh điều hướng:

• Mã một phần tử div trong phần tử tiêu đề. Sau đó, đặt thuộc tính vai trò dữ liệu cho phần tử div thành “thanh điều hướng”.
• Trong phần tử div, hãy viết mã một phần tử ul có chứa một phần tử li cho mỗi liên kết.
• Trong mỗi phần tử li, hãy mã một phần tử a> với thuộc tính href sử dụng trình giữ chỗ cho trang mà liên kết sẽ chuyển đến. Sau đó, đặt thuộc tính data-icon thành biểu tượng bạn chọn.
• Đối với mục đang hoạt động trong thanh điều hướng, hãy đặt thuộc tính lớp thành “ui-btn-active”.Khi đó, màu của mục này sẽ nhạt hơn các mục khác trong thanh điều hướng.
• Bạn cũng nên sử dụng thuộc tính data-theme để áp dụng chủ đề jQuery Mobile cho từng mục trong thanh điều hướng. Nếu không, các nút trong thanh sẽ có cùng màu với phần còn lại của tiêu đề. Để tìm hiểu thêm về cách áp dụng các chủ đề, hãy xem hình 15-12.

Cách định dạng nội dung bằng jQuery Mobile

Như bạn đã thấy, jQuery Mobile tự động định dạng các thành phần của trang web dựa trên biểu định kiểu của chính nó. Bây giờ, bạn sẽ tìm hiểu thêm về điều đó, cũng như cách điều chỉnh kiểu mặc định mà jQuery Mobile sử dụng.

Các kiểu mặc định mà jQuery Mobile sử dụng

Hình 15-13 cho thấy các kiểu mặc định mà jQuery Mobile sử dụng cho các phần tử HTML phổ biến. Đối với tất cả các kiểu của nó, jQuery Mobile dựa vào công cụ kết xuất của trình duyệt nên kiểu dáng của riêng nó là tối thiểu. Điều này giúp thời gian tải nhanh hơn và giảm thiểu chi phí mà CSS quá mức sẽ áp đặt trên một trang.

Như bạn có thể thấy, kiểu của jQuery Mobile hiệu quả đến mức bạn không cần phải sửa đổi kiểu của nó bằng cách cung cấp bảng định kiểu CSS của riêng bạn. Ví dụ: khoảng cách giữa các mục trong danh sách không có thứ tự và định dạng của bảng đều có thể chấp nhận được theo cách của chúng. Ngoài ra, loại màu đen trên nền xám phù hợp với định dạng cho các ứng dụng di động gốc.

Sự miêu tả

• Theo mặc định, jQuery Mobile tự động áp dụng kiểu cho các phần tử HTML cho một trang. Những kiểu này không chỉ hấp dẫn mà còn bắt chước kiểu gốc của trình duyệt.
• Theo mặc định, jQuery Mobile áp dụng một lượng nhỏ khoảng đệm ở bên trái, bên phải, trên cùng và dưới cùng của mỗi trang dành cho thiết bị di động.
• Theo mặc định, các liên kết lớn hơn một chút so với văn bản bình thường. Điều này giúp người dùng dễ dàng nhấn vào các liên kết hơn.
• Theo mặc định, các liên kết được gạch dưới với màu xanh lam làm màu phông chữ.

Cách áp dụng các chủ đề cho các phần tử HTML

Trong một số trường hợp, bạn sẽ muốn thay đổi kiểu mặc định mà jQuery Mobile sử dụng. Bạn đã thấy điều đó trong thanh điều hướng của hình 15-10. Để thay đổi kiểu mặc định, bạn có thể sử dụng năm chủ đề mà jQuery Mobile cung cấp. Những điều này được tóm tắt trong hình 15-12. Ở đây một lần nữa, các chủ đề này nhằm bắt chước giao diện của một ứng dụng di động gốc.

Một cách để áp dụng chủ đề là viết mã thuộc tính chủ đề dữ liệu với ký tự chủ đề làm giá trị của nó. Bạn đã thấy điều này trong thanh điều hướng trong hình 15-10 và bạn có thể thấy điều này trong mã cho thanh điều hướng thứ hai trong hình này. Ở đây, thuộc tính data-theme áp dụng chủ đề “e” cho tiêu đề và chủ đề “d” cho các mục trong thanh điều hướng.

Một cách khác để áp dụng chủ đề là đặt thuộc tính lớp cho một phần tử thành tên lớp biểu thị chủ đề. Điều này được minh họa bằng ví dụ đầu tiên sau bảng. Ở đây, thuộc tính class được sử dụng để áp dụng cả hai lớp “ui-bar” và “ui-bar- b” cho phần tử div. Do đó, jQuery Mobile trước tiên áp dụng kiểu mặc định cho một thanh cho phần tử và sau đó áp dụng chủ đề b cho kiểu đó. Trong các trang tiếp theo, bạn sẽ thấy các ví dụ khác về kiểu tạo kiểu này.

Xin lưu ý rằng bảng trong hình này cho biết sử dụng chủ đề e một cách tiết kiệm. Đó là bởi vì nó sử dụng màu cam phù hợp để làm nổi bật một món đồ, nhưng không hấp dẫn với liều lượng lớn. Điều này được minh họa bằng tiêu đề và thanh điều hướng thứ hai trong hình này, có xu hướng chói tai khi bạn nhìn thấy nó bằng màu sắc.

Nói chung, tốt nhất bạn nên giữ nguyên kiểu mặc định và ba chủ đề đầu tiên, thường hoạt động tốt với nhau. Sau đó, bạn có thể thử nghiệm với các chủ đề d và e khi bạn nghĩ mình cần thêm thứ gì đó.

HTML cho tiêu đề và thanh điều hướng thứ hai:

header data-role = "header" data-theme = "e"> h1> Tòa thị chính SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" #eakers "data-icon =" star "data-theme =" d "> Speakers / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Tin tức / a> / li> / ul> / div> / header>

Năm chủ đề jQuery Mobile:

Hai cách để áp dụng một chủ đề:

Bằng cách sử dụng thuộc tính data-theme:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Bằng cách sử dụng thuộc tính lớp cho biết chủ đề:

div> Thanh / div>

Sự miêu tả

• Bằng cách sử dụng năm chủ đề được bao gồm trong jQuery Mobile, bạn có thể thực hiện các điều chỉnh thích hợp đối với các kiểu mặc định cho các phần tử HTML.
• Mặc dù bạn có thể sử dụng CSS style sheet của riêng mình với ứng dụng jQuery Mobile, nhưng bạn nên tránh làm điều đó bất cứ khi nào có thể.

Góc nhìn cá nhân

Việc sử dụng các thiết bị di động đã tăng lên đáng kể trong vài năm qua. Do đó, việc thiết kế các trang web dễ sử dụng từ các thiết bị này ngày càng trở nên quan trọng. Mặc dù điều đó thường có nghĩa là phát triển một trang web riêng, nhưng đây có thể là một khía cạnh quan trọng trong việc duy trì sự hiện diện của bạn trên Internet.

May mắn thay, nhiệm vụ xây dựng một trang web di động đã trở nên dễ dàng hơn nhiều với sự ra đời của jQuery Mobile. Các trang web di động không còn bị giới hạn ở các trang tĩnh có chứa tiêu đề, đoạn văn, liên kết và hình ảnh thu nhỏ. Với jQuery Mobile, các nhà phát triển web giờ đây có thể xây dựng các trang web giàu tính năng trông giống như các ứng dụng di động gốc.