1.5K 75 54

Đã đăng vào thg 4 28, 2016 10:45 CH 16 phút đọc

2.1K

Tìm hiểu về JQuery Mobile (P.1)

Bài đăng này đã không được cập nhật trong 2 năm

I. jQuery Mobile là gì?

jQuery Mobile là một Framework được phát triển tương tự như thư viện jQuery nhưng nó được xây dựng dành cho các ứng dụng chạy trên Mobile. Với jQuery thì ta chỉ xem như là một thư viện nhưng với jQuery Mobile thì ta có thể xem nó như là một Framework vì nó có đầy đủ các tính chất để tạo nên một ứng dụng hoàn chỉnh.

jQuery Mobile hoạt động hầu hết trên các thiết bị Smart Phone và Tablet hiện nay.

jQuery Mobile được xây dựng dựa trên nền (cú pháp) của thư viện jQuery nên nếu bạn biết jQuery thì rất dễ học bộ Framework này. Ngoài ra jQuery Mobile còn đi kèm một file CSS để xây dựng giao diện dựa trên nền tảng HTML5, CSS3, Javascript và Ajax.

Tại sao sử dụng jQuery Mobile?

Thông thường để xây dựng một ứng dụng Mobile thì chúng ta phải xây dựng giao diện, xử lý sự kiện, xử lý hiệu ứng nên mất khá nhiều thời gian, chưa tính đến những vấn đề như tương thích trình duyệt và hệ điều hành. Nhưng nếu sử dụng jQuery Mobile thì nó không còn khó khăn nữa vì phương châm của jQuery Mobile là "write less, do more" tức là "viết ít nhưng có tác dụng nhiều", điều đó có nghĩa là chúng ta không còn lo lắng vấn đề tương thích trình duyệt và các hệ điều hành của Smart Phone nữa.

II. jQuery Mobile Page

Page là một thành phần chính dùng để gom nhóm các nội dung liên quan tạo thành một khuôn (framework) và hiển thị lên trình duyệt, hay nói cách khác nó là một thành phần chính trong jQuery Mobile giúp tương tác với người dùng. Trong một trang HTML có thể có một Page duy nhất và chúng ta sử dụng Ajax để load nội dung theo yêu cầu của người dùng. Tuy nhiên cũng có những trường hợp một trang HTML có nhiều Page giúp cho việc chuyển trang nhanh hơn, trường hợp này thường dùng cho những trang ở dạng HTML tĩnh và không có thao tác với dữ liệu từ Server.

Cấu trúc HTML trong jQuery Mobile

Cần hiểu rõ cấu trúc HTML của một trang web và Page trong jQuery Mobile là hoàn toàn khác nhau, một trang HTML có thể có nhiều Page trong jQuery Mobile.

jQuery Mobile hoạt động trên HTML5 và CSS3 nên bắt buộc phải có phần khai báo <!DOCTYPE html>.

<!DOCTYPE html>

Thẻ meta viewport được đặt trong thẻ head để khai báo độ zoom và kích thước của trang. Nếu bạn không đặt thẻ này thì một số trình duyệt của Mobile sẽ hiển thị ở dạng giống phiên bản Desktop, nghĩa là sẽ phải zoom nó to lên mới có thể nhìn thấy rõ nội dung (1 số phiên bản page ở hệ điều hành windowPhone là 1 ví dụ của việc hiển thị giống với phiên bản desktop).

<meta name="viewport" content="width=device-width, initial-scale=1">
// độ rộng của content (phần hiển thị nội dung) bằng với độ rộng của thiết bị di động (device-width)

Để sử dụng được những module trong jQuery Mobile (thường là những thư viện js + css dùng sẵn) thì ta phải import nó vào trang web. Chúng ta có hai phần là import file Javascript (jQuery và jQuery Mobile) và import file CSS (đặt trong thẻ head).

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
.............
</body>

Trong ví dụ trên sử dụng đường dẫn từ CDN của jQuery Mobile.

Create a Page - Tạo 1 page

Sau đây chúng ta sẽ cùng tạo 1 page đơn giản chuẩn của jQuery Mobile

<body>
<div data-role="page">

  <div data-role="header">
    <h1>Welcome To My Homepage</h1>
  </div>

  <div data-role="main" class="ui-content">
    <p>I Am Now A Mobile Developer!!</p>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>

</div>
</body>

