RSSJquery

Tạo website di động với jQuery Mobile

jQuery Mobile là mã nguồn mở miễn phí của thư viện Javascript mà chúng ta có thể sử dụng để phát triển các website trong ứng dụng di động.jQuery Mobile cung cấp đầy đủ các tính năng để chúng ta phát triển 1 website di động hoàn hảo.

jQuery Mobile là mã nguồn mở miễn phí của thư viện Javascript mà chúng ta có thể sử dụng để phát triển các website trong ứng dụng di động.

jQuery Mobile cung cấp đầy đủ các tính năng để chúng ta phát triển 1 website di động hoàn hảo.

Trong bài viết này, chúng ta sẽ tìm hiểu các kỹ thuật cơ bản để thiết lập website di động bằng cách sử dụng hộp thoại (dialog box), nút lệnh (button), thanh điều hướng (navigation bar).

1/Code nhiều trang web trong 1 file HTML duy nhất

Ngược lại với cách chúng ta phát triển trang web cho 1 website, jQuery Mobile cho phép chúng ta tạo nhiều trang trong  file HTML duy nhất. Chúng ta có thể xem 2 trang của 1 site cùng với HTML của các trang này. Điều đáng ngạc nhiên là các trang được mã hóa trong cùng 1 file HTML.

Trên mỗi trang, chúng ta code 1 tag <div> với vai trò là giá trị của thuộc tính dữ liệu. Sau đó, trong mỗi tag <div>, chúng ta code các tag <div> cho header, content và footer trên từng trang. Khi file HTML được tải về thì trang đầu tiên trong phần <body> của file được hiển thị.

01

Để liên kết các trang với nhau trong file HTML, chúng ta sử dụng placeholder như hình trên, tag <a> trong trang đầu tiên ở ví dụ này vào “#toobin” khi người sử dụng đề cập đến <h2> hoặc tag <img> được mã hóa trong content của liên kết này. Điều này liên quan đến các tag <div> và “toobin” như là thuộc tính id của nó, nghĩa là sử dụng  liên kết để dẫn người đọc đến trang thứ 2 trong site.

Mặc dù trong ví dụ này chỉ hiển thị 2 trang nhưng chúng ta có thể code nhiều trang trong cùng 1 file HTML. Tất cả các trang, hình ảnh, Javascript và file CSS phải được tải trong cùng 1 file HTML. Thời gian tải sẽ chậm hơn nếu như chúng ta lưu trữ nhiều trang trong cùng 1 file, vì vậy chúng ta có thể phân chia các trang trong 1 file HTML.

2 đoạn code HTML của 2 trang web trong phần body của 1 file HTML:

<div data-role="page"><header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The 2011-2012 Speakers</h3>
  
         <a href="#toobin">
<h4>Jeffrey Toobin<br>October 19, 2011</h4>
            <img src="/images/toobin75.jpg" alt="Jeffrey Toobin"></a> 
         <!-- THE ELEMENTS FOR THE REST OF THE SPEAKERS -->
     </section>
<footer data-role="footer">
<h4>© 2011</h4>
</footer> 
</div>
<div data-role="page" id="toobin"><header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The Supreme Nine:<br>Black Robed Secrets</h3>
  
            <img src="/images/toobin_court.cnn.jpg" alt="Jeffrey Toobin">
<p>Author of the critically acclaimed best seller, <i>The Nine: </i></p>
            <!-- THE COPY CONTINUES -->
      </section>
<footer data-role="footer">
<h4>© 2011</h4>
</footer> 
</div>
<div data-role="page"><header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The 2011-2012 Speakers</h3>
  
         <a href="#toobin">
<h4>Jeffrey Toobin<br>October 19, 2011</h4>
            <img src="/images/toobin75.jpg" alt="Jeffrey Toobin"></a> 
         <!-- THE ELEMENTS FOR THE REST OF THE SPEAKERS -->
     </section>
<footer data-role="footer">
<h4>© 2011</h4>
</footer> 
</div>
<div data-role="page" id="toobin"><header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The Supreme Nine:<br>Black Robed Secrets</h3>
  
            <img src="/images/toobin_court.cnn.jpg" alt="Jeffrey Toobin">
