Chuyển đổi jQuery Mobile

jQuery Mobile bao gồm các hiệu ứng CSS cho phép bạn chọn cách mở trang.

Hiệu ứng chuyển đổi jQuery Mobile

jQuery Mobile có một loạt các hiệu ứng về cách chuyển từ trang này sang trang tiếp theo.

Ghi chú:Để thực hiện hiệu ứng chuyển đổi, trình duyệt phải hỗ trợ chuyển đổi CSS3 3D:

Hỗ trợ trình duyệt

  • Internet Explorer 10 hỗ trợ chuyển đổi 3D (phiên bản trước không hỗ trợ)
  • Opera vẫn chưa hỗ trợ chuyển đổi 3D

Hiệu ứng chuyển đổi có thể được áp dụng cho bất kỳ liên kết nào hoặc thông qua việc sử dụng thuộc tính data-transition trong biểu mẫu gửi:

<a href="#anylink" data-transition="slide">Chuyển sang trang hai</a>

Bảng dưới đây hiển thị các hiệu ứng chuyển đổi có thể sử dụng cùng với thuộc tính data-transition:

Chuyển đổi Mô tả Kiểm tra
fade Mặc định. Mờ vào mờ ra sang trang tiếp theo. Kiểm tra
flip Cuộn từ sau trước để chuyển sang trang tiếp theo. Kiểm tra
flow Toss ra trang hiện tại, chào đón trang tiếp theo. Kiểm tra
pop Chuyển sang trang tiếp theo như cửa sổ bật lên. Kiểm tra
slide Cuộn từ phải sang trái để chuyển sang trang tiếp theo. Kiểm tra
slidefade Cuộn từ phải sang trái và mờ vào trang tiếp theo. Kiểm tra
slideup Cuộn từ dưới lên để chuyển sang trang tiếp theo. Kiểm tra
slidedown Cuộn từ trên xuống để chuyển sang trang tiếp theo. Kiểm tra
turn Chuyển sang trang tiếp theo. Kiểm tra
none Không có hiệu ứng chuyển đổi. Kiểm tra

Lưu ý:Trong jQuery Mobile, hiệu ứng mờ vào mờ ra là mặc định trên tất cả các liên kết (nếu trình duyệt hỗ trợ).

Lưu ý:Tất cả các hiệu ứng trên hỗ trợ hành động ngược lại, ví dụ, nếu bạn muốn trang cuộn từ trái sang phải thay vì từ phải sang trái, hãy sử dụng thuộc tính data-direction có giá trị là "reverse". Giá trị mặc định là trên nút quay lại.

Mô hình

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Cuộn</a>

Thử ngay