Bên trong thẻ body bạn có thể định nghĩa nhiều thẻ HTML. Như ở trên đã nói chúng ta có thể tạo nhiều Page trong đó, vậy làm thế nào để phân vùng cho từng Page? Rất đơn giản, bạn chỉ cần sử dụng data-role="page" để giải quyết vấn đề này:

<div data-role="page">
        ... // nội dung của page
</div>
// khai báo 1 thẻ div và cho thuộc tính data-role="page" vào như trên, toàn bộ khối div đó trở thành 1 page hoàn chỉnh

Bên trong page, khởi tạo 1 thẻ div với thuộc tính data-role="header" để tạo 1 toolbar ở trên đầu trang (chúng ta hay gọi là header thường sử dụng cho hiển thị tiêu đề trang hoặc button tìm kiếm).
Tương tự trên, <div> chứa thuộc tính data-role="main" được dùng để xác định phần nội dung của trang (chứa text, hình ảnh, các button hoặc các form......). <div> này được định nghĩa class="ui-content" là 1 class được định nghĩa trước trong file css import, để xác định padding và margin của khối nội dung trang (page content).
div có data-role="footer" tạo 1 toolbar ở đáy của trang (chúng ta hay gọi là footer chưa thông tin nhà cung cấp hoặc contact...)
Bên trong tất cả những khối chính kể trên (container) bạn có thể thêm bất kỳ thành phần HTML (HTML element) nào, các đoạn paragraph (<p>), hình ảnh, headings(tiêu đề), lists (các danh sách)...

Thêm nhiều trang trong jQuery Mobile

Trong jQuery Mobile bạn hoàn toàn có thể tạo nhiều page trong 1 file HTML đơn. Mỗi page được tạo trong từng khối <div data-role="page", để phân biệt từng page thì chúng ta đặt ID riêng cho chúng và sử dụng thuộc tính href của thẻ a để chuyển hướng sang một trang khác nằm trong trang HTML hiện tại:

<div data-role="page" id="page-1">
  <div data-role="main" class="ui-content">
    // link đến element có id="#page-2" nói cách khác là chuyển đến trang 2
    <a href="#page-2">Go to Page Two</a>
  </div>
</div>

<div data-role="page" id="page-2">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>
..........
// trang thứ n
<div data-role="page" id="page-n">
        ...
</div>

Tip : thời gian tải trang sẽ bị ảnh hưởng bởi các ứng dụng web với rất nhiều nội dung (văn bản, liên kết, hình ảnh, kịch bản...) nên trong trường hợp các trang của bạn có nhiều nội dung động thì bạn có thể sử dụng tập tin bên ngoài thay vì liên kết các trang nội bộ

<a href="externalfile.html">Go To External Page</a>

Using Pages as Dialogs

Nếu bạn muốn page mới hiển thị ở dạng popup (dialog) thì bổ sung thuộc tính data-dialog="true" vào trong page đó:

<div data-role="page" data-dialog="true" id="pagetwo">
  <div data-role="main" class="ui-content">
    <a href="#pageone">Go to Page One</a>
  </div>
</div>

Demo : http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_dialog

Note

Page là thành phần quan trọng nhất trong một trang web viết bằng jQuery Mobile. Cần phân biệt được cấu trúc HTML của một trang web khác với định nghĩa Page trong jQuery Mobile như thế nào.
Bạn có thể tạo nhiều pages trong một trang HTML trong trường hợp dữ liệu tĩnh để giúp việc chuyển tiếp giữa các trang được nhanh hơn, đồng thời giảm tải request lên server.

III. jQuery Mobile Transitions

jQuery Mobile Framework cho phép chuyển trang với nhiều hiệu ứng khác nhau dựa vào CSS3 Transitions, bạn có thể áp dụng cho mọi liên kết chuyển trang giữa các page tĩnh hoặc có sử dụng Ajax.

jQuery Mobile có một loạt các hiệu ứng để chuyển trang.

Lưu ý: Để dùng được các hiệu ứng chuyển tiếp này, trình duyệt web của bạn phải hỗ trợ CSS3 3D Transforms (dưới đây là bảng phiên bản tối thiểu của các trình duyệt để có thể hỗ trợ CSS3 3D Transforms):

jQuery Mobile cung cấp sự hỗ trợ cho hiệu ứng chuyển tiếp trang dựa vào-CSS (lấy cảm hứng từ jQtouch), được áp dụng khi điều hướng đến một trang mới và quay lại.

Các hiệu ứng chuyển tiếp (dùng cho cả các pages và dialogs) có thể được áp dụng cho bất kỳ liên kết hoặc form bằng cách bổ sung thêm thuộc tính data-transition="type" với type là 1 trong các giá trị sau:

fade (mờ dần) : hiệu ứng mặc định cho tất cả các liên kết trong jQuery Mobile, trang cũ mờ dần rồi biến mất và trang tiếp theo từ từ hiện ra.
flip : lật sang trang tiếp theo từ sau ra trước.
flown : ném trang hiện tại ra khỏi view và đi kèm sau đó là trang tiếp theo.
pop : đi đến trang tiếp theo như 1 cửa sổ popup
slide : hiệu ứng chuyển tiếp ngang, trượt từ phải sang trái.
slidefade : trượt từ phải sang trái, trang hiện tại mờ dần rồi hiện trang tiếp theo.
slideup : trượt dọc từ dưới lên trên.
slidedown : trượt dọc từ trên xuống dưới.
turn : trang tiếp theo được đẩy ra dần dần.
none : không có hiệu ứng chuyển tiếp.

Phần mô tả hiệu ứng trên đây có thể còn chưa rõ ràng khó hiểu, bạn có thể vào đường link sau để xem rõ chi tiết bảng hiệu ứng và demo rõ ràng cho từng loại (cả cho page và dialog) : http://www.w3schools.com/jquerymobile/jquerymobile_transitions.asp

Ví dụ cho trường hợp hiệu ứng chuyển tiếp là slide (chuyển tiếp trang bình thường):

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

Trường hợp bạn muốn chuyển trang ở dạng Dialog ngoài việc thêm thuộc tính data-dialog="true" vào thẻ <div> chứa page thì còn 1 cách đơn giản nữa là chúng ta chỉ cần bổ sung thuộc tính data-rel="dialog" vào các link chuyển tiếp:

<a href="#anylink" data-transition="slide" data-rel="dialog">Slide to Page Two</a>

Tip : tất cả các hiệu ứng trên cũng có hỗ trợ các hành động ngược lại (ví dụ trong hiệu ứng slide bạn muốn để trang trượt từ trái sang phải thay vì trượt từ phải sang trái như mặc định), rất đơn giản chỉ cần xét giá trị cho thuộc tính data-direction="reverse" là được, ví dụ:

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

Hiệu ứng transitions là hiệu ứng CSS3 nên một số trình duyệt cũ trên Browser sẽ không chạy được. Tuy nhiên đó không phải là vấn đề vì jQuery Mobile xây dựng ứng dụng web trên Mobile, mà hầu hết các thiết bị hiện đại hiện nay đều hỗ trợ HTML5 và CSS3 tốt.

IV. jQuery Mobile Buttons

jQuery Mobile hỗ trợ một số style button căn bản để tạo giao diện website, những button này rất thô sơ nên để đẹp thì phải phụ thuộc vào giao diện của bạn, tức là bạn phải custom lại CSS để giống với bản Design PSD.

Chúng ta sẽ tìm hiểu một số style button như:

Button cơ bản
Button bo góc
Button shadow
Button có Icon
Button theo vị trí (position)
Button inline
Group Button

Buttons trong jQuery Mobile

Có 3 cách để tạo button trong jQuery Mobile :

Sử dụng thẻ <input> có type="button". Ví dụ :

<input type="button" value="Button">

Sử dụng thẻ <button> sau đó thêm class="ui-btn". Ví dụ :

<button class="ui-btn">Button</button>

Sử dụng thẻ <a> sau đó thêm class="ui-btn". Ví dụ:

<a href="#anylink" class="ui-btn">Button</a>

Ví dụ button cơ bản:

Các button trong jQuery Mobile được định kiểu tự động làm cho chúng bắt mắt hấp dẫn và có thể sử dụng được cả ở thiết bị di động và máy tính. Khuyến nghị sử dụng thẻ <a> với class="ui-btn" để link giữa các trang, và thẻ <input> hoặc button dùng cho form submit.

Grouped Buttons - Gom nhóm button trong jQuery Mobile

Bạn có thể dễ dàng gom nhóm nhiều button hiển thị liên tiếp nhau bằng cách thêm một thẻ div bao quanh các button như sau:

<div data-role="controlgroup" data-type="horizontal">
    ...
</div>

Trong đó:

data-role có giá trị là "controlgroup" biểu thị div này đóng vai trò là 1 group button
data-type sẽ có giá trị là "horizontal" (các button sắp xếp theo chiều ngang) hoặc "vertical" (các button sắp xếp theo chiều dọc).

