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 là một thuộc tính giúp xác định nơi hiển thị của Popup hoặc dialog.

1. Data-position-to trong jQuery Mobile

Thuộc tính data-position-to giúp xac popup sẽ hiển thị tại vị trí nào. Nó có ba giá trị như sau:

  • window: hiển thị ngay giữa màn hình
  • origin: hiển thị ngay tại button mà ta click
  • #selector: ID của thẻ HTML nào đó

Ví dụ: XEM DEMO

<div data-role="page">
    <div data-role="header" id="position-header">
        <h2>Position To</h2>
    </div>
    <div role="main" class="ui-content">
        <a href="#positionWindow" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="window">Position to window</a> <br/>
        <a href="#positionOrigin" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="origin">Position to origin</a> <br/>
        <a href="#positionSelector" class="ui-btn ui-btn-inline" data-rel="popup" data-position-to="#position-header">Position to #position-header</a>
        <div data-role="popup" id="positionWindow" class="ui-content" data-theme="a">
            <p>I am positioned to the window.</p>
        </div>
        <div data-role="popup" id="positionOrigin" class="ui-content" data-theme="a">
            <p>I am positioned over the origin.</p>
        </div>
        <div data-role="popup" id="positionSelector" class="ui-content" data-theme="a">
            <p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</p>
        </div>
    </div>
</div>

2. Lời kết

Đáng lẽ trong bài tìm hiểu Popup mình giới thiệu luôn nhưng vì bài đó dài rồi nên mình tách ra, một phần giúp bạn dễ tìm kiếm và một phần giảm thời lượng học của bài đó.

Bài tiếp theo chúng ta sẽ tìm hiểu về Toolbar.

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

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 Group Facebook để được hỗ trợ nhanh nhất.