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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
prototype.js常用函数详解
Jun 18 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
May 02 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
新闻分类录入、显示系统
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
Python中使用装饰器时需要注意的一些问题
2015/05/11 Python
Python NumPy库安装使用笔记
2015/05/18 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
python 解决cv2绘制中文乱码问题
2019/12/23 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
银行财务部实习生的自我鉴定
2013/11/27 职场文书
办公室前台岗位职责范本
2013/12/10 职场文书
面试后的感谢信范文
2014/02/01 职场文书
入学生会自荐书范文
2014/02/05 职场文书
服务承诺口号
2014/05/22 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL