jQuery Mobile - Chuyển đổi
Nó cho phép thay đổi các giá trị thuộc tính xảy ra trong khoảng thời gian xác định và thay đổi hành vi của một phần tử từ trạng thái này sang trạng thái khác bằng cách áp dụng các kiểu khác nhau cho từng trạng thái.
Bảng sau liệt kê một số chuyển đổi trang được sử dụng trong khuôn khổ jQuery Mobile:
| Sr.No. | Chuyển tiếp & Mô tả | Đối với các trang | Đối với hộp thoại |
|---|---|---|---|
| 1 | fade Bạn có thể làm cho các yếu tố mờ dần và khuất tầm nhìn. |
Trang Fade | Hộp thoại Fade |
| 2 | flip Lật các phần tử từ sau ra trước sang trang tiếp theo. |
Lật trang | Hộp thoại lật |
| 3 | pop Bạn có thể tạo một cửa sổ bật lên. |
Trang Pop | Hộp thoại Pop |
| 4 | flow Hiển thị trang tiếp theo bằng cách giữ trang hiện tại cách xa. |
Trang dòng chảy | Hộp thoại Luồng |
| 5 | slide Bạn có thể trượt trang từ phải sang trái. |
Trang trình chiếu | Hộp thoại Trượt |
| 6 | slidefade Trượt trang từ phải sang trái và mờ dần ở trang tiếp theo. |
Trang slidefade | Hộp thoại Slidefade |
| 7 | slideup Trượt trang từ dưới lên. |
Trang trình chiếu | Hộp thoại Slideup |
| số 8 | slidedown Trượt trang từ trên xuống dưới. |
Trang trình chiếu | Hộp thoại trượt xuống |
| 9 | turn Bạn có thể lật sang trang tiếp theo. |
Sang trang | Quay hộp thoại |
| 10 | none Bạn không thể sử dụng bất kỳ hiệu ứng chuyển tiếp nào bằng cách sử dụng thuộc tính này. |
Không có trang | Không có hộp thoại |
Đặt cấu hình chuyển tiếp và toàn cục
Theo mặc định, các trang sẽ có fadechuyển tiếp trong khuôn khổ. Bạn có thể sử dụng chuyển đổi tùy chỉnh bằng cách thêmdata-transitionthuộc tính cho liên kết. Bạn có thể sử dụng các hiệu ứng chuyển tiếp mặc định khác nhau cho trang bằng cách sử dụngdefaultPageTransitiontùy chọn trên toàn cầu. Đối với hộp thoại, bạn có thể sử dụngdefaultDialogTransition Lựa chọn.
Chuyển đổi dự phòng
Tất cả các chuyển đổi đều hỗ trợ chuyển đổi 3D ngoại trừ chuyển đổi mờ dần. Các thiết bị không hỗ trợ chuyển đổi 3D, chúng sẽ phải sử dụng chuyển đổi mờ dần. Một số trình duyệt không hỗ trợ chuyển đổi 3D cho từng loại chuyển đổi, vì vậy bạn có thể sử dụngfade làm dự phòng chuyển tiếp mặc định.
Cuộn tối đa cho chuyển đổi
Chuyển đổi được đặt thành không khi bạn đang cuộn từ hoặc đến một trang và vị trí cuộn sẽ gấp ba lần chiều cao của màn hình thiết bị. Đôi khi, bạn có thể phản hồi chậm hoặc trình duyệt có thể gặp sự cố khi bạn nhấp vào bất kỳ phần tử điều hướng nào; vì vậy để tránh điều này, chúng tôi đang sử dụng vị trí cuộn để chuyển đổi bằng cách sử dụnggetMaxScrollForTransition chức năng.
Chiều rộng tối đa cho chuyển tiếp
Bạn có thể tắt chuyển đổi khi chiều rộng cửa sổ cao hơn chiều rộng pixel. Bạn có thể định cấu hình chiều rộng tối đa cho các chuyển đổi bằng cách sử dụng$.mobile.maxTransitionWidthtùy chọn toàn cầu, được đặt thành false theo mặc định. Nó nhận các giá trị như chiều rộng pixel hoặc giá trị false và quá trình chuyển đổi sẽ được đặt thành không nếu nó không phải là giá trị sai khi cửa sổ cao hơn giá trị được chỉ định.
Chuyển đổi cùng một trang
Bạn có thể thêm các chuyển đổi vào trang hiện tại bằng cách sử dụng allowSamePageTransition tùy chọn của tiện ích con vùng chứa trang change() phương pháp.
Tạo chuyển đổi tùy chỉnh
Bạn có thể tạo các chuyển đổi tùy chỉnh trong trang bằng cách sử dụng $.mobile.transitionHandlers tùy chọn mở rộng lựa chọn chuyển tiếp trên trang web hoặc ứng dụng.