Tìm hiểu về JQuery mobile
12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Muïc Luïc Chương I – Tổng quan JQuery Giới thiệu JQuery 2 Để sử dụng Jquery bạn cần hiểu biết gì? .3 Tại phải dùng Jquery? Jquery làm gì? Làm để sử dụng Jquery? Chương II – Jquery hoạt động Cú pháp đối tượng .7 Điều khiển CSS đối tượng .6 2.1 Lấy giá trị thuộc tính CSS 2.2 Đặt giá trị cho CSS 2.3 Ví dụ minh họa Điều khiển thuộc tính đối tượng 3.1 Lấy giá trị thuộc tính đối tượng 3.2 Gán giá trị cho đối tượng 3.3 Ví dụ minh họa 10 Gán kiện xử lý kiện 10 4.1 Gán kiện vào đối tượng 10 4.2 Hủy kiện vào đối tượng 11 Chuyển động, thay đổi hình dạng đối tượng 13 Một vài hàm API phổ biến thường dùng .15 6.1 Hàm fadeIn() 16 6.2 Hàm fadeOut() .16 6.3 Hàm fadeTo() 16 6.4 Hàm Show() 17 6.5 Hàm Hide() 18 Chương III – Giới thiệu JQuery Mobile .19 Giới thiệu sơ lược 19 Đặc điểm JQuery Mobile .20 2.1 Khái niệm JQuery Mobile 20 2.2 Các đặc tính cở JQuery Mobile .20 2.3 Hổ trợ trình duyệt JQuery Mobile 21 2.4 Làm sử dụng JQuery Mobile 21 Tìm hiểu JQuery Mobile 22 3.1 JQuery Mobile làm 22 3.2 Các thành phần JQuery Mobile 23 3.3 Ví dụ minh họa JQuery Mobile 26 GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile CHƯƠNG I – TỔNG QUAN VỀ JQUERY Giới thiệu JQuery - Với phát triển mau lẹ Internet, người dùng ngày quan tâm đến hình thức trang web Trước trang web cần có banner, nội dung footer hời hợt cho trang web hoàn chỉnh Nhưng trang web phải có banner bắt mắt, nội dung hay nhiều hiệu ứng lạ mắt khác thu hút người đọc - Chính web designer bắt đầu ý đến thư viện JavaScript mở jQuery để tạo hiệu ứng tương tác trực tiếp với người đọc cách nhanh chóng dễ dàng nhiều sử dụng JavaScript - jQuery Javascript Framework Nó thư viện xây dựng để hỗ trợ nhà lập trình web tạo tương tác website cách nhanh JQuery thêm tương tác Ajax vào trang web bạn, đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian công sức so với cách viết javascript thông thường - jQuery phát triển John Resig vào năm 2006 sau năm trở thành thư viện tiếng với hàng chục nghìn plugin hay, hàng triệu người sử dụng, hầu hết website ứng dụng - jQuery có mã nguồn mở hoàn toàn miễn phí, bạn download https://jQuery.com GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM - Tìm Hiểu Về JQuery Mobile Hoặc sử dụng trực tiếp jQuery lưu trữ jQuery hay Google từ địa sau Để sử dụng jQuery bạn cần hiểu biết gì? - JQuery ngôn ngữ mà thư viện hàm javascript jQuery hướng tới mục đích làm đơn giản hóa công việc phức tạp trước 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 kiến thức sau: HTML JAVASCRIPT CSS Tại sạo phải dùng JQuery - jQuery đơn giản hóa cách viết Javascript tăng tốc độ xử lý kiện trang web, giúp tiết kiệm thời gian 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 tốt vấn đề xung đột trình duyệt web - Học jQuery đơn giản, bạn nắm vững CSS, bạn tiếp cận sử dụng jQuery nhanh chóng - Ngoài jQuery có thư viện javascript tiếng khác mooTools, Prototype, Dojo jQuery thu hút web designer có ưu điểm Ưu điểm jQuery: • Hỗ trợ tốt việc xử lí 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 thư viện Javascript khác • Plugin phong phú GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile JQuery làm - - - - - Hướng tới thành phần tài liệu HTML: Nếu không sử dụng thư viện JavaScript này, bạn phải viết nhiều dòng code đạt mục tiêu di chuyển cấu trúc (hay gọi DOM = Document Object Model) tài liệu HTML chọn thành phần liên quan Jquery cho phép bạn chọn thành phần tài liệu để “vọc” cách dễ dàng sử dụng CSS Thay đổi giao diện trang web: CSS công cụ mạnh để định dạng trang web có nhược điểm tất trình duyệt hiển thị giống Cho nên jQuery đời để lấp chỗ trống này, bạn sử dụng để giúp trang web hiển thị tốt hầu hết trình duyệt Hơn jQuery thay đổi class định dạng CSS áp dụng lên thành phần tài liệu HTML trang web trình duyệt load thành công Thay đổi nội dung tài liệu Jquery thay đổi bề trang web, thay đổi nội dung tài liệu với vài dòng code Nó thêm bớt nội dung trang, hình ảnh thêm vào đổi sang hình khác, danh sách xếp lại chí cấu trúc HTML trang web viết lại mở rộng Tất điều bạn hoàn toàn làm nhờ giúp đỡ 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, bạn quyền định sử dụng công cụ coi bỏ Với thư viện javaScript jQuery, cho bạn nhiều cách để tương tác với người dùng ví dụ người dùng nhấp chuột vào đường link có xảy Nhưng hay không làm cho code HTML bạn rối tung lên nhờ Event Handlers Hơn Event Handler API bảo đảm trang web bạn tương thích hầu hết với trình duyệt, điều làm đau đầu nhiều web designer Tạo hiệu ứng động cho thay đổi tài liệu: Để tương tác tốt với người dùng, web designer phải cho người dùng thấy hiệu ứng xảy họ làm tác vụ Jquery cho phép bạn sử dụng nhiều hiệu ứng động mờ dần, chạy dọc chạy ngang v.v chưa đủ, cho phép bạn tự tạo hiệu ứng riêng Lấy thông tin từ server mà không cần tải lại trang web: Đây công nghệ ngày trở nên phổ biến Asynchronous JavaScript And XML (AJAX), giúp người thiết kế web tạo trang web tương tác cực tốt nhiều tính Thư viện jQuery loại GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM - - Tìm Hiểu Về JQuery Mobile bỏ phức tạp trình duyệt trình cho phép người phát triển web tập trung vào tính đầu cuối Đơn giản hoá tác vụ javaScript Ngoài tính nêu trên, jQuery cho phép bạn viết code javaScript đơn giản nhiều so với cách truyền thống vòng lặp điều khiển mảng Làm để sử dụng jQuery? jQuery đơn tập tin javascript, để sử dụng hàm jQuery, bạn cần tải tập tin dùng thẻ để chèn vào trang web mà bạn muốn dùng giống chèn tập tin javascript bạn viết Có thể tải tập tin jQuery phiên trang web thức jQuery đây: http://jquery.com/ Truy cập vào website ấn nút “Download (jQuery)” để tải Hình 1.1 (Thông thường ấn vào nút trình duyệt mở lên nội dung tập tin không tải Bạn việc bấm Ctrl+S để lưu lại nội dung thành tập tin *.js) Hình 1.2 GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile CHƯƠNG 2: JQUERY HOẠT ĐỘNG NHƯ THẾ NÀO? Phần tập trung mô tả cú pháp jQuery với vài mục đích sử dụng phổ biến Sau đó, dựa vào giới thiệu phần mà bạn tự nghĩ mục đích dùng khác việc khai thác triệt để hàm API liệt kê đầy đủ chi tiết phần sau Hình 2.1 Cú pháp đối tượng - jQuery sử dụng cách CSS để lựa chọn phần tử HTML (thẻ HTML) thực vài việc lên đối tượng chọn Việc chọn đối tượng thực theo kiểu chọn đối tượng (đơn lẻ) tập hợp đối tượng có đặc điểm (nhiều thành phần) Nguyên tắc để chọn cụ thể sau: GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Cú Pháp | Chọn đối tượng thao tác $ (doi_tuong) $ : Ký tự bắt đầu jQuery việc xác định đối tượng (doi_tuong) : Tiêu chí để xác định đối tượng Liệt kê cụ thể trường hợp bên - Sau bảng liệt kê tiêu chuẩn mẫu để chọn đối tượng: $(this) : Chọn đối tượng (đối tượng đặc biệt) | đơn lẻ $(document) : Chọn đối tượng toàn tài liệu (đối tượng đặc biệt) | đơn lẻ $(window) : Chọn đối tượng cửa sổ hành (đối tượng đặc biệt) | đơn lẻ $('p') : Chọn tất thẻ | nhiều thành phần $('.ClassName') : Chọn tất thẻ HTML có class=’ClassName’ | nhiều thành phần $('#IdValue') : Chọn thẻ HTML có id=’IdValue’ | đơn lẻ Điều khiển CSS đối tượng 2.1 Lấy giá trị thuộc tính CSS - Khi dùng jQuery, việc tác động trực tiếp lấy giá trị thuộc tính CSS đối tượng chọn vô đơn giản bạn sử dụng tên thuộc tính giá trị lấy có định dạng y định nghĩa CSS Cú Pháp | Lấy giá trị thuộc tính CSS $ (doi_tuong).css(‘ten_css’); doi_tuong : tiêu chuẩn xác định đối tượng mô tả ten_css : tên thuộc tính css font-size, color, background-color, … 2.2 Đặt giá trị cho CSS - Tương tự lấy giá trị thuộc tính CSS, việc gán giá trị cho đơn giản Cú Pháp | Lấy giá trị thuộc tính CSS $ (doi_tuong).css(‘ten_css’,’gia_tri’); doi_tuong : tiêu chuẩn xác định đối tượng mô tả ten_css : tên thuộc tính css font-size, color, background-color, … gia_tri : giá trị bạn muốn gán cho CSS Ví dụ: để lấy giá trị thuộc tính CSS font-family tất thẻ ta có câu lệnh jQuery sau: GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile 2.3 Ví dụ minh họa Hình 2.2 Điều khiển thuộc tính đối tượng GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile 3.1 Lấy giá trị thuộc tính đối tượng Cú Pháp | Lấy giá trị thuộc tính HTML đối tượng $ (doi_tuong).atrr(‘thuoc_tinh’); doi_tuong : tiêu chuẩn xác định đối tượng mô tả thuoc_tinh : tên thuộc tính HTML Ví dụ 1, ta có thẻ Nếu muốn lấy thuộc tính src thẻ này, ta dùng: Ví dụ 2, ta có thẻ , muốn lấy giá trị thuộc tính value thẻ Ta dùng câu lệnh jQuery tương tự Tuy nhiên, ví dụ 2, bạn dùng câu lệnh jQuery sau để lấy giá trị thuộc tính value - Tùy vào đối tượng thẻ mà thuộc tính định có tồn hay không Nếu không tồn câu lệnh trả undefined Ví dụ, bạn cố gắng lấy thuộc tính color thẻ kết trả undefined thẻ thuộc tính color 3.2 Gán giá trị cho thuộc tính - Việc gán lại giá trị thuộc tính đơn giản tương tự lấy giá trị thuộc tính Chỉ khác biệt ta có tham số bên attr() Nếu bạn cố gắng gán GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile thuộc tính cho đối tượng HTML không hỗ trợ thuộc tính câu lệnh không thực thi Cú Pháp | Lấy giá trị thuộc tính HTML đối tượng $ (doi_tuong).atrr(‘thuoc_tinh’,’gia_tri’); doi_tuong : tiêu chuẩn xác định đối tượng mô tả thuoc_tinh : tên thuộc tính HTML gia_tri : giá trị muốn gán cho thuộc tính Ví dụ, ta có thẻ html 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 GVHD: NGUYỄN VĂN A 10 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Một vài hàm API phổ biến thường hay dùng - Đây danh sách hàm API jQuery hay dùng để bạn tham khảo nhanh phục vụ vài mục đích đơn giản tỏng trình làm quen với jQuery làm tập Cũng nội dung bên trên, cách dùng liệt kê phần trường hợp phổ thông 6.1 Hàm fadeIn() Hiệu ứng hiển thị đối tượng từ trạng thái suốt Nghĩa trạng thái ban đầu đối tượng phải suốt (opacity = 0) Ví Dụ: Hiển thị dần đối tượng có id=’vidu3’ khoảng thời gian 600 mili giây(tương ứng ‘slow’) Sau xong hiển thị hộp thoại “Đã xong” 6.2 Hàm fadeOut() Hàm có tác dụng gây hiệu ứng ngược lại với hàm fadeIn(), nghĩa làm cho đối tượng trở nên suốt từ từ Các tham số cách sử dụng ý fadeIn() 6.3 Hàm fadeTo() Hàm sử dụng cho hai trường hợp fadeIn() fadeOut() hướng tới mục đích chuyển đổi tự trạng thái đến trạng thái định Tùy vào giá trị giá trị đến mà có hiệu ứng fadeIn() hay fadeOut() GVHD: NGUYỄN VĂN A 16 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Ví dụ: Giả sử ta có thẻ có độ opacity 0.5 , ta xét hiệu ứng lệnh lên đối tượng “vidu” này: 6.4 Hàm show() Về chất tham số hàm gọi css('display', 'block') Còn có tham số cú pháp hoạt động tương tự fadeIn() GVHD: NGUYỄN VĂN A 17 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile 6.5 Hàm hide() Trái ngược với show(), tham số hàm gọi css('display', 'none') Còn có tham số cú pháp hoạt động tương tự fadeOut() Cú GVHD: NGUYỄN VĂN A 18 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile CHƯƠNG 3: GIỚI THIỆU JQUERY MOBILE Giới thiệu sơ lược - Ngày nay, với phát triển vượt bậc smartphone tablet, truy cập website lúc Tuy nhiên, nhược điểm lớn website (đặc biệt website Việt Nam) sử dụng Flash nhiều Điều làm cho thiết bị di động gặp khó khăn trình truy cập (IOS không hỗ trợ chạy Flash lướt web, muốn bạn phải cài đặt thêm plug-in Điều khó khăn số người không chuyên tin học làm giảm thời lượng Pin sử dụng) Chính Jquery Mobile đời - Bên cạnh Sencha Touch, Jquery Mobile ủng hộ mạnh mẽ phát triển tảng Jquery Tuy nhiên dễ chịu so với Sencha Touch không ảnh hưởng đến việc code chức web (PHP, ASP ) Cách sử dụng dùng Jquery thông thường - Jquery Mobile đời khoảng tháng 8/2010 phát triển nhanh tính phổ biến, mã nguồn mở 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ết tương thích với tất thiết bị di động smartphone IOS, Android, Blackberry - Hiện Jquery Mobile tiếp tục phát triển hoàn thiện Tuy nhiên tương lai không xa thư viện hỗ trợ mạnh mẽ công nghệ HTML5 CSS3 cho thiết bị cảm ứng - jQuery Mobile, khung công tác giao diện người dùng (UI), cho phép bạn viết ứng dụng web di động chức mà không cần viết dòng mã JavaScript Trong này, tìm hiểu tính khung công tác này, gồm trang bản, công cụ điều hướng, nút điều khiển biểu mẫu hiệu ứng chuyển tiếp GVHD: NGUYỄN VĂN A 19 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Để tìm hiểu jQuery Mobile, bạn cần: - • Xem trước HTML • Hiểu điều JavaScript • Kiến thức jQuery Bạn tải mã nguồn trình cắm thêm jQuery sử dụng từ bảng Tải Phần Tài nguyên có thông tin jQuery, JavaScript, DOM, HTML5 nhiều Đặc điểm jQuery Mobile 2.1 - jQuery Mobile 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 ứng dụng web di động làm việc máy điện thoại thông minh máy tính bảng Khung công tác jQuery Mobile xây dựng đỉnh lõi jQuery cung cấp số phương tiện, gồm thao tác chuyển dịch DOM (Mô hình đối tượng tài liệu), HTML XML, xử lý kiện, thực truyền thông máy chủ cách sử dụng Ajax, hiệu ứng hình ảnh hình ảnh động cho trang web Bản thân khung công tác di động tải bổ sung, riêng biệt có kích cỡ khoảng 12KB (đã rút gọn nén) từ lõi jQuery có kích cỡ khoảng 25KB rút gọn/nén Cũng với phần lại khung công tác jQuery, jQuery Mobile thư viện cấp phép kép (MIT GPL), miễn phí 2.2 - Khái niệm Các dặc tính JQuery Mobile Khá đơn giản: Khung công tác dễ sử dụng Bạn phát triển trang chủ yếu cách sử dụng đánh dấu dựa vào mã JavaScript tối thiểu không dùng mã Nâng cấp tăng dần khả chịu lỗi: Trong jQuery Mobile sử dụng mã HTML5, CSS3 JavaScript nhất, tất thiết bị di động cung cấp hỗ trợ Triết lý JQuery Mobile hỗ trợ hai thiết bị có khả cấp cao khả cấp thấp hơn, chẳng hạn thiết bị không hỗ trợ JavaScript cung cấp trải nghiệm tốt GVHD: NGUYỄN VĂN A 20 12HTH01 – NHÓM - - Tính dễ dung: jQuery Mobile thiết kế với chủ ý dễ dùng Nó có hỗ trợ cho Các ứng dụng Internet phong phú dễ dùng (WAI-ARIA - Accessible Rich Internet Applications) để giúp làm cho trang web dễ dùng với khách truy cập bị tàn tật nhờ sử dụng công nghệ trợ giúp Kích cỡ nhỏ: Kích cỡ tổng thể khung công tác di động jQuery tương đối nhỏ khoảng 12KB với thư viện JavaScript, 6KB với CSS, cộng với số biểu tượng Tạo chủ đề: Khung công tác cung cấp hệ thống chủ đề, cho phép bạn đưa kiểu dáng ứng dụng riêng Khi dùng với công cụ PhoneGap, có sử dụng công nghệ web để xây dựng ứng dụng độc lập, khung công tác jQuery Mobile giúp đơn giản hóa việc phát triển ứng dụng bạn Hổ trợ trình duyệt JQuery Mobile 2.3 - - Tìm Hiểu Về JQuery Mobile Chúng chặng đường dài với hỗ trợ trình duyệt thiết bị di động, tất thiết bị di động cung cấp hỗ trợ cho HTML5, CSS JavaScript Lĩnh vực nơi hỗ trợ nâng cấp tăng dần khả chịu lỗi jQuery Mobile vào Như nêu, jQuery Mobile hỗ trợ hai thiết bị có khả cấp cao cấp thấp, chẳng hạn thiết bị không hỗ trợ JavaScript Nâng cấp tăng dần có nguyên tắc cốt lõi sau: • Tất nội dung nên dễ dùng với tất trình duyệt • Tất chức nên dễ dùng với tất trình duyệt • Bố trí nâng cao cung cấp CSS liên kết • Hành vi nâng cao cung cấp JavaScript liên kết • Các sở thích trình duyệt người dùng cuối tôn trọng Tất nội dung nên trình diễn (như thiết kế) thiết bị bản, nhiều tảng trình duyệt nâng cao nâng cấp CSS JavaScript liên kết ngoài, bổ sung jQuery Mobile cung cấp hỗ trợ cho tảng di động sau đây: • Apple® iOS: iPhone, iPod Touch, iPad (tất phiên bản) • Android™: tất thiết bị (tất phiên bản) • Blackberry®: Torch (phiên 6) • Palm™: WebOS Pre, Pixi • Nokia®: N900 (đang xây dựng) 2.4 Làm để sử dụng JQuery Mobile - Cũng giống JQuery làm theo cách GVHD: NGUYỄN VĂN A 21 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Copy-and-Paste Snippet for CDN-hosted files (recommended): Hoặc download địa “http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.zip” Tìm hiểu jQuery Mobile 3.1 JQuery làm - Query Mobile cung cấp hỗ trợ mạnh mẽ cho loại phần tử giao diện người dùng khác Hình cho thấy tóm tắt thành phần giao diện người dùng hỗ trợ GVHD: NGUYỄN VĂN A 22 12HTH01 – NHÓM - Tìm Hiểu Về JQuery Mobile Các công cụ, nút ấn, khung nhìn danh sách, thẻ, trình đơn bật lên, hộp thoại, hiệu ứng chuyển tiếp, ô cửa sổ chỉnh sửa phần tử biểu mẫu hỗ trợ Hầu hết, tất cả, phần tử giao diện người dùng mà bạn cần cho ứng dụng web di động cung cấp 3.2 Các thành phần Query Mobile GVHD: NGUYỄN VĂN A 23 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Các thuộc tính data-* HTML5 jQuery Mobile dựa vào thuộc tính data-* HTML5 để hỗ trợ phần tử giao diện người dùng, hiệu ứng chuyển tiếp cấu trúc trang khác Các thuộc tính bị trình duyệt không hỗ trợ chúng lặng lẽ loại bỏ Bảng cho thấy cách sử dụng thuộc tính data-* để tạo thành phần giao diện người dùng - GVHD: NGUYỄN VĂN A 24 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Thành phần Thuộc tính data-* HTML5 Các công cụ Đầu trang (Header) Chân trang (Footer) Phần thân nội dung (content) div data-role="content"> Các nút ấn (button) Button Các nút ấn nhóm lại Yes No Hell Yeah Các nút ấn trực tiếp (inline button) Foo Bar Phần tử Biểu mẫu (Trình đơn Select) Choose an option: Option 1 Option 2 Option 3 Các khung nhìn danh sách One Two Three Các hộp thoại Open dialog Open dialog Các hiệu ứng chuyển tiếp (transition) $.mobile kiện phương thức hổ trợ GVHD: NGUYỄN VĂN A 25 12HTH01 – NHÓM - Tìm Hiểu Về JQuery Mobile Đối tượng jQuery JavaScript liên quan đến ký hiệu $ Khung công tác jQuery Mobile mở rộng lõi jQuery trình cắm thêm di động, gồm mobile $.mobile có định nghĩa số kiện phương thức Một số phương thức $.mobile trưng mô tả Phương thức Cách sử dụng Để thay đổi lập trình từ trang sang trang khác $.mobile.changePage Ví dụ, để chuyển đến trang weblog.php sử dụng hiệu ứng chuyển tiếp slide (trượt), sử dụng $.mobile.changePage("weblog.php", "slide") Để hiển thị ẩn thông báo nạp trang $.mobile.pageLoading Ví dụ, để ẩn thông báo, sử dụng $.mobile.pageLoading(true) Để cuộn đến vị trí Y cụ thể mà không tạo kiện cuộn $.mobile.silentScroll Ví dụ, để cuộn đến vị trí Y 50, sử dụng $.mobile.silentScroll(100) jQuery Mobile định nghĩa số điểm ngắt cho lớp min/max Gọi phương thức để bổ sung điểm ngắt $.mobile.addResolutionBreakpo ints $.mobile.activePage Ví dụ, để bổ sung lớp min/max cho chiều rộng điểm ảnh 800, sử dụng $.mobile.addResolutionBreakpoints( 800) Đề cập đến trang hoạt động Có số kiện mà bạn kết buộc chúng sử dụng phương thức bind() live(), chẳng hạn khởi tạo JQuery Mobile, kiện cảm ứng, thay đổi định hướng, kiện cuộn, kiện hiện/ ẩn trang, kiện khởi tạo-trang kiện hình ảnh động GVHD: NGUYỄN VĂN A 26 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Ví dụ, kiện cảm ứng gồm tap (chạm nhẹ), taphold (chạm giữ) kiện vuốt khác Các kiện Scroll (Cuộn) gồm scrollstart (khởi động cuộn) scrollstop (dừng cuộn) Các kiện Page (Trang) cho phép bạn nhận thông báo: trước tạo trang, trang tạo ra, trước trang hiển thị ẩn trang hiển thị ẩn Liệt kê cho thấy ví dụ kết buộc kiện cụ thể jQuery Mobile bắt đầu thực Liệt kê Kết buộc với kiện mobileinit - - Sự kiện cho phép bạn ghi đè lên giá trị mặc định jQuery Mobile khởi động Một số giá trị thiết lập bị ghi đè, chẳng hạn như: LoadingMessage - Thiết lập văn mặc định xuất trang nạp defaultTransition - Thiết lập hiệu ứng chuyển tiếp mặc định cho thay đổi trang có sử dụng Ajax • • - Bạn kết buộc với kiện khác cho phép bạn tạo ứng dụng động dựa kiện touch (cảm ứng) page (trang) 3.3 Những Ví dụ minh họa Ví Dụ 1: GVHD: NGUYỄN VĂN A 27 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN VĂN A 28 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Ví Dụ 1: GVHD: NGUYỄN VĂN A 29 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN VĂN A 30 [...]... 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 GVHD: NGUYỄN VĂN A 19 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile Để 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 • 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. .. 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile 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 Mobile 3.1 JQuery làm được những gì - 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... 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: GVHD: NGUYỄN VĂN A 27 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN VĂN A 28 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile Ví Dụ 1: GVHD: NGUYỄN VĂN A 29 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN VĂN A 30 ... data-transition="pop" databack="true"> $ .mobile và sự kiện và phương thức hổ trợ GVHD: NGUYỄN VĂN A 25 12HTH01 – NHÓM 4 - Tìm Hiểu Về JQuery Mobile Đố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... 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 GVHD: NGUYỄN VĂN A 13 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile Để 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 GVHD: NGUYỄN VĂN A 14 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile Hình 2.6 Ví Dụ... dụng của bạn Hổ trợ trình duyệt JQuery Mobile 2.3 - - Tìm Hiểu Về 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ị... 4 Tìm Hiểu Về JQuery Mobile Ví dụ: Giả sử ta có một thẻ đ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() GVHD: NGUYỄN VĂN A 17 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery. .. 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 Mobile 2.1 - 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. .. 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... GVHD: NGUYỄN VĂN A 17 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile 6.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ú GVHD: NGUYỄN VĂN A 18 12HTH01 – NHÓM 4 Tìm Hiểu Về JQuery Mobile CHƯƠ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 ... 27 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN VĂN A 28 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile Ví Dụ 1: GVHD: NGUYỄN VĂN A 29 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile GVHD: NGUYỄN... lệnh jQuery sau: GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile 2.3 Ví dụ minh họa Hình 2.2 Điều khiển thuộc tính đối tượng GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM Tìm Hiểu Về JQuery Mobile. .. https:/ /jQuery. com GVHD: NGUYỄN VĂN A 12HTH01 – NHÓM - Tìm Hiểu Về JQuery Mobile Hoặc sử dụng trực tiếp jQuery lưu trữ jQuery hay Google từ địa sau Để sử dụng jQuery bạn cần hiểu biết gì? - JQuery