bao cao ltdt jquery mobile

12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile

January 2, 2013

Muïc LuïcChương I – Tổng quan về JQuery....................................................................................2

1. Giới thiệu về JQuery.......................................................................................22. Để sử dụng Jquery bạn cần hiểu biết gì?.........................................................33. Tại sao phải dùng Jquery?...............................................................................34. Jquery làm được những gì?.............................................................................35. Làm sao để sử dụng Jquery?...........................................................................4

Chương II – Jquery hoạt động như thế nào....................................................................61. Cú pháp và đối tượng......................................................................................72. Điều khiển CSS của đối tượng........................................................................62.1. Lấy giá trị của một thuộc tính CSS............................................................72.2. Đặt giá trị mới cho CSS.............................................................................72.3. Ví dụ minh họa...........................................................................................73. Điều khiển thuộc tính của đối tượng...............................................................83.1. Lấy giá trị thuộc tính của đối tượng..........................................................93.2. Gán giá trị mới cho đối tượng...................................................................93.3. Ví dụ minh họa.........................................................................................104. Gán sự kiện và xử lý sự kiện.........................................................................104.1. Gán sự kiện vào đối tượng.......................................................................104.2. Hủy sự kiện vào đối tượng.......................................................................115. Chuyển động, thay đổi hình dạng của đối tượng..........................................136. Một vài hàm API phổ biến thường dùng.......................................................156.1. Hàm .fadeIn()..........................................................................................166.2. Hàm .fadeOut()........................................................................................166.3. Hàm .fadeTo().........................................................................................166.4. Hàm .Show()............................................................................................176.5. Hàm .Hide().............................................................................................18

Chương III – Giới thiệu JQuery Mobile........................................................................191. Giới thiệu sơ lược..........................................................................................192. Đặc điểm JQuery Mobile..............................................................................202.1. Khái niệm về JQuery Mobile...................................................................202.2. Các đặc tính cở bản trong JQuery Mobile..............................................202.3. Hổ trợ trình duyệt JQuery Mobile...........................................................212.4. Làm sao sử dụng được JQuery Mobile...................................................213. Tìm hiểu về JQuery Mobile..........................................................................223.1. JQuery Mobile làm được gì.....................................................................223.2. Các thành phần trong JQuery Mobile.....................................................233.3. Ví dụ minh họa về JQuery Mobile...........................................................26

GVHD: NGUYỄN VĂN A 1


January 2, 2013

CHƯƠNG I – TỔNG QUAN VỀ JQUERY1. Giới thiệu JQuery

- Với sự phát triển rất mau lẹ của Internet, người dùng ngày càng quan tâm hơn đến hình thức của một trang web. Trước đây một trang web chỉ cần có banner, nội dung và ít footer hời hợt là đã được cho là một trang web hoàn chỉnh. Nhưng bây giờ trang web đó phải có banner bắt mắt, nội dung hay và còn nhiều hiệu ứng lạ mắt khác nữa thì mới có thể thu hút được người đọc.

- Chính vì thế những web designer bắt đầu chú ý đến các thư viện JavaScript mở như jQuery để tạo ra các hiệu ứng có thể tương tác trực tiếp với người đọc một cách nhanh chóng và dễ dàng hơn rất nhiều là sử dụng thuần JavaScript.

- jQuery là một Javascript Framework. Nó là một bộ thư viện được xây dựng để hỗ trợ các nhà lập trình web tạo ra các tương tác trên website một cách nhanh nhất. JQuery thêm tương tác Ajax vào trong trang web của bạn, đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường.

- jQuery được phát triển bởi John Resig vào năm 2006 và sau 6 năm giờ nó đã trở thành một bộ thư viện nổi tiếng với hàng chục nghìn plugin hay, hàng triệu người sử dụng, và hầu hết các website hiện nay đều ứng dụng nó.

- jQuery có mã nguồn mở và hoàn toàn miễn phí, bạn có thể download nó tại https://jQuery.com.

- Hoặc có thể sử dụng trực tiếp jQuery lưu trữ tại jQuery hay Google từ 2 địa chỉ sau



January 2, 2013

2. Để sử dụng jQuery bạn cần những hiểu biết gì?

- JQuery không phải là một ngôn ngữ mới mà chỉ là thư viện hàm javascript. jQuery hướng tới mục đích làm đơn giản hóa những công việc phức tạp trước đây khi dùng javascript để điều khiển DOM, CSS,… Do vậy, để học jQuery bạn cần tối thiểu nắm bắt được những kiến thức sau:

HTML

JAVASCRIPT

CSS

3. Tại sạo phải dùng JQuery

- jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường.

- Bên cạnh đó, việc sử dụng jQuery giúp giải quyết tốt vấn đề xung đột giữa các trình duyệt web.

- Học jQuery rất đơn giản, nếu như bạn nắm vững CSS, bạn có thể tiếp cận và sử dụng jQuery nhanh chóng.

- Ngoài jQuery còn có các thư viện javascript nổi tiếng khác như mooTools, Prototype, Dojo... thế nhưng jQuery có vẻ thu hút các web designer hơn là vì nó có các ưu điểm.

Ư u đi ểm của jQuery:

Hỗ trợ tốt việc xử lí các vấn đề thường gặp (DOM, AJAX…)

Tương thích nhiều trình duyệt web phổ biến.

Nhỏ gọn, dễ dùng, có nhiều tài liệu hướng dẫn sử dụng chi tiết.

Ít xung khắc với các thư viện Javascript khác.

Plugin phong phú.



January 2, 2013

4. JQuery có thể làm được những gì- Hướng tới các thành phần trong tài liệu HTML: Nếu không sử dụng thư viện

JavaScript này, bạn phải viết rất nhiều dòng code mới có thể đạt được mục tiêu là di chuyển trong cấu trúc cây (hay còn gọi là DOM = Document Object Model) của một tài liệu HTML và chọn ra các thành phần liên quan. Jquery cho phép bạn chọn bất cứ thành phần nào của tài liệu để “vọc” một cách dễ dàng như sử dụng CSS.

- Thay đổi giao diện của một trang web: CSS là công cụ rất mạnh để định dạng một trang web nhưng nó có một nhược điểm là không phải tất cả các trình duyệt đều hiển thị giống nhau. Cho nên jQuery ra đời để lấp chỗ trống này, vì vậy các bạn có thể sử dụng nó để giúp trang web có thể hiển thị tốt trên hầu hết các trình duyệt. Hơn nữa jQuery cũng có thể thay đổi class hoặc những định dạng CSS đã được áp dụng lên bất cứ thành phần nào của tài liệu HTML ngay cả khi trang web đó đã được trình duyệt load thành công. Thay đổi nội dung của tài liệu. Jquery không phải chỉ có thể thay đổi bề ngoài của trang web, nó cũng có thể thay đổi nội dung của chính tài liệu đó chỉ với vài dòng code. Nó có thể thêm hoặc bớt nội dung trên trang, hình ảnh có thể được thêm vào hoặc đổi sang hình khác, danh sách có thể được sắp xếp lại hoặc thậm chí cả cấu trúc HTML của một trang web cũng có thể được viết lại và mở rộng. Tất cả những điều này bạn hoàn toàn có thể làm được nhờ sự giúp đỡ của API (Application Programming Interface = Giao diện lập trình ứng dụng).

- Tương tác với người dùng: Cho dù công cụ bạn dùng có mạnh mẽ đến mấy, nhưng nếu bạn không có quyền quyết định khi nào nó được sử dụng thì công cụ đó cũng coi như bỏ. Với thư viện javaScript như jQuery, nó cho bạn nhiều cách để tương tác với người dùng ví dụ như khi người dùng nhấp chuột vào đường link thì sẽ có gì xảy ra. Nhưng cái hay của nó là không làm cho code HTML của bạn rối tung lên chính là nhờ các Event Handlers. Hơn nữa Event Handler API sẽ bảo đảm rằng trang web của bạn tương thích hầu hết với các trình duyệt, điều này đã và đang làm đau đầu rất nhiều các web designer.

- Tạo hiệu ứng động cho những thay đổi của tài liệu: Để tương tác tốt với người dùng, các web designer phải cho người dùng thấy được hiệu ứng gì sẽ xảy ra khi họ làm một tác vụ nào đó. Jquery cho phép bạn sử dụng rất nhiều hiệu ứng động như mờ dần, chạy dọc chạy ngang v.v.. và nếu vẫn chưa đủ, nó còn cho phép bạn tự tạo ra các hiệu ứng của riêng mình.

- Lấy thông tin từ server mà không cần tải lại trang web: Đây chính là công nghệ ngày càng trở nên phổ biến Asynchronous JavaScript And XML (AJAX), nó giúp



January 2, 2013người thiết kế web tạo ra những trang web tương tác cực tốt và nhiều tính năng. Thư viện jQuery loại bỏ sự phức tạp của trình duyệt trong quá trình này và cho phép người phát triển web có thể tập trung vào các tính năng đầu cuối. Đơn giản hoá các tác vụ javaScript. Ngoài những tính năng như đã nêu ở trên, jQuery còn cho phép bạn viết code javaScript đơn giản hơn nhiều so với cách truyền thống như là các vòng lặp và điều khiển mảng.

5. Làm sao để sử dụng jQuery?- jQuery đơn thuần là một tập tin javascript, để sử dụng các hàm jQuery, bạn cần tải

về tập tin này rồi dùng thẻ <script> để chèn vào trang web mà bạn muốn dùng cũng giống như chèn những tập tin javascript do bạn viết vậy.

- Có thể tải về tập tin jQuery phiên bản mới nhất tại trang web chính thức của jQuery tại đây: http://jquery.com/ Truy cập vào website rồi ấn nút “Download (jQuery)” để tải về.

Hình 1.1

(Thông thường khi ấn vào nút này thì trình duyệt sẽ mở lên nội dung của tập tin chứ không tải về. Bạn chỉ việc bấm Ctrl+S để lưu lại nội dung thành một tập tin *.js)

Hình 1.2



January 2, 2013

CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO?

Phần này tập trung mô tả những cú pháp cơ bản của jQuery cùng với vài mục đích sử dụng phổ biến. Sau đó, dựa vào những giới thiệu trong phần này mà bạn có thể tự mình nghĩ ra những mục đích dùng khác trong việc khai thác triệt để các hàm API sẽ được liệt kê đầy đủ và chi tiết trong phần sau

Hình 2.1

1. Cú pháp và đối tượng- jQuery sử dụng cùng một cách như CSS để lựa chọn những phần tử HTML (thẻ

HTML) và thực hiện vài việc gì đó lên những đối tượng được chọn. Việc chọn đối tượng



January 2, 2013có thể thực hiện theo kiểu chọn một đối tượng duy nhất (đơn lẻ) hoặc một tập hợp các đối tượng có cùng đặc điểm (nhiều thành phần). Nguyên tắc để chọn cụ thể như sau:

Cú Pháp | Chọn đối tượng thao tác

$ (doi_tuong)

$ : Ký tự bắt đầu của jQuery trong việc xác định đối tượng.

(doi_tuong) : Tiêu chí để xác định đối tượng. Liệt kê cụ thể những trường hợp như bên dưới

- Sau đây là bảng liệt kê các tiêu chuẩn mẫu để chọn đối tượng:

$(this) : Chọn đối tượng hiện tại (đối tượng đặc biệt) | đơn lẻ

$(document) : Chọn đối tượng toàn bộ tài liệu (đối tượng đặc biệt) | đơn lẻ

$(window) : Chọn đối tượng về cửa sổ hiện hành (đối tượng đặc biệt) | đơn lẻ

$('p') : Chọn tất cả thẻ <p> | nhiều thành phần

$('.ClassName') : Chọn tất cả thẻ HTML có class=’ClassName’ | nhiều thành phần

$('#IdValue') : Chọn thẻ HTML có id=’IdValue’ | đơn lẻ

2. Điều khiển CSS của đối tượng

2.1. Lấy giá trị của một thuộc tính CSS

- Khi dùng jQuery, việc tác động trực tiếp và lấy giá trị một thuộc tính CSS của đối tượng đang được chọn vô cùng đơn giản vì bạn sẽ sử dụng tên thuộc tính và giá trị lấy được sẽ có định dạng y như khi định nghĩa CSS thuần.

Cú Pháp | Lấy giá trị của một thuộc tính CSS

$ (doi_tuong).css(‘ten_css’);

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên. ten_css : là tên của thuộc tính css như font-size, color, background-color, …

2.2. Đặt giá trị mới cho CSS

- Tương tự như lấy giá trị của thuộc tính CSS, việc gán giá trị cho nó cũng khá là đơn giản.

Cú Pháp | Lấy giá trị của một thuộc tính CSS

$ (doi_tuong).css(‘ten_css’,’gia_tri’);

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên. ten_css : là tên của thuộc tính css như font-size, color, background-color, … gia_tri : là giá trị bạn muốn gán cho CSS



January 2, 2013 Ví dụ: để lấy giá trị thuộc tính CSS font-family của tất cả thẻ <p> ta có câu lệnh

jQuery sau:

2.3. Ví dụ minh họa

Hình 2.2

3. Điều khiển thuộc tính của đối tượng



January 2, 2013

3.1. Lấy giá trị thuộc tính của đối tượng

Cú Pháp | Lấy giá trị một thuộc tính HTML của đối tượng

$ (doi_tuong).atrr(‘thuoc_tinh’);

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên. thuoc_tinh : tên của thuộc tính của HTML

Ví dụ 1, ta có thẻ <img id='vidu_image' src='simple.jpg' /> Nếu muốn lấy thuộc tính src của thẻ này, ta dùng:

Ví dụ 2, ta có thẻ <input type='txtUID' id='vidu' /> , nếu muốn lấy giá trị thuộc tính value của thẻ này. Ta có thể dùng câu lệnh jQuery tương tự.

Tuy nhiên, đối với ví dụ 2, bạn cũng có thể dùng câu lệnh jQuery như sau để lấy giá trị của thuộc tính value.

- Tùy vào đối tượng là thẻ nào mà thuộc tính chỉ định sẽ có tồn tại hay không. Nếu không tồn tại thì câu lệnh trả về undefined. Ví dụ, nếu bạn cố gắng lấy thuộc tính color của thẻ <img> thì kết quả trả về là undefined vì thẻ <img> không có thuộc tính color.

3.2. Gán giá trị mới cho thuộc tính

- Việc gán lại giá trị của thuộc tính cũng đơn giản và tương tự như lấy giá trị thuộc tính. Chỉ khác biệt là ta sẽ có 2 tham số bên trong attr(). Nếu bạn cố gắng gán



January 2, 2013một thuộc tính cho một đối tượng HTML không hỗ trợ thuộc tính đó thì câu lệnh sẽ không được thực thi.

Cú Pháp | Lấy giá trị một thuộc tính HTML của đối tượng

$ (doi_tuong).atrr(‘thuoc_tinh’,’gia_tri’);

doi_tuong : là tiêu chuẩn xác định đối tượng như mô tả ở trên. thuoc_tinh : tên của thuộc tính của HTMLgia_tri : giá trị muốn gán cho thuộc tính.

Ví dụ, ta có thẻ html <img id='vidu_image' src='simple.jpg' />. Ta muốn đổi thuộc tính src thành new_image.jpg ta viết:

3.3. Lấy ví dụ minh họa.



January 2, 2013

Hình 2.3

4. Gán sự kiện và xử lý sự kiện.

4.1. Gán sự kiện vào đối tượng.

- Phần này sẽ trình bày việc dùng jQuery để gán sự kiện lên đối tượng và điều khiển xử lý sự kiện đó khi nó xảy ra. Nội dung ở đây đề cập đến chỉ bao gồm những cách dùng phổ thông nhất để giúp bạn nắm bắt và làm quen. Những nội dung chi tiết hơn về các sự kiện sẽ được đề cập đầy đủ trong những phần tiếp theo trong tài liệu này.

Cú Pháp | Gán sự kiện và hàm điều khiển cho sự kiện vào đối tượng

$ (doi_tuong).ten_su_kien(‘ham_dieu_khien’);

doi_tuong : Tiêu chí xác định đối tượng như đã nói trong phần giới thiệu.



January 2, 2013ten_su_kien : Tên của sự kiện.ham_dieu_khien : Hàm điều khiển của sự kiện khi sự kiện phát sinh.

Hàm điều khiển có thể định nghĩa mới ngay bên trong câu lệnh gán sự kiện hoặc có thể khai báo hàm đã được định nghĩa riêng bên ngoài.

Ví dụ

Hình 2.4

4.2. Hủy sự kiện vào đối tượng

- Khi đã gán sự kiện cho một đối tượng rồi, nhưng trong một số trường hợp hoặc vì vài lý do nào đó mà bạn muốn hủy sự kiện đó thì jQuery giúp bạn làm việc này khá đơn giản.



January 2, 2013

- Còn muốn hủy bỏ xử lý toàn bộ sự kiện của một đối tượng, ta dùng cú pháp này:

- Kết hợp những kiến thức trên về sự kiện, ta sẽ lần lượt đi qua ví dụ để có thể hiểu rõ hơn và biết cách dùng thành thạo hơn đối với từng trường hợp và vấn đề phát sinh. Chủ yếu là vấn đề gán và hủy sự kiện.

Ví dụ

Hình 2.5

5. Chuyển động, thay đổi hình dạng của đối tượng- Chuyển động (animation) là một trong những API thú vị nhất trong

jQuery. Bạn sẽ dễ dàng điều hướng, thay đổi hình dạng, vị trí của đối tượng vô cùng dễ dàng và thuận tiện.



January 2, 2013

Để có thể nắm rõ hơn về animate(). Chúng ta sẽ lần lượt đi qua một vài ví dụ trong nhiều trường hợp sử dụng như sau:

Ví Dụ

DEMO



January 2, 2013

Hình 2.6

Ví Dụ 2



January 2, 2013

6. Một vài hàm API phổ biến thường hay dùng.- Đây là danh sách những hàm API jQuery hay dùng nhất để bạn có thể

tham khảo nhanh và phục vụ vài mục đích đơn giản tỏng quá trình làm quen với jQuery cũng như làm cái bài tập. Cũng như những nội dung bên trên, những cách dùng liệt kê trong phần này cũng chỉ là những trường hợp phổ thông nhất.

6.1. Hàm .fadeIn()

Hiệu ứng hiển thị dần dần một đối tượng từ trạng thái trong suốt. Nghĩa là trạng thái ban đầu của đối tượng phải là trong suốt (opacity = 0).

Ví Dụ: Hiển thị dần đối tượng có id=’vidu3’ trong khoảng thời gian 600 mili giây(tương ứng ‘slow’). Sau khi xong thì hiển thị hộp thoại “Đã xong”.

6.2. Hàm .fadeOut()

Hàm này có tác dụng gây hiệu ứng ngược lại với hàm .fadeIn(), nghĩa là nó sẽ làm cho một đối tượng trở nên trong suốt từ từ. Các tham số và cách sử dụng ý như .fadeIn().

6.3. Hàm .fadeTo()

Hàm này có thể sử dụng cho cả hai trường hợp .fadeIn() và .fadeOut() khi nó hướng tới mục đích chuyển đổi tự trạng thái hiện tại đến một trạng thái được chỉ định. Tùy vào giá trị hiện tại và giá trị đến mà sẽ có hiệu ứng fadeIn() hay .fadeOut().



January 2, 2013

Ví dụ: Giả sử ta có một thẻ <div id=”vidu”></div> đang có độ opacity là 0.5 , ta sẽ xét hiệu ứng của những lệnh dưới đây lên đối tượng “vidu” này:

6.4. Hàm .show()

Về bản chất nếu không có tham số thì hàm này sẽ gọi .css('display', 'block'). Còn nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeIn().



January 2, 20136.5. Hàm .hide()

Trái ngược với .show(), nếu không có tham số thì hàm này sẽ gọi .css('display', 'none'). Còn nếu có tham số như cú pháp dưới đây thì nó hoạt động tương tự như .fadeOut(). Cú



January 2, 2013CHƯƠNG 3: GIỚI THIỆU JQUERY MOBILE

1. Giới thiệu sơ lược- Ngày nay, với sự phát triển vượt bậc của các smartphone và tablet, chúng ta có thể

truy cập website ở bất cứ lúc nào. Tuy nhiên, một nhược điểm rất lớn của các website (đặc biệt là website Việt Nam) sử dụng Flash quá nhiều. Điều này đã làm cho các thiết bị di động gặp khó khăn trong quá trình truy cập (IOS không hỗ trợ chạy Flash khi lướt web, nếu muốn các bạn phải cài đặt thêm plug-in. Điều này sẽ rất khó khăn đối với một số người không chuyên về tin học và sẽ làm giảm thời lượng Pin sử dụng). Chính vì vậy Jquery Mobile đã ra đời.

- Bên cạnh Sencha Touch, Jquery Mobile cũng được ủng hộ mạnh mẽ và phát triển trên nền tảng Jquery. Tuy nhiên nó dễ chịu hơn so với Sencha Touch vì nó không ảnh hưởng đến việc code chức năng web (PHP, ASP...). Cách sử dụng như chúng ta dùng Jquery thông thường.