<p>Author of the critically acclaimed best seller, <i>The Nine:</i></p>
  
            <!-- THE COPY CONTINUES -->
      </section>
<footer data-role="footer">
<h4>© 2011</h4>
</footer> 
</div>

Mô tả:

  • Khi chúng ta sử dụng jQuery Mobile, chúng ta không cần phải phát triển 1 file HTML riêng biệt cho mỗi trang mà chúng ta code 1 tag <div> trên từng trang với các thuộc tính dữ liệu thiết lập trên trang.
  • Đối với mỗi tag <div>, chúng ta thiết lập thuộc tính id vào giá trị placeholder để có thể được truy cập bằng thuộc tính <href> trong tag <a> của những trang khác.
  • Sử dụng hộp thoại (dialog box) và hiệu ứng (transition)

Hình bên dưới cho thấy cách thức tạo 1 hộp thoại và hộp thoại được mở khi chúng ta sử dụng 1 đường dẫn. Để làm được điều đó, chúng ta code hộp thoại giống như đã thực hiện trên các trang, nhưng trong tag <a>, chúng ta sẽ code 1 thuộc tính <data-rel> với giá trị là “dia-log”.

jQuery Mobile CSS định dạng 1 hộp thoại khác với 1 trang web thông thường. Theo mặc định, 1 hộp thoại sẽ có background màu tối và foreground màu trắng, header và footer sẽ không làm thay đổi độ rộng của trang. 1 hộp thoại sẽ có 1 dấu “X” trên phần header để người sử dụng click vào khi muốn quay về trang trước đó.

Khi chúng ta code 1 tag <a> để sang 1 trang khác hoặc 1 hộp thoại khác, có thể sử dụng thuộc tính “data-transition” để xác định 1 trong 6 hiệu ứng, mỗi hiệu ứng giống hệt như các hiệu ứng di động mà iPhone sử dụng. 

02Hộp thoại của trang bên trái và trang bên phải cùng 1 HTML

Các hiệu ứng được sử dụng:

Hiệu ứng

Mô tả

slide

Trang tiếp theo lướt từ phải sang trái

slideup

Trang tiếp theo lướt từ dưới lên trên

slidedown

Trang tiếp theo lướt từ trên xuống dưới

pop

Trang tiếp theo mất dần tử giữa màn hình

fade

Trang tiếp theo mất dần khỏi tầm nhìn

flip

Trang tiếp theo lật từ sau ra trước, hiệu ứng này không được hỗ trợ trong 1 vài thiết bị.

Ví dụ 1: HTML mở 1 hộp thoại với hiệu ứng “pop”

<a href="#toobin" data-rel="dialog" data-transition="pop"></a>

Ví dụ 2: HTML mở trang với hiệu ứng “fade”

<a href="#toobin" data-transition="fade"></a>

Mô tả:

  • HTML của hộp thoại (dialog box) được  code tương tự như code trang. Tuy nhiên, tag <a> để dẫn đến trang bao gồm thuộc tính <data-rel> với giá trị là “dialog”. Để đóng hộp thoại, người sử dụng chỉ việc click vào dấu “X” trên header của hộp thoại.
  • Để xác định cách thức mở của 1 trang hoặc 1 hộp thoại, chúng ta có thể sử dụng thuộc tính "data-transition" tương ứng với từng giá trị trong bảng bên trên. Nếu thiết bị không hỗ trợ thì chúng ta có thể bỏ qua hiệu ứng đó.
  • Sử dụng jQuery Mobile CSS để tạo kiểu dáng hộp thoại

03

2/ Tạo nút lệnh

Hình trên biếu thị cách sử dụng nút lệnh để chuyển hướng từ trang này sang 1 trang khác. Để làm được điều này, chúng ta thiết lập thuộc tính "data-role" cho 1 tag <a> và jQuery Mobile sẽ tiếp tục thực hiện phần còn lại.

