Chuyển đến phần nội dung

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

Posted on by adminChuyên mục:Kiến thức Internet
Popup là một thành phần không hề thiếu trong những ứng dụng Mobile được, vì thế jQuery Mobile cũng không quên kiến thiết xây dựng component này. Bạn hoàn toàn có thể tạo nhiều loại Popup khác nhau như tooltip, image lightbox, …

test php

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.

1. Tạo Popup

Để tạo một Popup thì bạn chỉ cần bổ sung một thuộc tính data-rel="popup" vào thẻ a của button, sau đó thuộc tính href trỏ đến ID của thẻ div chứa nội dung muốn show. Về phía thẻ div bạn phải khai báo thêm thuộc tính data-role="popup" để báo cho jQuery Mobile biết nó hiển thị ở dạng popup.

Ví dụ: XEM DEMO


    

        LOGIN
        

            

                

                    

                        Username
                        
                    

                    

                        Password

Khi bạn click vào thẻ a LOGIN thì sẽ hiển thị một popup LOGIN.

2. Tạo Tooltip 

Tooltip cũng là một dạng Popup và nó thường dùng trong hiệu ứng Hover đoạn text, nhưng chúng ta đang làm việc trên thiết bị di động nên không có hiệu ứng Hover mà sẽ có hiệu ứng Click.

Popup thường sẽ có một dấu nhọn trỏ đến nơi ta click và để làm điều này thì ta bổ sung thuộc tính data-arrow="true" vào thẻ div bao quanh popup.

Giá trị của thuộc tính data-arrow có thể là:

  • true : hiển thị dấu nhọn ở bất kì vị trí nào cho tương thích Responsive.
  • false: không hiển thị dấu nhọn
  • l ohoặc t hoặc r hoặc b: xác định hiển thị left hoặc top hoặc right hoặc bottom.
  • “”: khoảng trắng có tác dụng tương tự như false.

Ví dụ: XEM DEMO


    

        

            TRUE 

            FALSE 

            L 

            R 

            B 

            T
        

        

              freetuts.net là một website học lập trình trực tuyến không lấy phí
        

        

              freetuts.net là một website học lập trình trực tuyến không lấy phí
        

        

              freetuts.net là một website học lập trình trực tuyến không tính tiền
        

        

              freetuts.net là một website học lập trình trực tuyến không tính tiền
        

        

              freetuts.net là một website học lập trình trực tuyến không lấy phí
        

        

              freetuts.net là một website học lập trình trực tuyến không lấy phí

3. Tắt Popup 

Theo mặc định khi bạn click bên ngoài hoặc nhấn ESC thì Popup sẽ tắt. Nhưng đôi khi bạn muốn tạo một button để khi người dùng click để tắt Popup. Cũng có trường hợp bạn muốn click bên ngoài Popup thì nó sẽ không tắt, tức là bắt buộc muốn tắt thì trải qua một button nào đó bên trong Popup .

Để tạo một button Close Popup thì bạn phải đặt button đó nằm bên trong thẻ div cha và đồng thời bổ sung thuộc tính data-rel="back".

Để xóa bỏ chức năng click bên ngoài Popup và nhấn ESC thì ta thêm thuộc tính data-dismissible="false" vào thẻ div cha.

Ví dụ: XEM DEMO


    

        BUTTON NẰM BÊN TRÁI 

        BUTTON NẰM BÊN PHẢI 

        DATA DISMISSIBLE 
        

            Close
            Nhân ESC hoặc click button hoặc click bên ngoài sẽ tắt
        

        

            Close
            Nhân ESC hoặc click button hoặc click bên ngoài sẽ tắt
        

        

            Close
            Bắt buộc click vào button mới tắt

4. Tạo Photo lightbox 

Photo lightbox là hiệu ứng khi click chuột vào hình ảnh nó sẽ hiển thị một Popup và phóng to hình ra .
Để tạo một Photo lightbox thì bạn chỉ cần thiết kế xây dựng nội dung của Popup là một tấm hình .

Ví dụ: XEM DEMO


    

        
            
        
        

            Close

5. Dialog 

Mặc định Popup đã là một dạng dialog rồi nên ta chỉ cần bổ sung css cho giao diện, đồng thời thêm thuộc tính data-dismissible="false" cho thẻ div cha để đảm bảo người dùng luôn luôn click vào các button trong dialog.

Để Dialog luôn hiển thị giữa màn hình thì ta bổ sung thuộc tính data-position-to="window" cho button.

Để tạo hiệu ứng đẹp thì mình chọn data-transition="pop". Xem lại bài jQuery Mobile Transitions.

Ví dụ: XEM DEMO


    

        Delete page...

        

            
Delete Page?

            

                
Are you sure you want to delete this page?

                This action cannot be undone .
                Cancel
                Delete

 

6. Lời kết

Còn khá nhiều ví dụ về Popup trong jQuery Mobile nhưng chung quy lại là ý tưởng sáng tạo nội dung của Popup, thế cho nên mình sẽ ngưng bài viết này tại đây .
Bài tiếp theo tất cả chúng ta sẽ khám phá một những Position trong jQuery Mobile .

admin

Lên trên