easyui學習筆記6—基本的Accordion(手風琴)

本文轉載自查看原文 2014-01-21 20:09 4361 easyui學習筆記

手風琴也是web頁面中常見的一個控件，常常用在網站后台管理中，這里我們看看easyui中基本的手風琴設置。

1.先看看引用的資源

        <meta charset="UTF-8" />
        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/default/easyui.css" />
        <link rel="stylesheet" href="jquery-easyui-1.3.5/themes/icon.css" />
        <link rel="stylesheet" href="jquery-easyui-1.3.5/demo/demo.css" />
        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script>
        <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

注意到這里並沒有引用到其他的js只是兩個基本的，一個是jquery.min.js，一個是jquery.easyui.min.js。

2.再看看html代碼

    <body>
        <h2>Click on panel header to show its content.</h2>
        <div class="demo-info">
            <div class="demo-tip icon-tip"></div>
            <div>Click on panel header to show its content.</div>
        </div>
        <div style="margin:10px 0"></div>
        <div class="easyui-accordion" style="width:500px;height:300px;">
            <div title="About" 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="Help" data-options:"iconCls:'icon-help'" style="padding:10px">
                <p>The accordion allows you to provide multiple panels and display one 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="TreeMenu" 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>

說簡單點一個基本的手風琴就是一個包含內部嵌套div的有class="easyui-accordion"的div，每個嵌套的div里面包含想要的元素。這里注意嵌套的div的屬性title="About" data-options="iconCls:'icon-ok'" 這個就是定義每個格子的title和圖標的。

這里看到<ul class="easyui-tree">這個是定義樹形結構的，這是另外一個控件了。在后面的例子中。

總的來看還是很簡單的。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 easyui源碼翻譯1.32--accordion(手風琴) easyui學習筆記10—手風琴格子始終展開和多個格子展開 VUE實現Studio管理后台（五）：手風琴式折疊組件（Accordion） jQuery實現手風琴效果 jquery橫向手風琴效果 ionic2 手風琴效果 jquery實現簡單的手風琴效果基於el-tree的自定義側邊菜單欄（手風琴） 10個讓人印象深刻的 jQuery 手風琴效果應用純css3實現美化復選框和手風琴效果（詳細）