Thiết kế ứng dụng dành cho thiết bị di động / Hướng dẫn dành cho người mới bắt đầu với jQuery Mobile

Trong 2-3 năm qua, chúng tôi đã chứng kiến ​​sự tăng trưởng vượt bậc về hỗ trợ trình duyệt và hệ điều hành cho các trang web di động. Đáng chú ý nhất là các nền tảng iOS và iOS của Apple xuất hiện trong tâm trí. Nhưng những người khác như PalmOS và Blackberry vẫn còn trong hỗn hợp. Cho đến gần đây, rất khó để kết hợp một chủ đề di động với tất cả các nền tảng này.

JavaScript là một sự khởi đầu, nhưng cho đến nay vẫn chưa có thư viện thống nhất thực sự. jQuery Mobile có tất cả các tính năng tốt nhất của jQuery và chuyển chúng sang nguồn web dựa trên thiết bị di động. Thư viện giống như một khung bao gồm hình động, hiệu ứng chuyển tiếp và kiểu CSS tự động cho các thành phần HTML cơ bản. Trong hướng dẫn này, tôi hy vọng sẽ giới thiệu nền tảng theo cách mà bạn có thể cảm thấy thoải mái khi thiết kế các ứng dụng di động jQuery của riêng bạn.

Tính năng & Hỗ trợ HĐH

Lý do tôi khuyên bạn nên học jQuery Mobile hơn bất kỳ khung công tác nào khác là sự đơn giản. Mã được xây dựng trên lõi jQuery và có một nhóm các nhà phát triển tích cực viết các tập lệnh và chỉnh sửa các lỗi. Trong số nhiều tính năng bao gồm hỗ trợ HTML5, liên kết điều hướng do Ajax cung cấp và trình xử lý sự kiện chạm / vuốt.

Hỗ trợ khác nhau giữa các điện thoại và được chia thành biểu đồ gồm 3 loại từ A-C. A là tầng trên cùng tự hào hỗ trợ đầy đủ cho jQuery Mobile, B có mọi thứ trừ Ajax trong khi C là HTML cơ bản với ít JavaScript. May mắn thay, hầu hết các hệ điều hành phổ biến đều được hỗ trợ đầy đủ - Tôi đã thêm một danh sách bên dưới chỉ một vài ví dụ.

• Apple iOS 3-5
• Android 2.1, 2.2, 2.3
• Điện thoại Windows 7
• Blackberry 6.0, Blackberry 7
• Palm WebOS 1.4-2.0, 3.0

Nếu bạn muốn tìm hiểu thêm hãy thử đọc trên trang tài liệu chính thức của họ. Nó không được viết bằng tiếng vô nghĩa và thực sự cảm thấy rất dễ theo dõi. Bây giờ hãy tập trung vào những điều cơ bản để viết một trang di động jQuery và cách chúng ta có thể xây dựng một ứng dụng nhỏ!

Mẫu HTML tiêu chuẩn

Để ứng dụng di động đầu tiên của bạn hoạt động, có một mẫu thiết lập bạn nên bắt đầu. Điều này bao gồm mã cơ sở jQuery cùng với JS và CSS di động, tất cả được lưu trữ bên ngoài từ jQuery CDN. Kiểm tra mã ví dụ của tôi dưới đây.

Các yếu tố nước ngoài duy nhất ở đây phải là hai thẻ meta. Đỉnh khung nhìn thẻ cập nhật trình duyệt di động để sử dụng hiệu ứng thu phóng đầy đủ. Đặt giá trị chiều rộng = chiều rộng thiết bị sẽ đặt chiều rộng trang chính xác bằng chiều rộng của màn hình điện thoại. Và tốt nhất là nó không vô hiệu hóa các tính năng thu phóng vì jQuery Mobile có thể thích ứng với việc thay đổi bố cục.

Thẻ meta tiếp theo Tương thích X-UA chỉ buộc Internet Explorer hiển thị HTML trong lần lặp gần đây nhất. Các trình duyệt cũ hơn và đặc biệt là thiết bị di động sẽ cố gắng khắc phục các lỗi kết xuất lạ.

Xây dựng nội dung cơ thể

Bây giờ đây là nơi mà jQuery mobile có thể gặp khó khăn. Mỗi trang HTML không nhất thiết phải là 1 trang trên trang web di động. Khung này sử dụng các thuộc tính dữ liệu của HTML5 mà bạn có thể tạo bất kỳ lúc nào bằng cách nối thêm dữ liệu- trước. Theo cách tương tự data-vai trò = "trang" có thể được đặt thành nhiều div trong một tệp HTML, cung cấp cho bạn nhiều hơn một trang.

