jQuery ui 1.7更新小结


Posted in Javascript onAugust 15, 2009

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();
Javascript 相关文章推荐
表单的一些基本用法与技巧
Jul 15 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 #Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 #Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 #Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 #Javascript
img标签中onerror用法
Aug 13 #Javascript
什么是JavaScript
Aug 13 #Javascript
Javascript Global对象
Aug 13 #Javascript
You might like
php 图片上添加透明度渐变的效果
2009/06/29 PHP
PHP用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
JS动态修改网页body的背景色实例代码
2017/10/07 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python中operator模块的操作符使用示例总结
2016/06/28 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Django admin组件的使用
2020/10/24 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
大学生求职信范文应怎么写
2014/01/01 职场文书
周年庆典邀请函范文
2014/01/24 职场文书
环境保护标语
2014/06/20 职场文书
节能环保演讲稿
2014/08/28 职场文书
亮剑观后感
2015/06/05 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书