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 相关文章推荐
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
JavaScript实现Java中Map容器的方法
Oct 09 Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
ES6学习教程之对象的扩展详解
May 02 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 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临时文件的安全性分析
2014/07/04 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
详解php协程知识点
2018/09/21 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
Django + Uwsgi + Nginx 实现生产环境部署的方法
2018/06/20 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
使用python实现微信小程序自动签到功能
2020/04/27 Python
Python执行时间的几种计算方法
2020/07/31 Python
欧洲第一中国智能手机和平板电脑网上商店:CECT-SHOP
2018/01/08 全球购物
感恩母亲节演讲稿
2014/05/07 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
社会实践的活动方案
2014/08/22 职场文书
公司员工辞职信范文
2015/05/12 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
如何在C++中调用Python
2021/05/21 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript