Biggerlink với target _blank

Trở về

  • 1,162

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

  • Internet Explorer6
  • Firefox3
  • Opera9
  • Google Chrome9
  • Safari3

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ả

Download file để thực hành

Tham khảo thêm tại: biggerlink

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.