Sau đó, bạn sẽ di chuyển giữa các trang này với các liên kết neo và ID duy nhất. Thiết lập này là một ý tưởng tốt cho các ứng dụng cơ bản, đơn giản. Nếu bạn chỉ cần 3-5 trang thì tại sao không lưu trữ tất cả trong một tệp? Trừ khi bạn có nhiều nội dung bằng văn bản, trong trường hợp đó, hãy thử sử dụng PHP để tiết kiệm thời gian.

Kiểm tra ví dụ mã dưới đây nếu bạn bị mất.

 
 
 
Thanh tiêu đề hàng đầu
 
 
 
Hiển thị trang khác??
 
gợi ý: nhấp vào nút bên dưới!
 
Về chúng tôi
 
  
 
 
 
Trang 2 Tại đây
 
 
 
chỉ một số nội dung bổ sung là tốt.
 
Ý tôi là, bạn có thể quay lại bất cứ lúc nào.
 
 
   

Hãy nhìn vào liên kết neo từ trang chỉ mục một lát. Lưu ý tôi đã thêm thuộc tính data-vai trò = "nút" để thiết lập liên kết dưới dạng nút. Nhưng thay vì sử dụng các kiểu mặc định, chúng tôi bao gồm data-theme = "c". Điều này chuyển đổi giữa 1 trong 5 mẫu (chủ đề a-e) được đóng gói theo mặc định dưới dạng kiểu CSS trong jQ Mobile.

Nút của tôi cũng kéo dài toàn bộ chiều rộng trang. Để loại bỏ hành vi, chúng ta cần đặt phần tử từ khối sang hiển thị nội tuyến. Thuộc tính để làm điều này là data-inline = "true" mà bạn có thể gắn vào bất kỳ nút neo nào.

Thanh đầu trang và chân trang

Dọc theo phần trên cùng và dưới cùng của ứng dụng, bạn nên nối thêm nội dung tiêu đề và chân trang. Phong cách thiết kế này thường được quy cho các ứng dụng iOS lần đầu tiên trở nên phổ biến khi sử dụng App Store trên thiết bị di động của Apple. jQ Mobile sử dụng các thuộc tính của vai trò dữ liệu để xác định tiêu đề, chân trang và nội dung trang. Chúng ta hãy xem xét ngắn gọn về các khu vực này.

Nút thanh trên cùng

Theo mặc định, thanh trên cùng hỗ trợ một bộ gồm hai (2) liên kết theo cách tương tự với các ứng dụng di động khác. iOS mặc định sử dụng “trở lại” nút bên trái và thường là một “tùy chọn” hoặc là “cấu hình” Phía bên phải.

 
 Cài đặt 
Trang 2 Tại đây
 
 

Mã ở trên chỉ tập trung vào bộ chứa div cho trang Giới thiệu của chúng tôi cùng với nội dung tiêu đề. Thuộc tính HTML bổ sung data-add-back-btn = "true" sẽ chỉ hoạt động khi được thêm vào vai trò dữ liệu trang. Mục đích là để tự động bao gồm một nút quay lại hoạt động tương tự như nút quay lại của trình duyệt của bạn.

Chúng tôi có thể đã thêm một nút quay lại thủ công với mã tương tự như chúng tôi đã sử dụng trong khu vực nội dung. Nhưng tôi cảm thấy việc này mất nhiều thời gian hơn để thiết lập đặc biệt là trên nhiều trang. Tất cả các liên kết neo trong phần tiêu đề sẽ mặc định vào các vị trí nút trái / phải. Bằng cách sử dụng lớp = "ui-btn-phải" nút này định vị lại nút Cài đặt của tôi để có không gian trống cho nút quay lại. Ngoài ra, tôi đang sử dụng các kiểu chủ đề phụ để cung cấp thêm cho nó!

Điều hướng chân trang

Khu vực chân trang nhiều người không cảm thấy rất hữu ích lúc đầu. Đó là nơi bạn có thể lưu trữ nội dung bản quyền và các liên kết quan trọng hơn, nhưng điều này có thể dễ dàng được thêm vào ở cuối khu vực nội dung của bạn. Vì vậy, những gì tốt là sử dụng chân trang?

Vâng, ví dụ tốt nhất tôi từng thấy sử dụng không gian chân trang như một hệ thống điều hướng nơi các liên kết tab xuất hiện để kiểm soát điều hướng trang. Có rất nhiều tùy chọn trong đó bạn có thể chọn hiệu ứng toàn màn hình, thêm biểu tượng, điều chỉnh vị trí và một vài thuộc tính khác. Nhưng chúng ta hãy xây dựng một điều hướng chân trang đơn giản với 3 nút để có ý tưởng về cách thức hoạt động của nó.

• Xem trước bản demo trực tiếp

Vì vậy, đây là một số mã chân trang cho phần về trang. data-vai trò = "thanh điều hướng" nên được thêm vào phần tử chứa một danh sách không có thứ tự và KHÔNG phải là phần tử UL. Mỗi liên kết trong danh sách được coi là một thanh tab, sau đó được chia đều dựa trên tổng số liên kết. Lớp bổ sung của ui-body-b chỉ thêm hiệu ứng thẩm mỹ khi chúng ta chuyển đổi giữa một vài phong cách có sẵn.

Nếu bạn nhận thấy trên nút đầu tiên tôi có thuộc tính data-direction = "đảo ngược". Mặc dù tôi có thể sử dụng thiết lập nút quay lại như trước để quay lại trang chủ, thay vào đó tôi đã sử dụng ID trang của #mục lục. Theo mặc định, cửa sổ ứng dụng sẽ chuyển sang bên phải trông khá khó khăn vì bạn mong muốn hình ảnh động sẽ di chuyển ngược lại. Bạn có thể chơi xung quanh với nhiều hiệu ứng hoạt hình hơn nữa nếu có thời gian. Kiểm tra trang thông tin chuyển tiếp trong tài liệu jQuery.

Trang Ajax & động

Phân đoạn đầu tiên đã thực sự mở ra những điểm chính để xây dựng một ứng dụng di động với jQuery. Nhưng tôi muốn bắt đầu một ứng dụng mới tải dữ liệu từ một trang bên ngoài. Tôi sẽ sử dụng một tập lệnh PHP rất đơn giản để đạt được $ _REQUEST [] biến và hiển thị một cú đánh Dribbble nhỏ tương ứng. Các màn hình dưới đây sẽ cho bạn ý tưởng về những gì chúng ta sẽ xây dựng.

Đầu tiên tôi sẽ tạo một trang index.html được đặt trên mẫu mặc định. Đối với màn hình chính này, tôi đang sử dụng thiết lập chế độ xem danh sách để hiển thị từng liên kết theo thứ tự. Điều này được thực hiện trong khu vực nội dung với một data-vai trò = "listview" thuộc tính trên danh sách container. Cắt bỏ các công cụ tiêu đề giống như trước đây, tôi đã thêm tất cả mã của mình từ trang chỉ mục mới này bên dưới.

 
 
 
Ảnh chụp tháng 10 năm 2011
 
 
 
 
Hình ảnh đầu tiên
 
Hình ảnh thứ hai
 
Hình ảnh thứ ba
 
Hình ảnh thứ tư
 
 
  
   

Mỗi liên kết neo trong chế độ xem danh sách của tôi trỏ đến cùng một tệp - index.php. Nhưng chúng ta đang truyền tham số imgid như một biến yêu cầu. Trên tệp image.php, chúng tôi lấy ID và kiểm tra nó dựa trên 4 giá trị đặt trước. Nếu có bất kỳ kết quả trùng khớp nào, chúng tôi sẽ sử dụng URL và tiêu đề hình ảnh phù hợp, nếu không, chúng tôi chỉ hiển thị ảnh Dribbble mặc định.

Tập lệnh tải hình ảnh

Kịch bản image.php vẫn có mẫu di động jQuery mặc định được thêm vào mã. Nó thực sự chia sẻ một tiêu đề và chân trang rất giống nhau, ngoại trừ việc thêm thuộc tính liên kết ngược của chúng tôi data-add-back-btn = "true". Lưu ý nút này sẽ chỉ hiển thị nếu chúng tôi đến từ index.html trước! Hãy thử tải trực tiếp image.php và sẽ không có gì xuất hiện vì không có “trở lại” di chuyển đến.

Tôi nghĩ rằng chúng ta có thể hiểu ý nghĩa của mã hơn một chút bằng cách kiểm tra logic PHP của tôi trước. Chúng tôi sử dụng một công tắc điện / trường hợp phương pháp kiểm tra 4 ID khác nhau và cung cấp tiêu đề, URL hình ảnh và liên kết nguồn nghệ sĩ gốc.

