Biggerlink với target _blank
Một vài config đơn giản hiệu chỉnh link có target=”_blank” cho thành phần.
Biggerlink mở target blank
Nếu chỉ khai báo $(‘.blockList’).biggerlink(); thì chúng ta không thể sử dụng thêm để xử lý mở tab window mới, ta cần viết thêm một đoạn js mở tab mới khi thành phần khối được click.
Trình duyệt
6
3
9
9
3
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script src="https://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script> <script src="https://hocwebchuan.com/example/js/biggerlink.js"></script> <script> //Đây là đoạn gọi function .biggerlink() $(function(){ $('.blockList a[target="_blank"]').click(function(){ window.open(this.href); return false; }); $('.blockList').biggerlink(); }); </script> <style> * { /* reset lại margin và padding cho các tag */ margin: 0; padding: 0; } .blockList { width:280px; padding:10px; border:1px solid #CCC; } /*Đây là class được biggerlink.js thêm vào dành để điều khiển hover*/ .bl-hover { background: #CFF; } .blockList a { color:#f00; text-decoration:none; } </style> </head> <body> <div class="blockList"> <h3><a href="https://hocwebchuan.com" target="_blank">Biggerlink blank</a></h3> <p>Nội dung của thành phần khối, nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài nội dung này sẽ xuống hàng khi gặp giới hạn chiều rộng của thẻ bao ngoài.</p> </div> </body> </html>
Hiển thị trình duyệt:
Click vào thành phần khối trên để thấy kết quả
Tham khảo thêm tại: biggerlink