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 parseInt 大改造
Sep 27 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
VUE安装使用教程详解
Jun 03 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、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
Use Word to Search for Files
2007/06/15 Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
Javascript 读取操作Sql中的Xml字段
2014/10/09 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
2015/10/09 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
jQuery滚动监听实现商城楼梯式导航效果
2017/03/06 Javascript
JS中promise化微信小程序api
2018/04/12 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Python实现从百度API获取天气的方法
2015/03/11 Python
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
Python+微信接口实现运维报警
2016/08/27 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python sys模块常用方法解析
2020/02/20 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
超市开业庆典活动策划方案
2014/09/15 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS