知问前端--折叠菜单UI

知问前端

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

一、使用accordion

使用accordion比较简单，但需要按照指定的规范即可。
HTML部分：

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

结合选显卡之后的HTML代码为：

<div id="main">
    <div class="main_left">
        <div id="tabs">
            <ul>
                <li><a href="tab1.html">tab1</a></li>
                <li><a href="tab2.html">tab2</a></li>
                <li><a href="tab3.html">tab3</a></li>
            </ul>
        </div>
    </div>
    <div class="main_right">
        <div id="accordion">
            <h3>菜单1</h3>
            <div><p>内容1</p><p>内容1</p></div>
            <h3>菜单2</h3>
            <div>内容2</div>
            <h3>菜单3</h3>
            <div>内容3</div>
        </div>
    </div>
</div>

如何使用呢？只须jQuery代码：$("#accordion").accordion()即可。

二、修改accordion样式

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

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

对上面加上选显卡之后的HTML内容的css修饰，style.css 如下：

#main {
    margin: 0 auto;
    padding: 10px 0 0 0;
    width: 800px;
}
#main .main_left {
    width: 580px;
    float: left;
}
#main .main_right {
    width: 200px;
    float: right;
}
#tabs {
    border: none;
}
#ui-id-6, #ui-id-8, #ui-id-10 {
    border: 1px solid #ccc;
    border-top: none;
    position: relative;
    top: -2px;
}

三、accordion()方法的属性

折叠菜单的方法有两种形式：

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

accordion外观选项

jQuery测试代码：

$('#tabs').tabs();
$("#accordion").accordion({
    collapsible : true,
    //disabled : true,
    //event : "mouseover",
    //active : 1,
    active : true,
    //heightStyle : "auto",
    heightStyle : "content",
    //heightStyle : "fill",
    header : "h3",
    icons: {
        "header": "ui-icon-plus",
        "activeHeader": "ui-icon-minus",
    }
});

四、accordion()方法的事件

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

jQuery测试代码：

$('#tabs').tabs();
$("#accordion").accordion({
    heightStyle : "content",
    header : "h3",
    icons: {
        "header": "ui-icon-plus",
        "activeHeader": "ui-icon-minus",
    },
    create : function(event, ui) {
        alert("create");
        alert($(ui.header.get()).html());
        alert($(ui.panel.get()).html());
    },
    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 : function(event, ui) {
        alert($(ui.oldHeader.get()).html());
        alert($(ui.oldPanel.get()).html());
        alert($(ui.newHeader.get()).html());
        alert($(ui.newPanel.get()).html());
    }   
});

accordion('action', param)方法

仅测试如下方法：

$('#tabs').tabs();
$("#accordion").accordion({
    heightStyle : "content",
    header : "h3",
    icons: {
        "header": "ui-icon-plus",
        "activeHeader": "ui-icon-minus",
    }
});
$("#accordion").accordion("disable"); //禁用折叠菜单
$("#accordion").accordion("enable"); //启用折叠菜单
alert($("#accordion").accordion("option", "active")); //0
$("#accordion").accordion("option", "active", 1);

五、accordion中使用on()

在accordion的事件中，提供了使用on()方法处理的事件方法。
on()方法触发的选项卡事件

如，jQuery代码：

$("#accordion").on("accordionactivate", function(event, ui) {
    alert($(ui.oldHeader.get()).html());
    alert($(ui.oldPanel.get()).html());
    alert($(ui.newHeader.get()).html());
    alert($(ui.newPanel.get()).html());
});