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 相关文章推荐
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vuejs事件中心管理组件间的通信详解
Aug 09 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
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实现腾讯与百度坐标转换
2017/08/05 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript Object的extend是一个常用的功能
2009/12/02 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
2017/03/13 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Element Dialog对话框的使用示例
2020/07/26 Javascript
python如何在终端里面显示一张图片
2016/08/17 Python
Python实现Linux中的du命令
2017/06/12 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python实现截取PDF文件中的几页代码实例
2019/03/11 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
什么是View State?
2013/01/27 面试题
加拿大留学自荐信
2014/01/28 职场文书
安全教育演讲稿
2014/05/09 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
小学班主任心得体会
2016/01/07 职场文书
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
2021年最新用于图像处理的Python库总结
2021/06/15 Python
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS