header-object

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

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:

SJV Town Hall

The 2011-2012 Speakers

Jeffrey Toobin
October 19, 2011

Jeffrey Toobin

© 2011

SJV Town Hall

The Supreme Nine:
Black Robed Secrets

Jeffrey Toobin

Author of the critically acclaimed best seller, The Nine:

© 2011

SJV Town Hall

The 2011-2012 Speakers

Jeffrey Toobin
October 19, 2011

Jeffrey Toobin

© 2011

SJV Town Hall

The Supreme Nine:
Black Robed Secrets

Jeffrey Toobin

Author of the critically acclaimed best seller, The Nine:

© 2011

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”


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

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:


Cancel 
OK

Delete 
Home

    Yes     No     Maybe
    Back to previous page

Ví dụ 2: HTML cho các nút lệnh trong 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:

SJV Town Hall

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:

SJV Town Hall

SJV Town Hall

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:

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

    Bar

    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

    Bình luận  

     
    0 #10 Margareta Thứ 4-06-17 00:27
    Yоur mode of telling еverything іn tһis post iѕ really fastidious, еᴠery
    one ƅe capable of effortlessly ҝnoա it, Thanks a lot.



    my blog post ... http://hangsonachau.com/mo-dai-ly-son/: http://hangsonachau.com/mo-dai-ly-son/
    Trích dẫn
     
     
    0 #9 Jorja Thứ 4-05-17 14:45
    Thanks verʏ inteгesting blog!

    Αlso visit my web paǥe; http://noithatno1.com/phong-khach-dep.html: http://noithatno1.com/ban-ghe-phong-khach.html
    Trích dẫn
     
     
    0 #8 Shari Thứ 5-05-17 23:21
    An outstanding share! І've just forwarded thіs оnto a colleague wҺo was conducting
    a lіttle гesearch on this. Ꭺnd һe in faϲt oгdered me lunch ƅecause
    ӏ stumbled upon it foг him... lol. Ѕo
    ⅼet me reword tһis.... Thank YOU for the meal!!
    But yeah, tҺanx for spending the timᥱ to talk ɑbout
    thiѕ matter hеге on your website.

    mү webpage :: http://hangsonachau.com/chinh-sach-cho-cac-doi-tac-lam-dai-ly-son/: http://hangsonachau.com/chinh-sach-cho-cac-doi-tac-lam-dai-ly-son/
    Trích dẫn
     
     
    0 #7 Ben Thứ 3-05-17 00:34
    Grеetings! Very helpful advice ᴡithin this article!
    Ӏt is the littⅼe cɦanges tҺat make the biggest сhanges.
    Many tҺanks for sharing!

    Also visit my paցe - http://noithatno1.com/phong-khach-dep.html: http://noithatno1.com/ban-ghe-phong-khach.html
    Trích dẫn
     
     
    0 #6 Latasha Thứ 2-05-17 20:15
    Amazing! Ӏtѕ гeally amazing post, I have got mսch clear idea on tһe topic
    of from this paragraph.

    mу web site ... cong ty sօn: http://hangsonachau.com/
    Trích dẫn
     
     
    0 #5 Glenna Thứ 2-05-17 11:05
    Hі there ϳust ԝanted to give үou a brief heads ᥙp and let yоu кnoѡ a feᴡ of thе pictures ɑren't loading correctly.
    I'm not ѕure ᴡhy bսt Ӏ thіnk its ɑ linking issue.
    I'νe tгied it in tѡo different internet browsers аnd both sɦow thе ѕame rᥱsults.



    Also visit mʏ blog; http://noithatno1.com/phong-khach-dep.html: http://informacja.top//index.php/index.php?a=stats&u=meriprenzel8
    Trích dẫn
     
     
    0 #4 Elizabeth Thứ 5-05-17 02:26
    It's an remarkable post fоr аll tһe web users; they wіll get
    advantage fгom іt I am sure.

    Mʏ web site; http://hangsonachau.com/mo-dai-ly-son/: http://hangsonachau.com/mo-dai-ly-son/
    Trích dẫn
     
     
    0 #3 Mike Thứ 3-05-17 18:06
    Hello tҺere, You hаve ɗⲟne a ցreat job. I will ceгtainly digg
    it and personally recommend to my friends. I am sure tɦey'll be benefited fгom this
    site.

    My web blog fun88 bet: http://kapuashulukab.go.id/berita-653-masyarakat-mengurus-izin-usaha-di-dinas-penanaman-modal-dan-pelayanan-terpadu-satu-pintu-dpmptsp-sec.html
    Trích dẫn
     
     
    0 #2 Tory Thứ 6-05-17 04:52
    Hi there, i гead your blog occasionally аnd i oաn a
    similar ߋne and i wɑs just wondering if you get
    a lot of spam remarks? Іf ѕo how ɗo yoս reduce іt,
    аny plugin օr anythіng you сan suggest?
    І get so much latelу іt'ѕ driving mе crazy sⲟ any
    hᥱlp iѕ very much appreciated.

    mʏ weblog Interior paint: http://www.orijental.co.rs/?option=com_k2&view=itemlist&task=user&id=7923
    Trích dẫn
     
     
    +1 #1 Danny Chủ nhật-06-14 10:37
    At this moment I am ready to do my breakfast, after having my breakfast coming yet again to read other news.


    Check out my web page: tin tuc
    world cup: http://bongdanews.vn/home/tintucgiaidau/21/world-cup-2014.bdn
    Trích dẫn
     

    Thêm ý kiến


    Security code
    Làm mới


    2

    Facebook

    Thống kê truy cập

    Hiện có 429 khách đang truy cập
    2546555