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 相关文章推荐
javascript之更有效率的字符串替换
Aug 02 Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
Vue 之孙组件向爷组件通信的实现
Apr 23 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 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
站长助手-网站web在线管理程序 v1.0 下载
2007/05/12 PHP
PHP 作用域解析运算符(::)
2010/07/27 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP crc32()函数讲解
2019/02/14 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
vue跨域解决方法
2017/10/15 Javascript
跟老齐学Python之print详解
2014/09/28 Python
python编码总结(编码类型、格式、转码)
2016/07/01 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
Europcar意大利:汽车租赁
2019/07/07 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
澳大利亚家用电器在线商店:Billy Guyatts
2020/05/05 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
机械设计制造专业个人求职信
2013/09/25 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
美德好少年主要事迹
2014/01/29 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
部门活动策划方案
2014/08/16 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Python实现老照片修复之上色小技巧
2021/10/16 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android