首页 > 代码库 > 第一百八十九节,jQueryUI,折叠菜单 UI

第一百八十九节,jQueryUI,折叠菜单 UI

jQueryUI,折叠菜单 UI

 

学习要点:

  1.使用 accordion

  2.修改 accordion 样式

  3.accordion()方法的属性

  4.accordion()方法的事件

  5.accordion 中使用 on

 

折叠菜单(accordion),和选项卡一样也是一种在同一个页面上切换不同内容的功能 UI。它和选项卡的使用几乎没有什么太大区别,只是显示的效果有所差异罢了。

 

一.使用 accordion

使用 accordion 比较简单,但需要按照指定的规范即可。

HTML 部分

<div id="accordion">
    <h1>菜单 1</h1>
    <div>内容 1</div>
    <h1>菜单 2</h1>
    <div>内容 2</div>
    <h1>菜单 3</h1>
    <div>内容 3</div>
</div>

jQuery 部分

accordion()方法,让符合要求的区块执行折叠菜单方法

$(‘#accordion‘).accordion();

 

二.修改 accordion 样式

在显示的 accordion 折叠菜单中,在火狐浏览器中打开 Firebug 或者右击->查看元素。这 样,我们可以看看 accordion 的样式,根据样式进行修改。我们为了和网站主题符合,对 accordion 的标题背景进行修改。

//无须修改 ui 里的 CSS,直接用 style.css 替代掉
.ui-widget-header {
    background:url(../img/ui_header_bg.png);
}

 

三.accordion()方法的属性

选项卡方法有两种形式:1.accordion(options),options 是以对象键值对的形式传参,每 个键值对表示一个选项;2.accordion(‘action‘, param),action 是操作选项卡方法的字符串, param 则是 options 的某个选项。

accordion 外观选项

技术分享

collapsible false/布尔值 当设置为 true 是,允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容。

    $(‘#accordion‘).accordion({
        collapsible:true        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
    });

 


disabled 无/布尔值 默认为 false,设置为 true 则禁用折叠菜单。禁止后菜单无法折叠

    $(‘#accordion‘).accordion({
        collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        disabled:true            //禁止后菜单无法折叠
    });

 


event click/字符串 触发 accordion 的事件类型,默认为 click。可以设置 mouseover 等其他鼠标事件。设置什么事件触发折叠

    $(‘#accordion‘).accordion({
        collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        // disabled:true,            //禁止后菜单无法折叠
        event:‘mouseover‘       //设置什么事件触发折叠
    });

 


active 数组和布尔值如果是数组,初始化时默认显示哪个 tab,默认值为 0。如果是布尔值,那么默认是否折叠。条件必须是 collapsible 值为 true。

    $(‘#accordion‘).accordion({
        collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        // disabled:true,            //禁止后菜单无法折叠
        event:‘mouseover‘,       //设置什么事件触发折叠
        active:true
    });

 

 

heightStyle content/字符串默认为 auto,即自动根据最高的那个为基准,fill 则是填充一定的可用高度,content 则是根据内容伸展高度。

    $(‘#accordion‘).accordion({
        // collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        // disabled:true,            //禁止后菜单无法折叠
        // event:‘mouseover‘,       //设置什么事件触发折叠
        // active:true,
        heightStyle:‘content‘       //折叠高度设置
    });

 


header h1/字符串 设置折叠菜单的标题标签。

    $(‘#accordion‘).accordion({
        // collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        // disabled:true,            //禁止后菜单无法折叠
        // event:‘mouseover‘,       //设置什么事件触发折叠
        // active:true,
        // heightStyle:‘content‘       //折叠高度设置
        header:‘h3‘                 //设置折叠菜单的标题标签,如设置成h3,在html里也要对应
    });

 

 

icons 默认图标 设置想要的图标。

    $(‘#accordion‘).accordion({
        // collapsible:true,        //允许菜单折叠对应的内容。默认值为 false,不会关闭对应内容
        // disabled:true,            //禁止后菜单无法折叠
        // event:‘mouseover‘,       //设置什么事件触发折叠
        // active:true,
        // heightStyle:‘content‘       //折叠高度设置
        // header:‘h3‘                 //设置折叠菜单的标题标签,如设置成h3,在html里也要对应
        icons: {
            "header": "ui-icon-plus",           //折叠时图标
            "activeHeader": "ui-icon-minus"     //设置展开时图标
        }
    });

 

 

三.accordion()方法的事件

除了属性设置外,accordion()方法也提供了大量的事件。这些事件可以给各种不同状态 时提供回调函数。

 

accordion 事件选项

技术分享

技术分享

create 当创建一个折叠菜单时激活此事件。
该方法有两个参数(event, ui),ui 参数有两个子属性 headerpanel,得到当前标题和内容选项的对象。

    $(‘#accordion‘).accordion({
        create: function (event, ui) {    //当创建一个折叠菜单时激活此事件。
            alert($(ui.header.get()).html()); //的到当前展开的菜单标题对象
            alert($(ui.panel.get()).html());  //的到当前展开的菜单内容对象
        }
    });

 


activate 当切换一个折叠菜单时,启动此事件。
该方法有两个参数(event, ui),ui 参数有四个子属性 newHeadernewPaneloldHeaderoldPanel。分别得到的时候新 header 对象、
新内容对象、旧 header 对象和旧内容对象。

    $(‘#accordion‘).accordion({
        activate: function (event, ui) {    //当切换一个折叠菜单时,启动此事件
            alert($(ui.oldHeader.get()).html()); //获取上一个展开菜单的标题对象
            alert($(ui.oldPanel.get()).html());  //获取上一个展开菜单的内容对象
            alert($(ui.newHeader.get()).html()); //获取当前要展开的标题对象
            alert($(ui.newPanel.get()).html());  //获取当前要展开的内容对象
        }
    });

 

beforeActivate 当切换一个折叠菜单之前,启动此事件。
该方法有两个参数 (event, ui),ui 参数 有四 个子属 性 newHeadernewPaneloldHeaderoldPanel。分别得到的时候新 header对象、新内容对象、旧 header 对象和旧内容对象。

    $(‘#accordion‘).accordion({
        beforeActivate: function (event, ui) {    //当切换一个折叠菜单之前,启动此事件
            alert($(ui.oldHeader.get()).html()); //获取上一个展开菜单的标题对象
            alert($(ui.oldPanel.get()).html());  //获取上一个展开菜单的内容对象
            alert($(ui.newHeader.get()).html()); //获取当前要展开的标题对象
            alert($(ui.newPanel.get()).html());  //获取当前要展开的内容对象
        }
    });

 

第一百八十九节,jQueryUI,折叠菜单 UI