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:

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

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.