Tất cả dường như khá đơn giản - ngay cả một nhà phát triển PHP mới làm quen cũng có thể làm theo! Và nếu bạn không hiểu nó không quan trọng đối với mã jQuery, thì đừng lo lắng. Chúng ta nên chuyển đổi ngay bây giờ và xem mẫu tôi đã tạo trong trang mới này. Tất cả các mã HTML được thêm vào sau toàn bộ khối PHP ở trên. Tôi đã sử dụng ID của “hình ảnh” cho container và thậm chí thiết lập tiêu đề để thay đổi với mỗi ảnh mới.

 
 
 
 
 
 Xem bản gốc
 
 
  
 

Bạn có thể thấy bản demo này đơn giản như thế nào. Nhưng toàn bộ mục đích là để chứng minh khả năng mở rộng của jQuery mobile. PHP có thể dễ dàng được thêm vào hỗn hợp và bạn có thể tạo ra một số ứng dụng thực sự gọn gàng chỉ với vài giờ phát triển.

Thiết kế lạ mắt với Danh sách hình thu nhỏ

Một hiệu ứng được thêm vào cuối cùng mà chúng ta có thể thực hiện là sử dụng hình thu nhỏ để làm sống động trang danh sách. Tôi cũng sẽ chia văn bản thành một hộp tiêu đề và mô tả để hiển thị cả tiêu đề tác phẩm nghệ thuật và tên nghệ sĩ.

Để bắt đầu mở Photoshop và tạo một tài liệu 80 × 80 px. Tôi sẽ nhanh chóng chỉnh lại kích thước cho từng hình ảnh và lưu hình thu nhỏ để khớp với từng hình ảnh. Sau đó cập nhật các mục xem danh sách, chúng ta nên thêm một vài yếu tố.

Kiểm tra mã dưới đây và ví dụ demo của tôi để xem ý tôi là gì.

[Xem trước bản demo trực tiếp]

 
 
  
Nhiệm vụ của Wunderkit
 
của Sebastian Scheerer
 
  
Colleeeeeeeeeeeeege
 
bởi Scott Hill
 
  
Ứng dụng diễn đàn cho Facebook
 
bởi Irika Zamfir
 
  
Twitter
 
bởi Sam Jones
 
 
 

Các lớp học cho ui-li-đề và ui-li-desc được thêm theo mặc định vào biểu định kiểu jQuery Mobile. Điều này tương tự như lớp hình ảnh ui-li-ngón tay cái tự động thay đổi kích thước mỗi thanh xem danh sách theo chiều cao hình ảnh. Bây giờ từ đây bạn có thể xây dựng nhiều hơn trên frontend với hình động, hiệu ứng trang, bảng định kiểu, v.v..

Hoặc ngoài ra, bạn có thể bắt đầu xây dựng một hệ thống phụ trợ để tải lên hình ảnh mới và tự động cắt hình thu nhỏ để đưa vào danh sách. Có rất nhiều tính linh hoạt với jQuery Mobile, bạn gần như không thể gắn nhãn nó chỉ là một thư viện JavaScript. Đó là nhiều hơn toàn bộ khung HTML5 / CSS / jQuery để xây dựng các ứng dụng di động nhanh và có thể mở rộng.

Phần kết luận

Khi viết bài viết này, nhóm jQuery Mobile đã chính thức đưa ra RC1.0 của thư viện mã. Điều này có nghĩa là hầu hết nếu không phải tất cả các bản sửa lỗi lớn đã bị xóa và bây giờ những người kiểm tra đang chuẩn bị phát hành đầy đủ. Vì điều này, bạn sẽ không tìm thấy nhiều thông tin trên web.

Nhưng khi các tháng trước, các nhà phát triển web chắc chắn sẽ bắt kịp xu hướng. Các ứng dụng di động và thậm chí bố trí web di động đang ngày càng phổ biến với sự gia tăng lớn trong điện thoại thông minh. Các nhà phát triển web không có thời gian để học một ngôn ngữ lập trình đầy đủ để xây dựng các ứng dụng Android / iOS. Do đó, jQuery Mobile là một giải pháp thay thế mỏng, bao gồm hỗ trợ cho phần lớn phần mềm công nghiệp di động và tiếp tục phát triển mỗi ngày với cộng đồng nhà phát triển tích cực.