Làm thế nào để Xây dựng một Trang Di động Cơ bản cho Lập trình HTML5 và CSS3 - núm vú

Có một cách tiếp cận rất phổ biến giữa các lập trình viên HTML5 và CSS3 để xây dựng các trang web thân thiện với điện thoại di động với AJAX và sử dụng thư viện bổ sung cho jQuery được gọi là jQuery Mobile . Jquery Mobile là một sự kết hợp mạnh mẽ của mã JavaScript và CSS được xây dựng trên đầu của thư viện.

Thư viện jQuery hoạt động bằng cách sử dụng một trang HTML5 bình thường và sửa đổi nó theo cách mà mô phỏng một cái nhìn và cảm giác bản địa. Mã trông rất giống với HTML thông thường:

JQuery Mobile Demo

Trang web jQuery Mobile

Đây là một danh sách bình thường

• Mã hoá giống
• danh sách điện thoại di động
• từ > HTML All in One for Dummies

Một vài chi tiết biến trang này thành một kỳ quan di động:

Bao gồm jQuery mobile CSS.

Đây là một tệp CSS đặc biệt được thiết kế để chuyển các phần tử HTML thành các đối tượng di động của chúng. Mặc dù bạn có thể tải xuống chính nó, hầu hết các nhà phát triển liên kết trực tiếp tới trang jQuery.

1. Bao gồm thư viện jQuery chuẩn

   Phần lớn mã được dựa trên jQuery, vì vậy hãy tích hợp thư viện jQuery. Một lần nữa, bạn cần kéo jQuery từ trang web jQuery chính.

2. Kết hợp thư viện di động jQuery.

   Đây là thư viện JavaScript mở rộng thư viện để thêm hành vi cụ thể cho điện thoại di động mới.

3. Thêm thuộc tính data-role = "page" vào div chính.

   Tạo một div chính trong trang của bạn và cung cấp thuộc tính cho nó. Đây là thuộc tính vai trò dữ liệu tùy chỉnh được thêm bởi jQuery mobile. jQuery xem xét vai trò dữ liệu của các phần tử khác nhau và áp dụng các thay đổi kiểu dáng và hành vi cho các phần tử này một cách tự động. Gán div chính của bạn cho trang vai trò dữ liệu. Điều này cho trình duyệt xem toàn bộ div là một trang.

4. Chỉ định một chủ đề dữ liệu.

   Bạn có thể áp dụng một chủ đề dữ liệu cho bất kỳ phần tử nào, nhưng bạn hầu như luôn áp dụng một chủ đề cho trang. jquery điện thoại di động đi kèm với một số chủ đề mặc định được xây dựng trong, được gọi là "a" thông qua "e. "Thí nghiệm để tìm một trong những bạn thích, hoặc bạn có thể xây dựng của riêng bạn với các phiên bản điện thoại di động đặc biệt của ThemeRoller.

5. Thêm nhiều div bên trong trang của bạn.

   Thêm một vài div bên trong div trang của bạn. Nói chung bạn sẽ có ba: tiêu đề, nội dung và chân trang.

6. Chỉ định phần header với data-role = "header".

   Bằng cách đặt bất kỳ thông tin tiêu đề nào bên trong div bằng vai trò dữ liệu "tiêu đề", bạn sẽ nói với jQuery để coi phần tử này là tiêu đề trên điện thoại di động và áp dụng các kiểu thích hợp. Tiêu đề thường bao gồm thẻ

7. Thông thường, bạn sẽ chỉ định tiêu đề được cố định bằng thuộc tính data-position = "fixed". Điều này đảm bảo tiêu đề sẽ giữ nguyên vị trí nếu phần còn lại của nội dung được cuộn xuống, đó là hành vi điển hình trong ứng dụng dành cho thiết bị di động.

   Thiết lập một div nội dung

   Thêm div bằng data-role = "nội dung" để thiết lập khu vực nội dung chính của trang của bạn. Bất kỳ yếu tố cơ thể chính nào của trang web của bạn phải đi trong phân đoạn này.

8. Bất kỳ liên kết nào cũng có thể được chuyển đổi sang một nút.

   Quy ước tiêu chuẩn trong ứng dụng web là chuyển các liên kết thành các nút có mục tiêu lớn hơn đầu vào dựa trên con chuột. Thật dễ dàng để chuyển đổi bất kỳ liên kết đến một nút bằng cách thêm thuộc tính data-role = "nút" vào thẻ neo.

9. Chuyển đổi danh sách sang danh sách xem trên điện thoại di động.

   Danh sách cũng có các quy ước đặc biệt trong thế giới di động. Bạn có thể sử dụng thuộc tính data-role để biến bất kỳ danh sách nào thành một listView.

10. Tạo một chân trang.

    Thêm một div khác với vai trò dữ liệu được đặt thành "chân trang". Thông thường, chân trang (như tiêu đề) được cố định với thuộc tính vị trí dữ liệu.