JQuery UI 之 Accordion Widget

最近正在看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);

未完，待续......