繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery ui 1.7更新小结
- Javascript
- JavaScript 复制功能代码 兼容多浏览器
- 图片与文字半透明效果 鼠标移上不透明
- javascript 模拟Marquee文字向左均匀滚动代码
- 纯CSS 链接悬停提示效果代码
- JS、CSS文字切换，定时交替，代码精简
- Javascript 仿歌词智能滚动代码
- javascript 表单中浏览文件的“浏览”按钮修改
- 让你的网站可编辑的实现js代码
- Javascript var变量隐式声明方法
- JS CSS制作饱含热情的镶边文字闪烁特效
- Js 实现文字爬楼滚动效果 结合文本框
- 随日期每天自动变换的文本的js特效
- 一个链接按两种方式打开两个网址的方法
- Js文字背景行如流水特效
- 让链接必须按先后顺序点击的JS代码
- 单选按钮决定链接的网址
- JavaScript 点击插入文字
- 获取网站跟路径的javascript代码(站点及虚拟目录)
- JS 用6N±1法求素数 实例教程
- javascript 添加和移除函数的通用方法
Javascript 中的 jQuery ui 1.7更新小结
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 195 ::
收藏到网摘: n/a
因为要给新员工进行培训jQuery.UI方面的内容，我之前学习的都是jquery.ui-1.6b的，现在的版本升级到jquery-ui-1.7.1，除了样式上有很大调整以外，API也有了很大的变化。 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();
评论 (0) All
