jQuery ui 1.7更新小结

【 tulaoshi.com - Web开发 】

1. 每个ui插件现在都有自己单独的css文件，但是要根据情况与ui.theme.css ui.core.css结合使用，否则有些效果还是显示不出来的。
eg. datepicker就必须同时引用上述两个css文件；accordion 只须引入ui.theme.css即可。这个我会把每个插件独立的demo放在我的资源里边的。
2. ui.accordion
HTML 代码要遵循一定的格式要求：
代码如下:
ul id="example"
li
h3a href="#" href="#"Test 1/a/h3
divtable height="100px"trtdNews/td/tr/table
/div
/li
li
h3a href="#" href="#"Test 2/a/h3
divtable height="100px"trtdMagazine/td/tr/table
/div
/li
li
h3a href="#" href="#"Test 3/a/h3
divtable height="100px"trtdSport/td/tr/table
/div
/li
/ul

必须使用h标签
3. ui.dialog
注意两点：
(1) 在ui -1.7.1 中添加了一个新的引用：jquery.bgiframe.js支持
作用：如果网页上有浮动区块和下拉选单重叠时，在IE6会看到下拉选框总是把浮动区块覆盖住，无论怎么调整 z-index 都是没用的，而用 bgiframe 就可以轻松解决这个问题。
具体参见： http://www.oschina.net/p/bgiframe
使用：
$.ui.dialog.defaults.bgiframe = true;
(2) 如果想实现dialog的拖动效果，必须添加ui.resizable.css 以及ui.resizable.js文件
4. ui.tabs
这个相对ui-1.6 尤其需要注意：
(1) HTML代码规范：
代码如下:
div id="example"
ul
lia href="#tab-1" href="#tab-1"spanOne/span/a/li
lia href="#tab-2" href="#tab-2"spantwo/span/a/li
lia href="#tab-3" href="#tab-3"spanthree/span/a/li
/ul
div id="tab-1"
This is jQuery tab one.
/div
div id="tab-2"
I'm tab two.
/div
div id="tab-3"
Haha, three is here.
/div
div id="new-tab"
This is add tab.
/div
/div

注意： 每个tab相应的div必须放在tab生效的div内。
(2) 不再使用 $("#example ul").tabs();
直接书写为 $("#example").tabs();