Tạo Khung Accordion với jQuery


jQuery
Dạo qua nhiều blog, chắc hẳn các bạn đều đã từng thấy tab-widget thường hay được sử dụng trên Blogger. Nếu đã cảm thấy nhàm chán với loại tab-widget ấy, thì hôm nay mình xin giới thiệu đến các bạn một loại widget mới có tên Accordion.
Accordion
Widget Accordion là một dạng box-widget có khả năng trượt Hiện/Ẩn khi click chuột. Được viết trên nền jQuery , Accordion sẽ hoạt động khá 1 mượt khi sử dụng thay vì đơn giản như các loại widget thông thường.

Lúc trước, template của Blog Tin Học đã từng cài widget này, nhưng do cảm thấy vị trí phân bố không thích hợp nên đành gỡ bỏ. Nếu bạn cảm thấy ưng ý với Accordion, hãy thực hiện các bước sau để tạo widget này cho Blog mình nhé :
  1. Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
  2. Thêm đoạn code bên dưới vào ngay trên thẻ </head>
    <script src='http://code.jquery.com/jquery.js' type='text/javascript'/>
    <style type='text/css'>

    /* Main accordion container */
    .accordion{
    width:500px;
    }

    /* accordion content div, default display is hidden */
    .accContent{
    display:none;
    border:1px solid #CCCCCC;
    padding:3px;
    }

    /* Title links (clickable to show their content and hide others) */
    .acctitle{
    display:block;
    width:100%;
    padding:3px 3px 3px 3px;
    background-color:#CC0000;
    color:#FFFFFF;
    cursor:pointer
    }

    /* Default accordion class (usually first one so it is always visible) */
    .defaultAccordion{
    display:block;

    }
    </style>
  3. Thêm đoạn code bên dưới vào ngay dưới thẻ </head>
    <script type='text/javascript'>
    $(function(){
        // loop though each link
        $(&quot;a.acctitle&quot;).each(function(){
            // add an event on click
            $(this).click(function(){
                // hide all div&#39;s with accContent class
                $(&quot;.accContent&quot;).each(function(){
                    $(this).hide(&quot;slow&quot;);
                });

                // the main point of this script - Fetch ref attribute of
                // title link and display the hidden div with that id
                $(&quot;#&quot;+$(this).attr(&quot;ref&quot;)).show(&quot;slow&quot;);
                    return;
                  });
        });
    });
    </script>
  4. Save lại template, rồi chuyển sang tab Phần tử trang (Page Elements) . Tạo một widget HTML/Javascript với nội dung như sau :
    <div class="accordion">
        <a ref="first_section" class="acctitle">First Section (đây là title)</a>
        <div id="first_section" class="accContent defaultAccordion">
        <p>First Accordion Section (đây là content)</p>
        </div>

        <a ref="second_section" class="acctitle">Second hidden Section</a>
        <div id="second_section" class="accContent">
            <p>2nd Accordion Section</p>
        </div>

        <a ref="third_section" class="acctitle">Third Hidden Section</a>
        <div id="third_section" class="accContent">
            <p>Last Accordion Section</p>
        </div>
    </div>
  5. Hiệu chỉnh nội dung widget trên theo ý thích rồi save lại template.
Hiệu chỉnh Accordion
- Đầu tiên, bạn cần thay những vùng text được tô màu đỏ thành những nội dung từ Blog bạn.
- Bạn lưu ý thứ tự của các section trong 2 mục ref=id= phải giống nhau.
- Ngoài ra , bạn còn có thể hiệu chỉnh các thông số của code màu lục để khung Accordion mang dáng vẻ phù hợp với Blog của bạn.
- Cuối cùng, để thêm section khác cho khung Accordion, bạn chỉ việc copy đoạn code tương ứng, tăng thứ tự của section trong 2 mục ref=id= và tinh chỉnh vùng text được tô màu đỏ .

P/s : Nếu còn thắc mắc, hãy để lại comment cho mình. Mình sẽ cố gắng trả lời nhanh nhất. Hy vọng bạn thích thủ thuật này. Chúc thành công !

15 Nhận xét on "Tạo Khung Accordion với jQuery"

NAD on 19 August 2009 at 16:25 said...

Bóc tem bài mới :D

Pika Rock on 19 August 2009 at 23:38 said...

hồi trước mình cũng phát hiện blog boypro cũng cài cái nài dồi ;)) hay phết

Anonymous said...

hay lam

Anonymous said...

hay lam

Anonymous said...

hay lam

vietutd on 25 August 2009 at 09:45 said...

Hiện tại bên www.vietutd.com vừa khai trương chương trình đặt banner miễn phí cho các blogspot được truy xuất, xin thông báo với các admin, nếu các bạn quan tâm, có thể tìm hiểu thêm ..::Tại đây::..
Message này nhắn chung cho các bạn, các bạn không cần phản hồi lại. Xin cảm ơn

anh3ngơ on 21 September 2009 at 00:14 said...

bạn boypro có thêm trang demo thì tuyệt hơn nhiều đó pro à

phuonganh on 25 November 2009 at 01:19 said...

Thêm đoạn code vào ngay dưới thẻ heatd
ngay trên thẻ head
cho minh xin hoi la cho nao? sao minh them ko duoc jium chi minh voi nha

Leosir.Do on 25 March 2010 at 09:45 said...

Mình tạo được rồi nhưng của mình nó dài hơn so với trang bạn chỉ rõ cho mình xin với. Có lẽ nó dài quá. Thanks

VnTim™ on 4 November 2010 at 00:58 said...

hay that
ve thu lam cai nhi

Admin BantinForex.net on 25 January 2011 at 09:09 said...

Thanks
www.bantinforex.net

plap on 30 May 2011 at 09:20 said...

http://nhac12h.com nghe nhac xem clip
nhac12h.com nghe nhac xem clip

Anonymous said...

hay lém

HOÀI TRUNG CAO on 18 March 2012 at 22:14 said...

hay qua

Phần mềm ERP on 18 March 2012 at 22:16 said...

Cám ơn bạn, bài viết hay lém

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3