手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery ui 1.7更新小结
jQuery ui 1.7更新小结
摘要:1.每个ui插件现在都有自己单独的css文件,但是要根据情况与ui.theme.cssui.core.css结合使用,否则有些效果还是显示不...

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>

<h3><a href="#" href="#">Test 1</a></h3>

<div><table height="100px"><tr><td>News</td></tr></table>

</div>

</li>

<li>

<h3><a href="#" href="#">Test 2</a></h3>

<div><table height="100px"><tr><td>Magazine</td></tr></table>

</div>

</li>

<li>

<h3><a href="#" href="#">Test 3</a></h3>

<div><table height="100px"><tr><td>Sport</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>

<li><a href="#tab-1" href="#tab-1"><span>One</span></a></li>

<li><a href="#tab-2" href="#tab-2"><span>two</span></a></li>

<li><a href="#tab-3" href="#tab-3"><span>three</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();

【jQuery ui 1.7更新小结】相关文章:

jQuery封装的tab选项卡插件分享

JQuery控制Radio选中方法分析

JQuery中clone方法复制节点

jQuery实现文本展开收缩特效

JavaScript中操作字符串小结

javascript去除空格方法小结

jQuery Timelinr实现垂直水平时间轴插件(附源码下载)

jQuery中 prop() attr()使用详解

jQuery zTree加载树形菜单功能

js获取字符串字节数方法小结

精品推荐
分类导航