Tuy nhiên, chúng ta cũng có thể thiết lập 1 số thuộc tính khác cho nút lệnh. Ví dụ: chúng ta muốn 2 hoặc nhiều nút lệnh xuất hiện cạnh nhau thì thiết lập thuộc tính “data-inline” thành “true”.

Nếu chúng ta muốn bổ sung 1 trong 18 icon của jQuery Mobile vào 1 nút lệnh thì code thuộc tính “data-icon”. Trong ví dụ này, nút lệnh thứ 3 sử dụng icon “delete” , nút lệnh thứ 4 sử dụng icon “home”. Tất cả các icon đều giống như các icon thường thấy trong ứng dụng di động. Các icon này không phải là các file riêng biệt mà chúng được thư viện jQuery Mobile cung cấp.

Nếu chúng ta muốn nhóm 2 hoặc nhiều nút lệnh theo chiều ngang như Yes-No-Maybe trong hình trên thì code tag <a> cho nút lệnh bằng 1 tag <div> có “controlgroup” tương tự thuộc tính “data-role” và sử dụng thêm thuộc tính “data-type” với giá trị “horizontal” để sắp xếp nút lệnh theo chiều ngang.

Nếu chúng ta thiết lập thuộc tính "data-rel" cho nút lệnh để “back” và thuộc tính “href” với dấu #, nút lệnh này sẽ trở lại trang theo yêu cầu. Nói cách khác, nút lệnh này hoạt động như nút lệnh “Back”, điều này được minh họa bằng nút lệnh cuối cùng trong phần nội dung trang web.

Hai nút lệnh cuối cùng cho thấy cách xuất hiện của các nút lệnh trong footer của 1 trang. Icon và phần chữ màu trắng đối lập với màu nền là màu đen. Trong trường hợp này, thuộc tính “class” của footer được thiết lập là “ui-bar”.

1 trang web di động hiển thị các nút lệnh sau:
 Ví dụ 1: HTML cho các nút lệnh trong section:

<!-- For inline buttons, set the data-line attribute to true -->
<a href="#" data-role="button" data-inline="true">Cancel</a> 
<a href="#" data-role="button" data-inline="true">OK</a>
<!-- To add an icon to a button, use the data-icon attribute -->
<a href="#" data-role="button" data-icon="delete">Delete</a> 
<a href="#" data-role="button" data-icon="home">Home</a>
<!-- To group buttons, use a div element with the attributes that follow -->
<div data-role="controlgroup" data-type="horizontal"> 
    <a href="#" data-role="button" data-icon="check">Yes</a> 
    <a href="#" data-role="button" data-icon="arrow-d">No</a>
    <a href="#" data-role="button">Maybe</a>
</div>
<!-- To code a Back button, set the data-rel attribute to back -->
<a href="#" data-role="button" dat-rel="back" data-icon="back"> 
    Back to previous page</a>

Ví dụ 2: HTML cho các nút lệnh trong footer:

<footer data-role="footer" class="ui-bar"> 
    <a href="http://www.facebook.com" data-role="button" data-icon="plus">Add to Facebook</a> 
    <a href="http://www.twitter.com" data-role="button" data-icon="plus">Tweet this Page</a> 
</footer>

Mô tả:

Để bổ sung 1 nút lệnh vào 1 trang web, chúng ta code tag <a> với thuộc tính "data-role"

3/Tạo thanh điều hướng

Để bổ sung 1 thanh điều hướng vào trang web, chúng ta code 1 tag <div> với “data-role” thiết lập “navbar”. Trong tag này, chúng ta code 1 tag <ul> có chứa các tag <li>, <li> có chứa các tag <a> cho item trong thanh điều hướng. Lưu ý: chúng ta không code thuộc tính “data-role” cho các tag <a>.

Để đổi màu cho các item trong thanh điều hướng, code thuộc tính “data-theme-b” cho mỗi item. jQuery Mobile thay đổi nền mặc định màu đen của mỗi item thành nền màu xanh dương. Ngoài ra, code này thiết lập thuộc tính class cho nút lệnh thành <ui-btn-active>, vì thế jQuery Mobile đổi màu gốc của nút lệnh thành màu xanh sáng hơn.

1234 clip image002

 

Ví dụ HTML đối với thanh điều hướng:

<footer data-role="footer" class="ui-bar"> 
    <a href="http://www.facebook.com" data-role="button" data-icon="plus">Add to Facebook</a> 
    <a href="http://www.twitter.com" data-role="button" data-icon="plus">Tweet this Page</a> 
</footer><header data-role="header">
<h1>SJV Town Hall</h1>
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active" data-icon="home" data-theme="b">Home</a></li>
<li><a href="#speakers" data-icon="star" data-theme="b">Speakers</a></li>
<li><a href="#contactus
                        data-icon=" grid="" data-theme="b">Contact Us</a></li>
      </ul>
  </div>
</header>
 

4/ Lập code trong HTML cho thanh điều hướng

  • Code 1 tag div trong header. Sau đó, thiết lập thuộc tính “data-role” cho tag <div> thành “navbar”.
  • Trong tag <div>, code 1 tag <ul> có chứa 1 tag <li> trên mỗi đường dẫn.
  • Trong mỗi tag <li>, code 1 tag <a> với thuộc tính <href> có sử dụng 1 placeholder cho 1 trang mà link sẽ dẫn tới. Sau đó, thiết lập thuộc tính "data-icon" đến icon mà chúng ta chọn,
  • Với item trong thanh chuyển hướng, thiết lập thuộc tính class thành “ui-btn-active”. Sau đó, màu của item này sẽ sáng hơn các item khác trong thanh điều hướng.
  • Chúng ta nên sử dụng thuộc tính “data-theme” để áp dụng theme jQuery Mobile cho mỗi item trong thanh điều hướng. Ngược lại, các nút lệnh trên thanh điều hướng sẽ cùng màu với phần còn lại của header.

5/ Định dạng nội dung với jQuery Mobile:

jQuery Mobile tự động định dạng các thành phần của trang web dựa trên style sheet.

Kiểu mặc định jQuery Mobile

Hình sau đây mô tả kiểu mặc định mà jQuery Mobile áp dụng cho các tag HTML thông thường. Với những lối mặc định này, jQuery Mobile dựa trên công cụ của trình duyệt để tạo nên kiểu mặc định sở hữu, giúp giảm thiểu thời gian tải và chi phí vượt mức của CSS trên trang.

Các kiểu (style) của jQuery Mobile rất hiệu quả nên chúng ta không cần phải thay đổi bằng cách cung cấp CSS style sheet riêng của mình. Ví dụ: khoảng cách giữa các item trong danh sách không theo thứ tự và định dạng của table đều được chấp nhận theo cách riêng. Tương tự, các loại màu đen trên nền màu xám sẽ thích hợp trong định dạng của các ứng dụng mobile.

01 clip image002

Mô tả:

  • Theo mặc định, jQuery Mobile tự động ứng dụng các style vào tag HTML cho 1 trang. Những style này không chỉ hấp dẫn mà còn giống các style nguyên thủy của trình duyệt.
  • Theo mặc định, jQuery Mobile ứng dụng 1 lượng nhỏ bộ đệm (pad) ở phía bên trái, bên phải, phía trên cùng và dưới cùng của mỗi trang mobile.
  • Theo mặc định, font chữ của các liên kết nên lớn hơn font chữ trong văn bản để thuận lợi cho người sử dụng
  • Theo mặc định, các đường dẫn nên được gạch dưới và sử dụng màu chữ xanh dương.

Ứng dụng theme vào các tag HTML:

Trong 1 số trường hợp, chúng ta muốn thay đổi kiểu mặc định của jQuery Mobile. Nhìn trên thanh chuyển hướng (hình bên dưới) chúng ta có thể sử dụng 5 theme của jQuery Mobile.

Chúng ta code 1 thuộc tính “data-theme” với giá trị là “theme”, nhìn vào hình chúng ta thấy điều này trong thanh chuyển hướng và code có trong thanh chuyển hướng thứ 2. Ở đây, thuộc tính data-theme ứng dụng theme “e” vào phần header và theme “d” vào các item trong thanh chuyển hướng.

Sử dụng cách khác để ứng dụng các theme, thiết lập thuộc tính “class” cho 1 tag đến 1 theme của 1  class. Thuộc tính class được sử dụng để ứng dụng cho cả “ui-bar” và “ui-bar-b”đến tag <div>. jQuery Mobile ứng dụng kiểu thanh mặc định (bar) cho tag và sau đó ứng dụng theme b theo kiểu mặc định đó.

Lưu ý: table trong hình sử dụng theme e. Sử dụng màu cam sẽ dễ phân biệt nhưng không nên áp dụng trong diện tích lớn, được minh họa trong hình thứ 2 (bên phải).

Nói chung, tốt nhất là sử dụng kiểu mặc định như hình thứ 1 (bên trái), chúng ta có thể thử nghiệm với theme d và e khi cần.

001

Tiêu đề và thanh chuyển hướng (bên trái: tiêu đề “a”, thanh “b”; bên phải: tiêu đề “e”, thanh “d”)

 

HTML dùng cho tiêu đề và thanh chuyển hướng thứ 2:

<footer data-role="footer" class="ui-bar"> 
    <a href="http://www.facebook.com" data-role="button" data-icon="plus">Add to Facebook</a> 
    <a href="http://www.twitter.com" data-role="button" data-icon="plus">Tweet this Page</a> 
</footer><header data-role="header">
<h1>SJV Town Hall</h1>
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active" data-icon="home" data-theme="b">Home</a></li>
<li><a href="#speakers" data-icon="star" data-theme="b">Speakers</a></li>
<li><a href="#contactus
                        data-icon=" grid="" data-theme="b">Contact Us</a></li>
          </ul>
       </div>
</header><header data-role="header" data-theme="e">
<h1>SJV Town Hall</h1>
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home" data-theme="d">Home</a></li>
<li><a href="#speakers" data-icon="star" data-theme="d" class="ui-btn-active">Speakers</a></li>
<li><a href="#news" id="news" data-icon="grid" data-theme="d">News</a></li>
                  </ul>
  
             </div>
</header>
 

5 theme jQuery Mobile:

Theme

Mô tả

a

background đen và foreground trắng. Đây là mặc định.

b

background xanh dương và foreground trắng.

c

background màu xám nhạt và foregroundmàu đen. Văn bản in đậm.

d

background màu xám đậm và foreground màu đen. Văn bản không in đậm.

e

background màu cam và foreground màu đen. Sử dụng cho các điểm nhấn

 

2 cách ứng dụng theme:

Sử dụng thuộc tính data-theme:

<li><a href="#home" class="ui-btn-active" data-icon="home" data-theme="b">Home</a></li>

Sử dụng thuộc tính class chỉ tới theme

<div class="ui-bar ui-bar-b">Bar</div>

Mô tả:

  • Sử dụng 5 theme kết hợp với jQuery, chúng ta có thể điều chỉnh các tag HTML phù hợp với kiểu mặc định
  • Mặc dù chúng ta có thể sử dụng CSS style sheet riêng với 1 ứng dụng jQuery Mobile nhưng tốt nhất nên hạn chế sử dụng.

Kết luận:

Việc sử dụng các thiết bị di động đã tăng đáng kể trong vài năm vừa qua. Chính vì vậy, việc thiết kế website cho những thiết bị này ngày càng trở nên quan trọng. Điều đó có nghĩa là phát triển 1 website riêng biệt nhưng theo 1 khía cạnh khác, đây chính là việc duy trì sự hiện diện trên Internet.

Điều may mắn là việc xây dựng cho 1 website di động ngày càng dễ dàng hơn với sự có mặt của jQuery Mobile. Đó không còn là các website di động giới hạn các trang tĩnh bao gồm tiêu đề, đoạn văn bản, các liên kết và các hình ảnh dạng thumbnail. Với jQuery Mobile, những nhà phát triển web có thể hoàn chỉnh các website đa chức năng không khác gì các ứng dụng di động nguyên bản.

Nguồn: netmagazine.com

Tác giả: Zak Ruvalcaba và Anne Boehm

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu