JQUERY MOBILE CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Bài 03: jQuery Mobile - Transitions

jQuery Mobile Framework cho phép bạn chuyển trang với nhiều hiệu ứng khác nhau dựa vào CSS3 Transitions, bạn có thể áp dụng cho mọi liên kết chuyển trang giữa các page tĩnh hoặc có sử dụng Ajax.

1. Transition trong jQuery Mobile

Để tạo hiệu ứng Transition thì ta bổ sung thêm thuộc tính data-transition="type", trong đó type là một trong các giá trị:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  •  fade
  • pop
  • flip
  • turn
  • flow
  • slidefade
  • slide
  • slideup
  • slidedown
  • none

Chuyển trang bình thường:

Ví dụ: XEM DEMO

Để hiểu rõ hơn thì mình xin demo danh sách các hiệu ứng trong bảng sau:

<div data-role="page" id="init">
    <div data-role="header">
        <h1>Transition</h1>
    </div>
    <div role="main" class="ui-content">
        <p>jQuery Mobile Transition</p>
        <p>
            <a href="#intro" data-transition="fade" class="ui-btn ui-btn-inline">Fade</a>
            <a href="#intro" data-transition="pop" class="ui-btn ui-btn-inline">Pop</a>
            <a href="#intro" data-transition="flip" class="ui-btn ui-btn-inline">Flip</a>
            <a href="#intro" data-transition="turn" class="ui-btn ui-btn-inline">Turn</a>
            <a href="#intro" data-transition="flow" class="ui-btn ui-btn-inline">Flow</a>
            <a href="#intro" data-transition="slidefade" class="ui-btn ui-btn-inline">SlideFade</a>
            <a href="#intro" data-transition="slide" class="ui-btn ui-btn-inline">Slide</a>
            <a href="#intro" data-transition="slideup" class="ui-btn ui-btn-inline">Slideup</a>
            <a href="#intro" data-transition="slidedown" class="ui-btn ui-btn-inline">Slidedown</a>
            <a href="#intro" data-transition="none" class="ui-btn ui-btn-inline">None</a>

        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

<div data-role="page" id="intro">
    <div data-role="header">
        <h1>Lời giới thiệu</h1>
    </div>
    <div role="main" class="ui-content">
        <p>
            jQuery Mobile Framework cho phép bạn chuyển trang với nhiều hiệu ứng 
            khác nhau dựa vào CSS3 Transitions, bạn có thể áp dụng cho mọi liên kết 
            chuyển trang giữa các page tĩnh hoặc có sử dụng Ajax.
        </p>
        <p>
            <a href="#init">Trở về</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

Chuyển trang dạng Dialog:

Trường hợp bạn muốn chuyển trang ở dạng Dialog thì ta chỉ cần bổ sung một thuộc tính data-rel="dialog" vào các button.

Ví dụ: XEM DEMO

<div data-role="page" id="init">
    <div data-role="header">
        <h1>Transition</h1>
    </div>
    <div role="main" class="ui-content">
        <p>jQuery Mobile Transition</p>
        <p>
            <a href="#intro" data-transition="fade" data-rel="dialog" class="ui-btn ui-btn-inline">Fade</a>
            <a href="#intro" data-transition="pop" data-rel="dialog" class="ui-btn ui-btn-inline">Pop</a>
            <a href="#intro" data-transition="flip" data-rel="dialog" class="ui-btn ui-btn-inline">Flip</a>
            <a href="#intro" data-transition="turn" data-rel="dialog" class="ui-btn ui-btn-inline">Turn</a>
            <a href="#intro" data-transition="flow" data-rel="dialog" class="ui-btn ui-btn-inline">Flow</a>
            <a href="#intro" data-transition="slidefade" data-rel="dialog" class="ui-btn ui-btn-inline">SlideFade</a>
            <a href="#intro" data-transition="slide" data-rel="dialog" class="ui-btn ui-btn-inline">Slide</a>
            <a href="#intro" data-transition="slideup" data-rel="dialog" class="ui-btn ui-btn-inline">Slideup</a>
            <a href="#intro" data-transition="slidedown" data-rel="dialog" class="ui-btn ui-btn-inline">Slidedown</a>
            <a href="#intro" data-transition="none" data-rel="dialog" class="ui-btn ui-btn-inline">None</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

<div data-role="page" id="intro">
    <div data-role="header">
        <h1>Lời giới thiệu</h1>
    </div>
    <div role="main" class="ui-content">
        <p>
            jQuery Mobile Framework cho phép bạn chuyển trang với nhiều hiệu ứng 
            khác nhau dựa vào CSS3 Transitions, bạn có thể áp dụng cho mọi liên kết 
            chuyển trang giữa các page tĩnh hoặc có sử dụng Ajax.
        </p>
        <p>
            <a href="#init">Trở về</a>
        </p>
    </div>
    <div data-role="footer">
        <h2>Author: thehalfheart</h2>
    </div>
</div>

Một số lưu ý:

Một số hiệu ứng chạy trên các platforms sẽ bị lỗi nhỏ đó là bị nhấp nháy chút xíu, đặc biệt là Android thì bạn nên bổ sung một đoạn code CSS sau:

.ui-page { -webkit-backface-visibility: hidden; }

Cũng có một số platforms không hỗ trợ 3D như Android 2x sẽ bị lỗi một số hiệu ứng, vì vậy bạn phải kiểm tra kỹ lưỡng trước khi phát triển ứng dụng.

Vì những thuộc tính transition là CSS3 nên bạn phải khai báo keyframe đầy đủ cho các trình duyệt như thêm thuộc tính với tiền tố là -webkit-moz.

2. Lời kết

Hiệu ứng transitions là hiệu ứng CSS3 nên một số trình duyệt cũ trên Browser sẽ không chạy được. Tuy nhiên đó không phải là vấn đề vì jQuery Mobile xây dựng ứng dụng web trên Mobile, mà hầu hết các thiết bị hiện đại hiện nay đều hỗ trợ HTML5 và CSS3 tốt.

Cùng chuyên mục:

Bài 12: jQuery Mobile - Tables

Bài 12: jQuery Mobile - Tables

Đối với Table rất khó có thể xây dựng responsive bởi vì nó không hiển…

Bài 11: jQuery Mobile - Collapsibles

Bài 11: jQuery Mobile - Collapsibles

Collapsible là hiệu ứng khi bạn click vào dấu cộng thì nó sẽ mở rộng…

Bài 10: jQuery Mobile - Panel

Bài 10: jQuery Mobile - Panel

jQuery Mobile Panel là thành phần trượt ra từ bên phải hoặc bên trái khi…

Bài 09: jQuery Mobile - Navigation Bars

Bài 09: jQuery Mobile - Navigation Bars

Navigations Bar là phần nằm phía dưới header dùng để hiển thị các button kèm…

Bài 08: jQuery Mobile - Toolbar Header và Footer

Bài 08: jQuery Mobile - Toolbar Header và Footer

Toolbar là thanh công cụ hiển thị ở đầu trang (header) và cuối trang (footer).…

Bài 07: jQuery Mobile - Data Position To

Bài 07: jQuery Mobile - Data Position To

Trong bài này chúng ta sẽ tìm hiểu thuộc tính data-position-to trong jQuery Mobile, đây…

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Bài 06: jQuery Mobile - Popup - Tooltip - Lightbox

Popup là một thành phần không thể thiếu trong các ứng dụng Mobile được, vì…

Bài 05: jQuery Mobile - Icons

Bài 05: jQuery Mobile - Icons

jQuery Mobile hỗ trợ một nhóm các icon sử dụng cho buttons, collapsibles, listview buttons…

Bài 04: jQuery Mobile - Buttons

Bài 04: jQuery Mobile - Buttons

jQuery Mobile hỗ trợ một số style button căn bản để tạo giao diện website,…

Bài 02: jQuery Mobile - Tìm hiểu Page

Bài 02: jQuery Mobile - Tìm hiểu Page

Page là một thành phần chính dùng để gom nhóm các nội dung liên quan…

Bài 01: jQuery Mobile là gì?

Bài 01: jQuery Mobile là gì?

jQuery Mobile là một Framework được phát triển tương tự như thư viện jQuery nhưng…

Top