Hi, guest | Welcome to Blog webzonepslu | Register | Sign in
Advertise | Contact | About | Live Music | Donation | Sitemap

4 Jun 2012

Cara membuat jQuery UI Accordion CDN

. 4 Jun 2012

              Pada sempatan kali ini webzonepslu tulis sedikit tentang bagai mana cara membuat munu accordion seperti yang webzone terapkan pada blog ini. hasil dari secrip di bawah ini tampak pada menu yang berbackground hitam. anda hanya tinggal select all dan copas bagi yang ingin menampilkan menu seperti tampak di bawah scrip ini oke langsung aja .


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery UI Accordion CDN : Le Frog</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
<style type="text/css">
@import url("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/le-frog/jquery-ui.css");
</style>
</head>

<body>
<div id="jQueryUIAccordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>
<script type="text/javascript">
jQuery("#jQueryUIAccordion").accordion({
        event: "click",
        collapsible: false,
        autoHeight: true
    });
</script>
</body>
</html>






Share this Article now on :
ARTIKEL YANG BERHUBUNGAN :


1 komentar:

kodok mengatakan...

terimakasih

Pasang di blog sobat

Mau Tukar Link dengan saya? [ Copy/paste ] code HTML berikut ke blog anda"

webzonepslu

gambar akan tampak seperti di atas

Jika link blog tersebut sudah anda pasang di blog anda segera beri komentar / chatbox Saya usahakan secepatnya link blog anda juga segera saya pasang.Terimakasih

Unordered List

Posting

Posting Diterbitkan

Komentar

Komentar Diterbitkan

Statistik Blog
 
You Are The Best / Thank you visit