- Jquery Mobile ra đời khoảng tháng 8/2010 nhưng đã phát triển rất nhanh do tính phổ biến, mã nguồn mở và cú pháp tương tự Jquery, nhiều plugin miễn phí, hiệu ứng chuyển động tốt. Và quan trọng hơn hết là tương thích với tất cả các thiết bị di động smartphone trên nền IOS, Android, Blackberry...

- Hiện tại. Jquery Mobile vẫn đang được tiếp tục phát triển và hoàn thiện. Tuy nhiên. trong tương lai không xa đây sẽ là một thư viện hỗ trợ mạnh mẽ công nghệ HTML5 và CSS3 cho các thiết bị cảm ứng.

- jQuery Mobile, một khung công tác giao diện người dùng (UI), cho phép bạn viết một ứng dụng web di động chức năng mà không cần viết một dòng mã JavaScript. Trong bài này, hãy tìm hiểu về các tính năng của khung công tác này, gồm các trang cơ bản, các thanh công cụ điều hướng, các nút điều khiển biểu mẫu và các hiệu ứng chuyển tiếp.

Để tìm hiểu jQuery Mobile, bạn sẽ cần:

Xem trước về HTML.

Hiểu các điều cơ bản của JavaScript.



January 2, 2013 Kiến thức cơ bản về jQuery.

- Bạn có thể tải về mã nguồn của trình cắm thêm jQuery được sử dụng trong bài này từ bảng Tải về dưới đây. Phần Tài nguyên có thông tin về jQuery, JavaScript, DOM, HTML5 và nhiều hơn nữa.

2. Đặc điểm của jQuery Mobile2.1. Khái niệm

- jQuery Mobile là một khung công tác phát triển giao diện người dùng web thân thiện với cảm ứng cho phép bạn phát triển các ứng dụng web di động làm việc trên các máy điện thoại thông minh và các máy tính bảng. Khung công tác jQuery Mobile được xây dựng trên đỉnh lõi jQuery và cung cấp một số phương tiện, gồm thao tác và chuyển dịch DOM (Mô hình đối tượng tài liệu), HTML và XML, xử lý các sự kiện, thực hiện truyền thông máy chủ bằng cách sử dụng Ajax, cũng như các hiệu ứng hình ảnh và hình ảnh động cho các trang web. Bản thân khung công tác di động là một bản tải bổ sung, riêng biệt có kích cỡ khoảng 12KB (đã rút gọn và nén) từ lõi jQuery có kích cỡ khoảng 25KB khi đã rút gọn/nén. Cũng như với phần còn lại của khung công tác jQuery, jQuery Mobile là thư viện được cấp phép kép (MIT và GPL), miễn phí.

2.2. Các dặc tính cơ bản của JQuery Mobile

- Khá đơn giản: Khung công tác dễ sử dụng. Bạn có thể phát triển các trang chủ yếu bằng cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu hoặc không dùng mã này.

- Nâng cấp tăng dần và khả năng chịu lỗi: Trong khi jQuery Mobile sử dụng mã HTML5, CSS3 và JavaScript mới nhất, không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ như vậy. Triết lý của JQuery Mobile là hỗ trợ cả hai thiết bị có khả năng cấp cao và khả năng cấp thấp hơn, chẳng hạn như những thiết bị không hỗ trợ JavaScript và vẫn cung cấp các trải nghiệm tốt nhất có thể.

- Tính dễ dung: jQuery Mobile được thiết kế với chủ ý dễ dùng. Nó có sự hỗ trợ cho Các ứng dụng Internet phong phú có thể dễ dùng (WAI-ARIA - Accessible Rich Internet Applications) để giúp làm cho các trang web có thể dễ dùng với khách truy cập bị tàn tật nhờ sử dụng các công nghệ trợ giúp.

- Kích cỡ nhỏ: Kích cỡ tổng thể của khung công tác di động jQuery là tương đối nhỏ khoảng 12KB với thư viện JavaScript, 6KB với CSS, cộng với một số biểu tượng.

- Tạo chủ đề: Khung công tác này cũng cung cấp một hệ thống chủ đề, cho phép bạn đưa ra kiểu dáng ứng dụng riêng của mình. Khi được dùng với các bộ công cụ như là


http://www.ibm.com/developerworks/vn/library/12/wa-jqmobile/index.html#resources

http://www.ibm.com/developerworks/vn/library/12/wa-jqmobile/index.html#download


January 2, 2013PhoneGap, có sử dụng các công nghệ web để xây dựng các ứng dụng độc lập, khung công tác jQuery Mobile có thể giúp đơn giản hóa việc phát triển ứng dụng của bạn

2.3. Hổ trợ trình duyệt JQuery Mobile

- Chúng tôi đã đi một chặng đường dài với sự hỗ trợ trình duyệt của thiết bị di động, nhưng không phải tất cả các thiết bị di động đều cung cấp sự hỗ trợ cho HTML5, CSS 3 và JavaScript. Lĩnh vực này là nơi sự hỗ trợ nâng cấp tăng dần và khả năng chịu lỗi của jQuery Mobile đi vào. Như đã nêu, jQuery Mobile hỗ trợ cả hai thiết bị có khả năng cấp cao và cấp thấp, chẳng hạn như những thiết bị không hỗ trợ JavaScript. Nâng cấp tăng dần có các nguyên tắc cốt lõi sau:

Tất cả các nội dung cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

Tất cả các chức năng cơ bản nên có thể dễ dùng với tất cả các trình duyệt.

Bố trí nâng cao được cung cấp bởi CSS liên kết ngoài.

Hành vi nâng cao được cung cấp bởi JavaScript liên kết ngoài.

Các sở thích trình duyệt của người dùng cuối được tôn trọng.

- Tất cả các nội dung cơ bản nên trình diễn (như đã thiết kế) trên các thiết bị cơ bản, trong khi nhiều nền tảng và các trình duyệt nâng cao hơn sẽ dần dần được nâng cấp bằng CSS và JavaScript liên kết ngoài, bổ sung.

jQuery Mobile hiện đang cung cấp sự hỗ trợ cho các nền tảng di động sau đây:

Apple® iOS: iPhone, iPod Touch, iPad (tất cả các phiên bản).

Android™: tất cả các thiết bị (tất cả các phiên bản).

Blackberry®: Torch (phiên bản 6).

Palm™: WebOS Pre, Pixi.

Nokia®: N900 (đang xây dựng).

2.4. Làm sao để sử dụng JQuery Mobile - Cũng giống như JQuery chúng ta có thể làm theo 2 cách Copy-and-Paste Snippet for CDN-hosted files (recommended):

Hoặc có thể download tại địa chỉ

“http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.zip”

3. Tìm hiểu về jQuery Mobile3.1. JQuery làm được những gì


http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.zip


January 2, 2013- Query Mobile cung cấp sự hỗ trợ mạnh mẽ cho các loại phần tử giao diện người

dùng khác nhau. Hình 1 cho thấy một bản tóm tắt về các thành phần giao diện người dùng đang được hỗ trợ hiện nay.

- Các thanh công cụ, các nút ấn, các khung nhìn danh sách, các thẻ, các trình đơn bật lên, các hộp thoại, các hiệu ứng chuyển tiếp, các ô cửa sổ chỉnh sửa và các phần tử biểu



January 2, 2013mẫu đều được hỗ trợ. Hầu hết, nếu không phải tất cả, các phần tử giao diện người dùng mà bạn cần cho các ứng dụng web di động của mình đều được cung cấp.

3.2. Các thành phần trong Query Mobile

Các thuộc tính data-* của HTML5- jQuery Mobile dựa vào các thuộc tính data-* của HTML5 để hỗ trợ các phần tử

giao diện người dùng, các hiệu ứng chuyển tiếp và cấu trúc trang khác nhau. Các thuộc tính này đang bị các trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ. Bảng 2 cho thấy cách sử dụng các thuộc tính data-* để tạo ra các thành phần giao diện người dùng.



January 2, 2013

Thành phần Thuộc tính data-* của HTML5

Các thanh công cụ Đầu trang (Header) và Chân trang (Footer)

<div data-role="header"><div data-role="footer">

Phần thân nội dung (content) div data-role="content">

Các nút ấn (button) <a href="index.html" data-role="button" data-icon="info">Button</a>

Các nút ấn được nhóm lại

<div data-role="controlgroup"><a href="index.html" data-role="button">Yes</a><a href="index.html" data-role="button">No</a><a href="index.html" data-role="button">Hell Yeah</a></div>

Các nút ấn trực tiếp (inline button)

<div data-inline="true"><a href="index.html" data-role="button">Foo</a><a href="index.html" data-role="button" data-theme="b">Bar</a></div>

