Tài liệu Giới thiệu về jQuery Mobile doc

Thông tin tài liệu

Giới thiệu jQuery Mobile Giới thiệu 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 Để làm theo với này, 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 ngun có thơng tin jQuery, JavaScript, DOM, HTML5 nhiều Về đầu trang jQuery Mobile 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 cị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í Mặc dù jQuery Mobile Alpha, có số trình diễn tài liệu hướng dẫn Chúng đề nghị bạn nên xem lại tài liệu hướng dẫn trình diễn phần Tài nguyên xem mã nguồn trình diễn phần Tải Tại thời điểm viết này, khung công tác di động jQuery phiên Alpha (v1.0a2) Mã dạng dự thảo thay đổi Tuy nhiên, khung cơng tác có chắn Với tập thành phần ấn tượng có sẵn phát hành alpha, jQuery Mobile hứa hẹn khung công tác công cụ lớn phát triển ứng dụng web di động Các tính jQuery Mobile gồm: 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 Tính dễ dùng 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 (xem phần Tài nguyên), 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 Về đầu trang Hỗ trợ trình duyệt Chúng tơi 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 (nguồn: Wikipedia):      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 ngồi 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) Xem ma trận trình duyệt hỗ trợ trang web jQuery Mobile để biết thêm thơng tin (xem phần Tài ngun) Về đầu trang Tóm tắt thành phần giao diện người dùng jQuery 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ợ Hình Các phần tử giao diện người dùng jQuery Mobile (vào tháng năm 2010) 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 Về đầu trang $.mobile kiện phương thức hỗ trợ Đố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ả Bảng Phương thức $.mobile trưng 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.addResolutionBreakpoints $.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 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 $(document).bind("mobileinit", function(){ //apply overrides here }); 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 Có nhiều tham số cấu hình mà bạn ghi đè cần Xem tài liệu hướng dẫn jQuery Mobile (xem phần Tài nguyên) mã nguồn (xem phần Tải về), để biết thêm thông tin 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) Về đầu trang 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 Bảng Các thuộc tính data-* cho thành phần giao diện người dùng 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) Button Yes No Các nút ấn nhóm lại Hell Yeah Các nút ấn trực tiếp (inline button) Phần tử Biểu mẫu (Trình đơn Select) Các khung nhìn danh sách Các hộp thoại Các hiệu ứng chuyển tiếp (transition) Foo Bar Choose an option: Option 1 Option 2 Option 3

One
Two
Three

Open dialog Open dialog Tài liệu hướng dẫn jQuery Mobile có danh sách đầy đủ cú pháp data-* hỗ trợ Về đầu trang Cấu trúc trang JQuery Mobile Phần bàn cấu trúc chung trang JQuery Mobile jQuery Mobile có hướng dẫn cấu trúc trang Nói chung, cấu trúc trang nên có phần sau đây: Thanh Đầu trang (Header) Thông thường chứa tiêu đề trang nút Back (Quay lại) Nội dung (Content) Nội dung ứng dụng bạn Thanh Chân trang (Footer) Thường chứa phần tử điều hướng, thông tin quyền thứ bạn cần thêm vào phần chân trang Hình cho thấy ví dụ phần khác Hình Kết cấu chung ứng dụng web jQuery Mobile Các công cụ đầu trang chân trang hỗ trợ tùy chọn xác định vị trí tồn hình cố định Vị trí cố định làm cho cơng cụ khơng thay đổi cuộn trang Vị trí tồn hình làm việc giống vị trí cố định ngoại trừ công cụ hiển thị nhấn vào trang (để cung cấp trải nghiệm dễ dàng, đầy đủ nội dung) Phần lại phần khám phá mã HTML cho cấu trúc trang tổng quát Bản thân định nghĩa kiểu tài liệu HTML !DOCTYPE html>, mà định nghĩa kiểu tài liệu HTML5 Phần đầu HTML nạp ba thành phần jQuery Mobile quan trọng:    jQuery Core library — Thư viện jQuery lõi jQuery Mobile library — Một phần đặc trưng-di động khung công tác jQuery jQuery Mobile CSS — CSS định nghĩa phần tử giao diện người dùng jQuery Mobile lõi Nó định nghĩa hiệu ứng chuyển tiếp tiện ích giao diện người dùng khác nhau, chẳng hạn trượt nút ấn sử dụng nhiều biến đổi Webkit hình ảnh động Liệt kê cho thấy phần đầu HTML Liệt kê Phần đầu HTML Intro to jQuery Mobile Phần mã HTML định nghĩa trang đó; xem cách sử dụng thuộc tính datarole="page" Liệt kê hiển thị ví dụ Liệt kê Định nghĩa khối trang Liệt kê định nghĩa trang Thuộc tính id cần nhiều khối trang cục nằm tài liệu tệp HTML giống nhau, cách thực hành tốt định nghĩa ID Một số liệt kê mã cho thấy cách định nghĩa phần đầu trang, nội dung chân trang khác trang Thanh đầu trang thường chứa tiêu đề trang nút ấn Back, Liệt kê Liệt kê Phần đầu trang trang Header Bar Trong trường hợp này, đầu trang gồm văn tiêu đề đầu trang H1 Phần lớn nội dung bạn xuất sau phần đầu trang, cho thấy Ví dụ Liệt kê hiển thị đoạn mã đơn giản, nơi mà bạn thêm danh sách, ấn nút, biểu mẫu v.v Liệt kê Phần nội dung trang

Content Section

Thanh chân trang nơi mà bạn thường đặt phần tử điều hướng thông tin quyền, Liệt kê Liệt kê Phần chân trang Footer Bar Phần chân trang ví dụ Liệt kê đơn giản Việc thêm điều hướng vào chân trang không phức tạp, Liệt kê Liệt kê Thêm điều hướng vào phần chân trang Today Tomorrow Week No date Hình cho thấy phần chân trang kết có điều hướng bổ sung Hình Phần chân trang có điều hướng Về đầu trang Định nghĩa nhiều trang cục Ví dụ trước trình bày trang jQuery Mobile cung cấp hỗ trợ cho nhiều trang tài liệu HTML đơn Nhiều trang "các trang" liên kết bên trong, cục mà bạn nhóm lại với cho mục đích nạp sẵn Cấu trúc nhiều trang tương tự ví dụ trước trang nhất, ngoại trừ việc chứa data-role nhiều trang Liệt kê cho thấy ví dụ Liệt kê Định nghĩa nhiều trang tệp HTML : : : Khi tham khảo trang cục với tài liệu HTML tương tự, jQuery Mobile tự động giao dịch với tài liệu tham khảo Khi tham khảo trang bên ngoài, jQuery Mobile hiển thị vịng trịn nạp Nếu gặp lỗi, khung cơng tác tự động hiển thị sử dụng cửa sổ bật lên thông báo lỗi Về đầu trang Các hiệu ứng chuyển tiếp trang jQuery Mobile cung cấp hỗ trợ cho hiệu ứng chuyển tiếp trang dựa vào-CSS (lấy cảm hứng từ jQtouch), áp dụng điều hướng đến trang quay lại Các hiệu ứng chuyển tiếp gồm có: Trượt Cung cấp hiệu ứng chuyển tiếp ngang Trượt lên Trượt xuống Cung cấp hiệu ứng chuyển tiếp lên xuống hình Tiếng bốp Cung cấp kiểu hiệu ứng chuyển tiếp nổ Mờ dần Cung cấp hiệu ứng chuyển tiếp mờ dần Lật Cung cấp hiệu ứng chuyển tiếp lật Bạn bổ sung hiệu ứng chuyển tiếp trang theo hai cách khác nhau:  Bổ sung thuộc tính data-transition (hiệu ứng chuyển tiếp liệu) vào liên kết, sử dụng Sử dụng thuộc tính data-transition trang web tĩnh  Theo lập trình, sử dụng $.mobile.changePage("pendingtasks.html", "slideup"); Sử dụng cách tiếp cận chương trình làm việc với trang động Về đầu trang Các khung nhìn danh sách Các khung nhìn danh sách, kiểu phần tử giao diện người dùng bản, sử dụng nhiều ứng dụng di động jQuery Mobile hỗ trợ nhiều khung nhìn danh sách: danh sách bản, lồng nhau, có đánh số đọc; nút ấn chia tách; vạch chia danh sách; bong bóng đếm; hình thu nhỏ; biểu tượng, lọc tìm kiếm; danh sách có kiểu dáng chèn vào danh sách chủ đề Liệt kê cho thấy khung nhìn danh sách Một khung nhìn danh sách tạo cách sử dụng thuộc tính liệu

Get Friends
Post to Wall
Send Message

phổ biến Đây ví dụ cách jQuery Mobile mở rộng cú pháp HTML Kết ví dụ mã Liệt kê 10 hiển thị Hình Hình Một khung nhìn danh sách đơn giản Về đầu trang Các biểu mẫu Các biểu mẫu tạo phẩm web phổ biến khác sử dụng để gửi thông tin đến máy chủ jQuery Mobile hỗ trợ nhiều thành phần giao diện người dùng biểu mẫu: trường nhập văn bản, trường nhập tìm kiếm, trượt, chuyển mạch đảo chiều lật, nút tròn, hộp chọn, trình đơn select (chọn) biểu mẫu chủ đề Tất chúng tạo dễ dàng Liệt kê 10 cho thấy biểu mẫu có trình đơn chọn nút submit (đệ trình) Các trình đơn chọn điều khiển , nguyên gốc, jQuery Mobile hoàn thiện "dáng vẻ cảm nhận" Câu lệnh nhóm giá trị khác cho mục đích hiển thị trực quan Bản thân biểu mẫu định nghĩa nguyên gốc Liệt kê 10 Một biểu mẫu, trình đơn chọn nút đệ trình Choose an option: Option 1 Option 2 Option 3 Submit Hình cho thấy biểu mẫu nội dung Hình Biểu mẫu đơn giản có trình đơn chọn nút đệ trình Khi chọn trình đơn tùy chọn, jQuery Mobile hiển thị cửa sổ bật lên hiển thị hình ảnh (hình bên phải Hình 5) với tất giá trị tùy chọn tự động đóng sau chọn Chỉ cần định nghĩa thuộc tính action (hành động) method (phương thức) biểu mẫu, jQuery Mobile chịu trách nhiệm hiệu ứng chuyển tiếp biểu mẫu, gọi Ajax trang kết hiển thị vòng tròn cần thiết Về đầu trang Các thành phần giao diện người dùng khác Có nhiều phần tử giao diện người dùng biến thể phần tử, khám phá trang web JQuery Mobile tài liệu hướng dẫn (xem phần Tài nguyên) Để bổ sung thêm cho điều bạn học này, điều quan trọng bạn cần nghiên cứu: nội dung xếp gọn lại, lưới bố trí, tạo chủ đề phần cịn lại khung nhìn danh sách biểu mẫu ... databack="true"> Tài liệu hướng dẫn jQuery Mobile có danh sách đầy đủ cú pháp data-* hỗ trợ Về đầu trang Cấu trúc trang JQuery Mobile Phần bàn cấu trúc chung trang JQuery Mobile jQuery Mobile có hướng... nghĩa kiểu tài liệu HTML !DOCTYPE html>, mà định nghĩa kiểu tài liệu HTML5 Phần đầu HTML nạp ba thành phần jQuery Mobile quan trọng:    jQuery Core library — Thư viện jQuery lõi jQuery Mobile. .. href="http://code .jquery. com /mobile /1.0a2 /jquery. mobile- 1.0a2.min.css" />

Ngày đăng: 22/02/2014, 15:20

Xem thêm: Tài liệu Giới thiệu về jQuery Mobile doc, Tài liệu Giới thiệu về jQuery Mobile doc