• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo hiệu ứng accordion sử dụng jQuery

0
17/10/2010

jQuery rất hữu ích trong thiết kế web. Các plugin jQuery ngày càng được ưa chuộng nhờ những tính năng hiệu ứng nổi bật của chúng.


Hiệu ứng accordion là một kiểu hiệu ứng khá đẹp mắt cho phép ẩn hiện nội dung web một cách chuyên nghiệp.

Xem Demo.

Bạn có thể áp dụng hiệu ứng này cho website của mình theo hướng dẫn dưới đây:
Chèn đoạn code dưới đây vào giữa phần <head> … </head> của trang HTML.


<script type="text/javascript" src="/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

Bạn nên tải về file jquery.js và file arrow-square.gif rồi thiết lập URL cho đúng. Ngoài ra bạn có thể chỉnh độ rộng (width) phù hợp với yêu cầu website của bạn.

Kế đến bạn thiết kế nội dung hiệu ứng theo như bên dưới và đặt vào phần thân của trang HTML, giữa 2 thẻ <body> … </body>.

<div class="accordion">
<h3>Sample Heading 1</h3>
<p>This is a demo content for Sample Heading 1. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 2</h3>
<p> This is a demo content for Sample Heading 2. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 3</h3>
<p> This is a demo content for Sample Heading 3. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 4</h3>
<p> This is a demo content for Sample Heading 4. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
<h3> Sample Heading 5</h3>
<p> This is a demo content for Sample Heading 5. You should replace it with your own customized content. You can add as many sample headings with their corresponding content as you like.</p>
</div>

Nằm giữa 2 thẻ <h3>, </h3> là phần tiêu đề. Nằm giữa 2 thẻ <p>, </p> là phần nội dung tương ứng cho tiêu đề. Bạn có thể thêm tiêu đề và nội dung tương ứng tùy thích.

Hiệu ứng này có thể áp dụng cho Blogger. Chỉ cần đặt toàn bộ 2 phần code nêu trên vào một tiện ích HTML là xong.

Hiệu ứng tham khảo theo Webdesignerwall.

{0 bình luậnAdd yours ?}

Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn