Cara menggunakan Basic Accordion Jquery EasyUI

Hallo teman – teman jumpa lagi di artikel Source Code Aplikasi  di artikel kali ini saya akan membahas mengenai cara bermain Jquery EasyUI yaitu cara pemakaian basic accordion. Jadi kita di sini akan merancang fitur layak nya drop down navigasi seperti di bootstrap. Bagi merancang fitur accordion sesungguhnya banyak cara namun di sini saya akan mempraktikkan menggunakan jquery EasyUI.



Oke bagi langkah awal silahkan teman – teman bukak dulu blog jquery easyUI lalu teman – teman unduh terlebih dahulu jquery EasyUI-nya. kalau telah silahkan teman – teman ekstract file hasil unduh tadi, oke kalau telah silahkan


buka text editornya dan bikin file seperti dibawah ini:



    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=UTF-8>
        <title>Basic Accordion - jQuery EasyUI Demo</title>
        <link rel=stylesheet type=text/css href=themes/default/easyui.css>
        <link rel=stylesheet type=text/css href=themes/icon.css>
        <link rel=stylesheet type=text/css href=demo.css>
        <script type=text/javascript src=jquery.min.js></script><br>        <script type=text/javascript src=jquery.easyui.min.js></script>
        
        <h2>Basic Accordion</h2>
        <p>Click on panel header to show its content.</p>
        <div style=margin:20px 0 10px 0;></div>
        <div class=easyui-accordion style=width:500px;height:300px;>
            <div title=Cara menggunakan Basic Accordion Jquery EasyUI data-options=iconCls:'icon-ok' style=overflow:auto;padding:10px;>
                <h3 style=color:#0099FF;>Accordion for jQuery</h3>
                <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
            </div>
            <div title=Cara menggunakan Basic Accordion Jquery EasyUI data-options=iconCls:'icon-help' style=padding:10px;>
                <p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>         
            </div>
            <div title=Cara menggunakan Basic Accordion Jquery EasyUI data-options=iconCls:'icon-search' style=padding:10px;>
                <ul class=easyui-tree>
                    <li>
                        <span>Foods</span>
                        <ul>
                            <li>
                                <span>Fruits</span>
                                <ul>
                                    <li>apple</li>
                                    <li>orange</li>
                                </ul>
                            </li>
                            <li>
                                <span>Vegetables</span>
                                <ul>
                                    <li>tomato</li>
                                    <li>carrot</li>
                                    <li>cabbage</li>
                                    <li>potato</li>
                                    <li>lettuce</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    </html>


kalau telah silahkan save dan jalan di browsernya, kurang lebih hasilnya akan seperti di bawah ini :



pada



Dari gambar di atas user di suruh Klik di panel header bagi menampilkan isinya. Oke lumayan gampang bukan.




Sumber https://kursuswebsite.org

Popular posts from this blog

Perbedaan Antara Keyup dan Keydown Pada jQuery

Even di javascript adalah sebuah suatu yang terjadi di element tertentu, maksudnya yaitu suatu respon atau aksi yang di lakukan oleh user dimana kegiatan tersebut akan memicu jalannya script javascript yang terdapat di blog tersebut. Di javascript terdapat banyak event namun di pembahasan kali ini kita akan membahas mengenai Perbedaan Antara Keyup dan Keydown Di jQuery, Keyup adalah sebuah event yang akan di jalankan ketika tombol dilepaskan di di keyboard, dan sedangkan Keydown adalah sebuah event ketika tombol ditekan di keyboard.
Read more

Membuat Table Warna Berselang dengan PHP

Image
Selamat datang di blog Source Code Aplikasi, masih dengan File yang kemarin, tapi sekarang ini kita akan menggunakan Framework Bootstrap dan Membangun Table Warna Berselang dengan PHP, jadi jangan lupa yang kemarin praktekin dulu yah teman teman link nya yang ini . oka seketika saja kita praktekan.
Read more