Biggerlink cơ bản

Khi cần những hover cả nguyên box, bao gồm những nội dung bên trong, chúng ta không thể sử dụng đơn giản bằng tag a bao ngoài được vì sẽ không còn tuân theo chuẩn W3C, để giải quyết việc này chúng ta dùng plugin Biggerlink.

Biggerlink

Biggerlink dùng để tạo vùng liên kết tràn đầy một thành phần block.
Chú ý là không nên tạo vùng liên kết bằng cách sử dụng tag <a> bao ngoài thành phần block vì nó không đúng chuẩn W3C.

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="http://hocwebchuan.com/example/js/jquery-1.8.3.min.js"></script>
<script src="http://hocwebchuan.com/example/js/biggerlink.js"></script>
<script>
//Đây là đoạn gọi function .biggerlink()
$(function(){
    $('.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="http://hocwebchuan.com">Biggerlink</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:

Chú ý: bắt buộc trong thành phần khối bắt buộc phải có thành phần liên kết <a>

Download file để thực hành

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

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *