最近正在看Accordion Wight这个UI 插件,总结了一些重点,供大家参考
Accordion:
组成: Header + content panel
1. 在同一时间,只能打开一个content panel
2. 导入文件的顺序要规范,否则某些功能失效。
l Jquery library (jquery-x.x.x.js)
l Jquery.ui.core.js
l Jqeury.ui.widget.js等等
l 最后才是widget自己的库
3. 在headers 里的URL链接都是失效的
4. 属性:aria-expanded
用来控制显示和隐藏
5. Styling the accordion
补充:做圆角画图
l border-radius:CSS3属性之一
-webkit-border-radius:苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核;
-moz-border-radius:moz这个属性 主要是专门支持Mozilla Firefox 火狐浏览器的CSS属性。
l 以-webkit开头的Webkit浏览器特有扩展样式
与以-moz开头的Firefox特有扩展样式相同,以-webkit开头的样式是 Webkit浏览器特有的,只有Webkit浏览器可以解析。
比如,在Webkit浏览器中可以用 -webkit-border-radius实现圆角。
6. 看下一下文件的内容(有时间的前提下)
jquery-ui-1.8.21.custom.css
jquery.ui.accordion.js
jquery.ui.widget.js
jquery.ui.core.js
jquery-1.7.2.js
7. Configuring an accordion
参数解释:
Option | Default value | Used to |
|
active | 默认First child 第一个panel是展开的 | 在页面加载时,设置处于活动的panel,即设置默认展开哪个panel |
|
animated(动画的) | “slide”(滑动) | 设置打开panel的动画类型 |
|
autoHeight | true | 根据最大的限度,自动设置高度 |
|
clearstyle | false | 当打开一个panel后,清除它的height和overflow(溢出部分) |
|
collapsible(可折叠的) | false | 设置允许所有的panels可以同时关闭 |
|
disabled | false | 设置accordion widget是否可用 |
|
event | 默认是“click”,可为:mouseout, mouseover, hover, dblclick, keydown,…… | 给header添加事件来把panel打开 |
|
fillSpace | false | 设置container的高度,而不是让它自己根据内容来自动设置高度。 |
|
header | “> li >:first-child, >:not(li):even” | 为header指定选择器。 |
|
icons | ‘header’:’ui-icon-triangle-1-e’, ‘headerSelected’:’ui-icon-trangle-1-s’ | 为header和被选择的header设置图标 |
|
navigation导航 | false | 设置导航模式是否可用 |
|
navigationFilter | Location.href | 改变功能,常常用于当widget初始化时,获取一个处于展开状态的panel 的id |
|
8. Changing the trigger event
实例: accordion3.htm
部分代码:
(1).
(function ($) {
varaccOpts = {
event: "mouseover"
}
$("#myAccordion").accordion(accOpts);
})(jQuery);
(2). // 提倡用这种写法,不需要另外创建一个object
(function($) {
$("#myAccordion").accordion({
event: "click"
});
})(jQuery);
9. Changing the default activeheader: active
改变默认打开的panel, panel 的Index 是从0开始的
(function($) {
$("#myAccordion").accordion({
event: "click",
active:2 //打开第三个panel,默认打开第一个
});
})(jQuery);
active:正整数, false(隐藏所有),selector[例如: $("#header1")],
collapsible: true 实现可折叠功能,但是避免和mouseover事件同时使用,因为鼠标第一次放上去展开,再放上去就收缩,行为怪异
10. Filling the height of itscontainer
如果设置fillSpace,它将替代autoHeight。
(function ($) {
$("#myAccordion").accordion({
fillSpace: true
});
})(jQuery);
未完,待续......