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 相关文章推荐
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
JS轮播图的实现方法
Aug 24 Javascript
探索node之事件循环的实现
Oct 30 Javascript
原生js实现自定义滚动条
Jan 20 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
js类型检查实现代码
2010/10/29 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
vue实现单一筛选、删除筛选条件
2020/10/26 Javascript
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
Python实现Sqlite将字段当做索引进行查询的方法
2016/07/21 Python
Python 中的with关键字使用详解
2016/09/11 Python
JSON Web Tokens的实现原理
2017/04/02 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python实现图像外边界跟踪操作
2020/07/13 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
会计找工作求职信范文
2013/12/09 职场文书
生产总经理岗位职责
2013/12/19 职场文书
安全环保演讲稿
2014/08/28 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
python机器学习创建基于规则聊天机器人过程示例详解
2021/11/02 Python