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ị:

•  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:

Bài viết này được đăng tại [kiso.vn]

<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 và -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.