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

  • 相关阅读:
    对于使用secureFX上传文件到centos7 的时候,以及不同的用户解压文件,对于文件操作权限的实验
    搭建分布式hadoop环境的前期准备---需要检查的几个点
    mvc EF
    查询数据库的相关信息
    SQL中PIVOT 行列转换
    sql server 取日期
    c# 类型拷贝
    EF没有同步更新(转)
    怎么计算两个经纬度之间的距离.
    简单日志记录
  • 原文地址:https://www.cnblogs.com/maijin/p/3489971.html
Copyright © 2011-2022 走看看