zoukankan      html  css  js  c++  java
  • Easyui入门视频教程 第07集---Accordion的使用

    Accordion 是一个 收缩的组件

    类似挂历的

    百度了一下

    意思是

    accordion 英[əˈkɔ:diən]
     美[əˈkɔrdiən]
    
    
    n. 手风琴 
    adj. 可折叠的 

    他就是 一个折叠的 很适合 做菜单

    使用方法

    <div id="aa" class="easyui-accordion" style="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>   
    </div>

    这样 就是一个大的div 的accordion 里面有三个 可折叠的 panel

    我们 可以在某个panel 中去加载 一个 别的 页面

    var pp = $('#aa').accordion('getSelected'); // get the selected panel     
    
    2 if (pp){     
    
    3     pp.panel('refresh','new_content.aspx');  // call 'refresh' method to load new content     
    
    4 }  

    这样 每次 以选择 某个页面 就会 去 加载某个独立的页面'new_content.aspx' 的 内容 显示出来

    在 chm文档中的 Container Options

    表示 是 容器的一些属性

    Name Type Description Default
    width number The width of accordion container. auto
    height number The height of accordion container. auto
    fit boolean Set to true to set the accordion container size fit it's parent container. false
    border boolean Defines if to show the border. true
    animate boolean Defines if to show animation effect when expand or collapse panel. true



    其中 animate 属性 表示 是否 显示 画册效果

    当然 我们 也可以 动态的 通过 js 添加 属性

    $('#aa').accordion('add', {
            title: 'New Title',
            content: 'New Content',
            selected: false
    });

    下载地址

    http://pan.baidu.com/s/1eQ3hhgY

  • 相关阅读:
    Python学习————作业
    Python学习————前端
    Python学习————前端(JS)
    Python————前端
    Python学习————作业(简单页面设计)
    Python学习————前端(注册)
    Python学习————表格与表单
    Python学习————作业(前端)
    Python学习————前端
    51Nod1307 绳子与重物
  • 原文地址:https://www.cnblogs.com/maijin/p/3489971.html
Copyright © 2011-2022 走看看