Diễn đàn Hỏi Đáp - BuaXua.vn
Hôm nay, 21/04/2014 - 06:27

Múi giờ UTC + 7 Giờ

Joomla! Pro Support

Joomla! Pro Support

Hỗ trợ thiết kế web, cài đặt và sử dụng Joomla!
Thực hiện tất cả các dịch vụ web.

Xem thông tin chi tiết>>

Nội quy chuyên mục


Các bài viết sẽ bị xóa mà không cần thông báo nếu vi phạm một trong các qui định sau:
1. Tiêu đề không rõ ràng, trùng lắp, không dấu tiếng Việt, viết hoa toàn bộ, kèm theo địa chỉ web, kèm theo thông tin quảng cáo.
2. Nội dung vi phạm Qui định của Diễn đàn.
3. Nội dung quảng cáo dưới mọi hình thức (có liên kết, text-link, back-link, thông tin liên hệ,...)
4. Bài viết không dấu, sai lỗi chính tả, nội dung lập đi lập lại, được viết hoa toàn bộ.
5. Bài viết vi phạm bản quyền hoặc không ghi rõ nguồn gốc khi đăng lại từ nơi khác.
Thành viên nào quảng cáo trong chuyên mục này sẽ bị cấm vĩnh viễn và xóa toàn bộ bài viết trên Diễn đàn.



Tạo chủ đề mới Gửi bài trả lời  [ 1 bài viết ] 
Người gửi Nội dung
intelprotin4
 Tiêu đề bài viết: Accordion with CSS3
Gửi bàiĐã gửi: 25/03/2013 - 10:44 
Ngoại tuyến
Thành viên mới
Thành viên mới

Ngày tham gia: 29/01/2013 - 14:57
Bài viết: 1
Đã cảm ơn: 0 lần
Được cảm ơn: 0 lần
Css3,Html5 đang là công cụ thiết kế web mới việc phát triển của nó giúp cho việc thiết kế web dễ dàng và tạo nhiều tiện ích cho người dùng hơn. Ngày hôm nay mình xin cung cấp cho các ban 1 bài viết khá hay về Acoordion với Css3. Bài viết này mình có đọc và tìm hiểu ở izweb các bạn cùng tham khảo nha

jQuery Accordion

Mã:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Accordion with CSS3</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="css/reset.css" media="all">
</head>
<body>
    <div id="wrapper">
        <div class="container">
            <article id="accordion-content">
                <div>
                    <input id="accordion-1" name="accordion" type="radio" checked />
                    <label for="accordion-1">Home</label>
                    <section class="tab">
                        <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                        </p>
                    </section>
                </div>
 
                <div>
                    <input id="accordion-2" name="accordion" type="radio"/>
                    <label for="accordion-2">About us</label>
                    <section class="tab">
                        <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                        </p>
                    </section>
                </div>
 
                <div>
                    <input id="accordion-3" name="accordion" type="radio"/>
                    <label for="accordion-3">FAQs</label>
                    <section class="tab">
                        <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                        </p>
                    </section>
                </div>
 
                <div>
                    <input id="accordion-4" name="accordion" type="radio"/>
                    <label for="accordion-4">Contact us</label>
                    <section class="tab">
                        <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
                        </p>
                    </section>
                </div>
        </article><!-- End #accordion-content -->
        </div><!-- End .container -->
 
        <a href="index2.php" class="demo">Demo 2</a>
    </div><!-- End #wrapper -->
</body>
</html>


Select Radio là loại select chỉ có thể chọn 1 cái duy nhất và select checkbox là loại select có thể chọn nhiều cái cùng một lúc và có thể click lại để bỏ chọn, trong bài này mình sẽ sử dụng chúng để select đến từng tab trong Accordion.

Mã:
<input id="accordion-1" name="accordion" type="radio" checked />
<input id="accordion-1" name="accordion" type="checkbox" checked />


Tất cả thẻ input của mình có name là accordion, mỗi thẻ input có một id khác nhau để khi người dùng click đến tab nào thì thông tin của tab đó sẽ hiển thị ra và id của thẻ input này cũng chính là cầu nối giữa thẻ input và thẻ label.

Demo thứ 1 mình làm type là radio có nghĩa là chỉ xem được một tab và khi mở tab khác thì tab này sẽ đóng lại.

Demo thứ 2 mình làm type là checkbox có nghĩa là bạn có thể mở được nhiều tab cùng 1 lúc và bạn có thể click lại tab đó để đóng nó lại.

Thuộc tính “Checked” ở trên có nghĩa là khi người dùng vào lần đầu tiên thì nó sẽ mở cái tab đó, phần nội dung chính của mình sẽ nằm trong cặp thẻ section. Nếu các bạn áp dụng vào một trang web nào đó thì bạn cần nên làm đúng như cấu trúc trong đoạn HTML trên thì nó mới hoạt động được và bạn chỉ có thể thay thế phần nội dung của mình trong thẻ section và style CSS lại cho nó.

Nếu bạn dùng vòng lặp while để lấy dữ liệu từ MYSQL ra, khi xuất cái đoạn code này trong vòng lặp, chắc có một số bạn sẽ hỏi là trong id của thẻ input và cái for trong thẻ label nó có các số đấy thì mình sẽ xử lý nó như thế nào cho đúng với cấu trúc HTML ban đầu thì các bạn làm như sau.

Mã:
<?php
 
     $db = mysqli_connect("localhost","root","","db");
     $i = 1;
     $query = "SELECT * FROM table_noidung";
     $result = mysqli_query($db,$query);
    while($row=mysqli_fetch_array($result)) {
        $content = $row['content'];
            $title = $row['title'];
?>
     <div>
          <input id="accordion-<?php echo $i; ?>" name="accordion" type="radio" <?php if($i==1) echo 'checked';?> />
      <label for="accordion-<?php echo $i; ?>"><?php echo $title; ?></label>
        <section class="tab">
           <p>
            <?php echo $content; ?>
           </p>
        </section>
     </div>
 
<?php
    $i++;
} // End while
 
?>


Đoạn trên mình sẽ khai báo một biến $i=1, sau đó các bạn dùng vòng lặp while để lấy dữ liệu, khi bạn echo đoạn HTML ra thì cái số ở thẻ input và label các bạn thay biến $i vào đó. Biến $id sẽ chạy từ 1 là cho cái input đầu tiên và cứ mỗi lần lặp nó sẽ tăng $i lên 1 …Nếu $i =1 thì mình sẽ cho nó checked.

STEP 2 – SETUP CSS

Mã:
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/BebasNeue-webfont.eot');
    src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BebasNeue-webfont.woff') format('woff'),
         url('../fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}
 
a{
    color: #333;
    text-decoration: none;
}
 
a.demo {
    text-align: center;
    border: 1px solid #d4d4d4;
    background: #C6E1EC;
    padding: 5px 10px;
    margin-top: 20px;
    margin-left: 45%;
}
 
#wrapper {
    width: 1000px;
    margin: 0 auto;
}
 
.container {
    width: 450px;
    margin: 10px auto 30px auto;
    text-align: left;
}
 
#accordion-content label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 2px 2px rgba(0,0,0,0.1);
}
 
#accordion-content label:hover{
    background: #fff;
}
#accordion-content input:checked + label,
#accordion-content input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}
#accordion-content label:hover:after,
#accordion-content input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center; 
}
#accordion-content input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}
#accordion-content input{
    display: none;
}
#accordion-content section{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
 
#accordion-content section p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
 
#accordion-content section ul {
    padding: 15px 20px;
}
 
#accordion-content section ul li {
    list-style: none;
    font-size: 14px;
    margin-bottom: 10px;
    background: url(../images/recent_li_bg.gif) no-repeat left center;
    padding-left: 15px;
}
 
#accordion-content section ul li a {
    color: #ac0202;
}
 
#accordion-content section ul li a:hover {
    color: #888;
}
 
#accordion-content input:checked ~ section{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
 
#accordion-content input:checked ~ section.tab{
    height: 140px;
}


Mình giải thích những đoạn quan trọng trong đoạn CSS trên.

Mã:
input:checked + label


Dấu ” + ” trong CSS có nghĩa là chọn thẻ con đầu tiên ngay sau thẻ mẹ.

Mã:
input:checked ~ section


Dấu ” ~ ” trong CSS có nghĩa là chọn tất cả thẻ con ngay sau thẻ mẹ.

Các bạn lưu ý là thẻ input trong HTML của mình chỉ làm nhiệm vụ là check select tab thôi nhé, nên mình đã display: none;

Mã:
#accordion-content input:checked + label,
#accordion-content input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3), 0px 2px 2px rgba(0,0,0,0.1);
}


Khi thẻ input được chọn và người dùng di chuột qua thẻ label thì mình sẽ sét background cho thẻ label như trên.

Mã:
#accordion-content label:hover:after,
#accordion-content input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center; 
}
#accordion-content input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}

#accordion-content input:checked + label:hover:after{
    background-image: url(../images/arrow_up.png);
}


Thuộc tính after trong CSS có nghĩa là thêm nội dung phía sau thành phần, khi người dùng di chuột qua mình sẽ thêm cái dấu mũi tên vào ngay góc tay phải, lưu ý là bạn phải sét position: relative cho thẻ label rồi bạn mới sử dụng absolute được nhé.

Mã:
#accordion-content input:checked ~ section{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
 
#accordion-content input:checked ~ section.tab{
    height: 140px;
}


Khi input được chọn thì mình sẽ show nội dung của nó nằm trong thẻ section ra trong khoảng thời gian là 0.5s, bắt buộc bạn phải sét height cho nó thì khi tab được chọn thì nó mới bắt đầu lấy height của tab đó và show ra.

Chúc các bạn thành công.


Sửa lần cuối bởi BuaXua vào ngày 25/03/2013 - 11:29 với 1 lần sửa trong tổng số.
Sửa lỗi định dạng bài viết và xóa backlink


Đầu trang
 Xem thông tin cá nhân  
 
Hiển thị những bài viết cách đây:  Sắp xếp theo  
Tạo chủ đề mới Gửi bài trả lời  [ 1 bài viết ] 

Các chủ đề liên quan


Múi giờ UTC + 7 Giờ


Bạn không thể tạo chủ đề mới trong chuyên mục này.
Bạn không thể trả lời bài viết trong chuyên mục này.
Bạn không thể sửa những bài viết của mình trong chuyên mục này.
Bạn không thể xoá những bài viết của mình trong chuyên mục này.
Bạn không thể gửi tập tin đính kèm trong chuyên mục này.

Chuyển đến: