easyui 03 accordion分類

weixin_34321977發表於2016-11-06
UI
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 引入easyui -->
<link rel="stylesheet" href="easyui/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="easyui/themes/default/easyui.css"
    type="text/css"></link>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>

    <div id="aa" class="easyui-accordion"
        style="width: 300px; height: 200px;">
        <div title="Title1" data-options="iconCls:'icon-save'"
            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="Title2" data-options="iconCls:'icon-reload',selected:true"
            style="padding: 10px;">content2</div>

        <div title="Title3">
            content3
        </div>
        
        <input type="button" onclick="add()" value="新增新皮膚"/>
    </div>
    
    
    
    <script type="text/javascript">
        $(function(){           
            /* 新新增一個新皮膚後觸發 */
            $("#aa").accordion({
                onAdd:function(title,index){
                    alert(title+" and "+index)
                }
            });
            
            
            /* 選擇一個新皮膚後觸發 */
            $("#aa").accordion({
                onSelect:function(title,index){
                    /* 再呼叫容器的options方法 */
                    var options = $("#aa").accordion('options');
                    alert("options.fit："+options.fit+ " options.animate：" +options.animate)
                }
            });
            
        })
        
        /* 這是不段javascript程式碼，請放在jquery初始方法外 */
        function add(){
            $("#aa").accordion('add',{
                title: '新標題',
                content: '新內容',
                selected: false
            });
        }
    </script>
</body>

</html>
1901769-3f25905876e85ffd.png
Paste_Image.png
1901769-d04192175e830cda.png
Paste_Image.png
1901769-a17b5956a005cf4f.gif
accordion.gif

相關文章