Hướng dẫn cách tạo Confirm Navigation bằng jQuery

Xem: 2653    Tải: 2   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

10 điểm   ( 6 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-cach-tao-confirm.rar (5.74 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-cach-tao-confirm.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Confirm Navigation là một pop up xuất hiện mỗi khi người dùng nhấn vào link nào đó để chuyển hướng. Nó giúp người dùng xác nhận là có thật sự muốn chuyển hướng đến link không, hay chỉ là vô tình click vào. Chức năng này chúng ta có thể bắt gặp mỗi khi post bài trong WordPress và vô tình nhấn vào link nào đó khi chúng ta đang viết bài.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Confirm Navigation là một pop up xuất hiện mỗi khi người dùng nhấn vào link nào đó để chuyển hướng. Nó giúp người dùng xác nhận là có thật sự muốn chuyển hướng đến link không, hay chỉ là vô tình click vào. Chức năng này chúng ta có thể bắt gặp mỗi khi post bài trong WordPress và vô tình nhấn vào link nào đó khi chúng ta đang viết bài.

Nó trông giống như thế này ở trên trình duyệt Chrome.

HTML

Giả sử chúng ta có một thẻ input và một link như thế này trên trang web.

<input type="text" class="w100 mt10" id="content"/>
<a href="http://www.megacode.com.vn">Navigation Link</a>

jQuery

Và bây giờ một khi người dùng đã nhập dữ liệu vào trong thẻ input thì khi click vào link, thì pop up sẽ xuất hiện để kiểm chứng xem người dùng có thật sự muốn chuyến trang không. Để làm được việc này, thì các bạn dùng đoạn jQuery sau :

// Flag to show/hide confirmation
var showConfirm = false;
 
// Enabling confirmation on textbox content change
$(document).ready(function(){
    $('#content').keyup(function(){
        showConfirm = true;
    });
});
 
// Window event to show Confirm Notification
window.onbeforeunload = confirmExit;
function confirmExit()
{
    if(showConfirm){
        return "You typed something in the textbox. Are you sure you want leave?";
    }
}

Mình xin giải thích ngắn gọn về đoạn code bên trên như sau :
- Đầu tiên, chúng ta khai báo một biến showConfirm và ấn định giá trị là false. Biến này chỉ có giá trị true khi sự kiện keyup xảy ra (tức là người dùng nhập dữ liệu vào input). Và khi người dùng cố gắng đóng trình duyệt hoặc click vào link để chuyển trang, thì sự kiện window.onbeforeunload sẽ được thực thi. Bên trong sự kiện này, chúng ta sẽ kiểm tra xem biến showConfirm có giá trị là true hay không. Nếu là true, thì chúng ta sẽ hiển thị pop up yêu cầu người dùng xác nhận.

Mình mong là qua bài viết này, các bạn sẽ có thể có thêm kinh nghiệm trong việc sử dụng jQuery nói chung cũng như sự kiện window.onbeforeunload nói riêng.

Tags: Confirm , jQuery

Hướng dẫn cách tạo Confirm Navigation bằng jQuery

Hướng dẫn cách tạo Confirm Navigation bằng jQuery Đăng ngày 21-08-2014  Confirm Navigation là một pop up xuất hiện mỗi khi người dùng nhấn vào link nào đó để chuyển hướng. Nó giúp người dùng xác nhận là có thật sự muốn chuyển hướng đến link không, hay chỉ là vô tình click vào. Chức năng này chúng ta có thể bắt gặp mỗi khi post bài trong WordPress và vô tình nhấn vào link nào đó khi chúng ta đang viết bài. 1.6666666666667/10 2653

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn