Làm thế nào để Xây dựng Tài liệu Di động Đa Trang cho Lập trình HTML5 và CSS3 - núm vú

Thật tuyệt khi có thể lướt web HTML5 và CSS3 nó phù hợp trên một thiết bị di động, nhưng rõ ràng nếu trang này nhỏ hơn, bạn sẽ cần nhiều thứ hơn. Các ứng dụng dành cho thiết bị di động thường sử dụng phép ẩn dụ lật trang để đóng gói nhiều dữ liệu hơn trong một phần nhỏ của màn hình bất động sản và thư viện điện thoại di động jQuery có một công cụ tuyệt vời khác để làm điều này dễ dàng.

Cho đến nay, ứng dụng này trông giống như các ứng dụng di động jQuery khác bạn đã nhìn thấy cho đến thời điểm này. Một điều là khác nhau, và đó là nút trong tiêu đề. Rất phổ biến đối với các ứng dụng dành cho thiết bị di động để có các nút điều hướng trong tiêu đề. Nhấn nút Tiếp theo.

Sau một quá trình chuyển đổi mờ dần, trang tiếp theo xuất hiện. Điều này có hai nút trong tiêu đề. Nhấn Tiếp theo sẽ đưa người dùng đến trang thứ ba.

Trang thứ ba một lần nữa rất quen thuộc, nhưng lần này nó có một nút ở bên trái của tiêu đề, và một nút khác trong khu vực nội dung chính.

Điều thú vị về ba trang này là họ không phải là ba trang! Đó chỉ là một trang, được thiết kế để hoạt động giống như ba trang khác nhau. Có một vài lợi thế cho sự sắp xếp này.

Điều này giúp hệ thống luôn nhất quán và cải thiện thời gian tải một chút. Không có thời gian trễ:

Khi tài liệu được tải, toàn bộ nội dung nằm trong bộ nhớ, ngay cả khi chỉ có một phần hiển thị được tại một thời điểm. Điều này cho phép bạn nhanh chóng di chuyển giữa các trang mà không cần phải chờ đợi để truy cập vào máy chủ. Bạn thường sẽ thực hiện loại cơ chế này khi bạn có một trang lớn mà bạn muốn coi là một số trang nhỏ hơn do đó người dùng không phải cuộn.

Đây là mã cho đa trang. html toàn bộ.

multiPage. html #foot {font-size: 75%; kiểu chữ: italic; text-align: center;} pre {margin-left: auto; lề phải: tự động; màu nền: màu trắng;

trang

trang 2
trang 3
từ HTML Tất cả trong một cho Dummies

prev
Trang Hai
tiếp theo
Trang thứ hai giống như phần đầu tiên, ngoại trừ nó không phải là đầu tiên, và nó có văn bản hơn là các nút. Đó là trang thứ hai. Nếu bạn thích thứ nhất, tôi cho rằng bạn có thể quay trở lại, nhưng bạn nên đi đến trang tiếp theo, bởi vì tôi nghe nó thực sự tốt đẹp. từ HTML Tất cả trong một cho Dummies

prev
Trang Ba 3333333 3 3 3 33333 3 3 3 3333333
Về đầu trang từ HTML Tất cả trong một cho Dummies

Trong khi mã cho ví dụ này là dài, nó không phá vỡ rất nhiều mặt đất mới.
Tải nội dung di động jQuery.

Kéo các tệp CSS và JavaScript cần thiết từ jQuery. com trang web.
Áp dụng CSS của riêng bạn.

Ngay cả khi bạn "mượn" mã CSS từ jQuery, bạn vẫn được phép thêm mã của riêng mình. Bạn có thể thêm CSS để làm cho chân trang và các phần tử trước hoạt động theo cách bạn muốn.

1. Tạo trang của bạn.

   Bạn có thể xây dựng nhiều trang như bạn muốn, nhưng tất cả chúng đều làm theo mẫu chung của điện thoại di động jQuery chung: Tạo một trang div với tiêu đề, nội dung và footer divs. Sử dụng thuộc tính data-role để chỉ ra vai trò của mỗi div.

2. Đặt tên cho mỗi divs cấp trang với thuộc tính id.

   Bởi vì người dùng sẽ lướt qua các trang, mỗi trang cần một số loại định danh. Cung cấp cho mỗi trang thuộc tính id duy nhất.

3. Tạo nút bên trong tiêu đề.

   Phần thực sự mới của ví dụ này (ngoài việc lật trang) là các nút trong tiêu đề. Bỏ qua tiêu đề trang 2, và bạn sẽ thấy một cái gì đó thực sự thú vị:

4. prev

   Trang Hai

5. tiếp

   Nếu bạn định nghĩa một liên kết bên trong một phần tử với vai trò dữ liệu tiêu đề, liên kết đó sẽ tự động trở thành một nút. Hơn nữa, liên kết đầu tiên được xác định sẽ tự động được đặt ở bên trái của tiêu đề, và thứ hai sẽ được đặt bên phải.

   Dùng một nút ở bên phải.
   
   Nếu bạn muốn một nút ở bên phải, hãy thêm một lớp vào nút:
   Trang 1
   

   tiếp

6. Sử dụng neo bên trong để bỏ qua giữa các trang.

   Hãy xem các URL trong tất cả các nút. Họ bắt đầu với một hash, cho thấy một liên kết nội bộ bên trong tài liệu. Hãy nhớ rằng, mặc dù điều này cảm thấy giống như ba trang khác nhau cho người dùng, nhưng đó thực sự là một trang web lớn.

   
   Thí nghiệm với quá trình chuyển đổi.
   Hãy xem cẩn thận nút ở trang ba:
   

7. Chuyển đến mục

   Nút này có đặc tính chuyển tiếp dữ liệu đặc biệt. Theo mặc định, các trang điện thoại di động hoán đổi với sự biến mất. Bạn có thể thiết lập quá trình chuyển đổi sang slide, slideup, slidedown, pop, fade, hoặc lật. Bạn cũng có thể đảo ngược quá trình chuyển đổi bằng cách thêm thuộc tính khác: data-direction = "reverse".