Phần tử Biểu mẫu (Trình đơn Select)

<div data-role="fieldcontain"><label for="select-options" class="select">Choose an option:</label><select name="select-options" id="select-options"><option value="option1">Option 1</option><option value="option2">Option 2</option><option value="option2">Option 3</option></select></div>

Các khung nhìn danh sách cơ bản

<ul data-role="listview"><li><a href="index.html">One</a></li><li><a href="index.html">Two</a></li><li><a href="index.html">Three</a></li></ul>

Các hộp thoại

<a href="foo.html" data-rel="dialog">Open dialog</a><a href="dialog.html" data-role="button" data-inline="true"data-rel="dialog" data-transition="pop">Open dialog</a>

Các hiệu ứng chuyển tiếp (transition) <a href="index.html" data-transition="pop" data-



January 2, 2013back="true">

$.mobile và sự kiện và phương thức hổ trợ - Đối tượng jQuery của JavaScript cũng liên quan đến ký hiệu $. Khung công tác

jQuery Mobile mở rộng lõi jQuery bằng các trình cắm thêm di động, gồm mobile hoặc $.mobile có định nghĩa một số sự kiện và phương thức. Một số phương thức do $.mobile trưng ra được mô tả dưới đây.

Phương thức Cách sử dụng

$.mobile.changePage

Để thay đổi bằng lập trình từ trang này sang trang khác.Ví dụ, để chuyển đến trang weblog.php khi sử dụng một hiệu ứng chuyển tiếp slide (trượt), sử dụng $.mobile.changePage("weblog.php", "slide").

$.mobile.pageLoadingĐể hiển thị hoặc ẩn thông báo nạp trang. Ví dụ, để ẩn thông báo, sử dụng $.mobile.pageLoading(true).

$.mobile.silentScrollĐể cuộn đến một vị trí Y cụ thể mà không tạo ra các sự kiện cuộn. Ví dụ, để cuộn đến vị trí Y 50, sử dụng $.mobile.silentScroll(100).

$.mobile.addResolutionBreakpoints

jQuery Mobile đã định nghĩa một số điểm ngắt cho các lớp min/max. Gọi phương thức này để bổ sung các điểm ngắt.Ví dụ, để bổ sung lớp min/max cho các chiều rộng điểm ảnh 800, sử dụng $.mobile.addResolutionBreakpoints(800).

$.mobile.activePage Đề cập đến trang đang hoạt động hiện nay

Có một số sự kiện mà bạn có thể kết buộc chúng khi sử dụng phương thức bind() hoặc live(), chẳng hạn như khởi tạo JQuery Mobile, sự kiện cảm ứng, thay đổi định hướng, các sự kiện cuộn, các sự kiện hiện/ ẩn trang, các sự kiện khởi tạo-trang và các sự kiện hình ảnh động.Ví dụ, các sự kiện cảm ứng gồm tap (chạm nhẹ), taphold (chạm và giữ) và các sự kiện vuốt khác nhau. Các sự kiện Scroll (Cuộn) gồm scrollstart (khởi động cuộn) và scrollstop (dừng cuộn). Các sự kiện Page (Trang) cho phép bạn nhận được các thông báo: trước khi tạo một trang, khi một trang được tạo ra, ngay trước khi trang được hiển thị hoặc ẩn đi và khi trang được hiển thị và ẩn đi.Liệt kê 1 cho thấy một ví dụ về kết buộc một sự kiện cụ thể khi jQuery Mobile bắt đầu thực hiện.

- Liệt kê 1. Kết buộc với sự kiện mobileinit



January 2, 2013

- Sự kiện trên cho phép bạn ghi đè lên các giá trị mặc định khi jQuery Mobile khởi động. Một số các giá trị thiết lập có thể bị ghi đè, chẳng hạn như:

LoadingMessage - Thiết lập văn bản mặc định xuất hiện khi một trang đang nạp.

defaultTransition - Thiết lập hiệu ứng chuyển tiếp mặc định cho các thay đổi trang có sử dụng Ajax.

- Bạn cũng có thể kết buộc với các sự kiện khác cho phép bạn tạo các ứng dụng động dựa trên các sự kiện touch (cảm ứng) và page (trang).

3.3. Những Ví dụ minh họa

Ví Dụ 1:



January 2, 2013

Ví Dụ 1:



January 2, 2013


bao cao ltdt jquery mobile

Documents