Bạn có thể vào đây để tự mình trải nghiệm những điều này. Và đây là hình ảnh minh hoạ cho group button và cách sắp xếp của chúng :

Theo mặc định, nhóm các button được nhóm lại theo chiều dọc và không có margin (khoảng cách) và không gian giữa chúng. Và chỉ button đầu và button cuối của group được làm tròn góc (bo góc - ) để tạo ra một cái nhìn hài hoà cho nhóm button.

Bo góc - Corners:

Nếu bạn muốn button đơn của mình có bo góc thì bổ sung class ui-corner-all vào button đó:

<a href="#" class="ui-btn ui-corner-all">Button</a>
<button class="ui-btn ui-corner-all">Button</button>

Dưới đây là hình ảnh của 2 button, 1 được bo góc và 1 không được bo góc để bạn so sánh trực quan:

Back Buttons - button giúp quay trở lại trang trước đó

Để quay lại trang trước khi bạn tới trang này, rất đơn giản chỉ cần tạo 1 button ở trang hiện tại và thêm thuộc tính data-rel="back" vào button đó.

<a href="#" class="ui-btn" data-rel="back">Go Back</a>

Thuộc tính data-rel="back" này sẽ bỏ qua mọi giá trị bên trong neo href để trở về trang trước đó của nó. Điều này được thể hiện rất rõ khi bạn chạy demo đoạn code sau :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://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>Page 1</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#pagetwo" class="ui-btn">Go to Page Two</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

<div data-role="page" id="pagetwo">
  <div data-role="header">
    <h1>Page 2</h1>
  </div>

  <div data-role="main" class="ui-content">
    //button back có giá trị neo href = #pagethree -> neo chuyển đến trang 3
    <a href="#pagethree" class="ui-btn" data-rel="back">Go Back</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

<div data-role="page" id="pagethree">
  <div data-role="header">
    <h1>Page 3</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn" data-rel="back">Go Back</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div>

</body>
</html>

Trong đoạn code demo trên tôi có tạo ra 3 page. Ở page 1 có 1 button để chuyển đến trang 2. Ở trang 2 có 1 button back <a href="#pagethree" class="ui-btn" data-rel="back">Go Back</a> . Theo như đây thì giá trị của neo href="#pagethree" tức là sẽ chuyển tiếp đến trang 3, nhưng vì có giá trị data-rel="back" nên khi click button này thì sẽ chuyển tiếp về trang trước nó là trang 1 thay vì trang 3:

Inline Buttons

Những button trên hiển thị ở dạng full width (rộng bằng kích thước màn hình), còn nếu muốn một button có chiều dài phụ thuộc vào nội dung thì thêm class ui-btn-inline:

<a href="#" class="ui-btn ui-btn-inline">btn</a>
<button class="ui-btn ui-btn-inline">btn</button>

Hình minh hoạ về 1 default button và 1 inline button:

Shadow

Hiệu ứng Shadow cũng có thể được thêm bằng cách thêm class ui-shadow vào button.

<a href="#" class="ui-btn ui-shadow">Btn</a>

Theme:

Mỗi theme sẽ có một style khác nhau. Ví dụ sau này bạn tạo trang web dựa vào layout PSD của bạn thì bạn sẽ định nghĩa một theme và viết bổ sung các thuộc tính cho chúng.

Áp dụng từng theme khác nhau sẽ thay đổi màu sắc của nền button, thay đổi màu sắc text bên trong của nó, size button hoặc size text, hiệu ứng cho button ...... - style riêng cho từng theme (class).

Ví dụ như class ui-btn-b (class có sẵn của jQuery Mobile) thì màu nền sẽ chuyển thành đen và chữ bên trong button là trắng (còn button mặc định là nền xám và text đen)

Mini

Nếu button mặc định có kích thước quá lớn thì bạn có thể sử dụng class ui-mini để chuyển nó về định dạng nhỏ hơn.

<a href="#" class="ui-btn ui-mini">Btn</a>

Disabled - Vô hiệu hoá button:

Để thiết lập một button ở dạng disabled thì bạn bổ sung class ui-state-disabled vào cho button đó.

<a href="#" class="ui-btn ui-state-disabled ui-btn-a">Left</a>
<button class="ui-btn ui-state-disabled ui-btn-b">Left</button>

Tip : Các định dạng button trên không thể đáp ứng hết các layout của các Designer được nên nếu muốn button của mình sinh động phong phú hơn thì bạn cần phải bổ sung thêm CSS bằng cách tạo một file CSS theme riêng và sử dụng như theme mặc định của jQuery Mobile.