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防止退格键网页后退的实现代码
Mar 23 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
移动端js图片查看器
Nov 17 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php类自动加载器实现方法
2015/07/28 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
python利用装饰器进行运算的实例分析
2015/08/04 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python变量的存储原理详解
2019/07/10 Python
python多进程重复加载的解决方式
2019/12/13 Python
详解python如何引用包package
2020/06/07 Python
python属于跨平台语言码
2020/06/09 Python
Python第三方包PrettyTable安装及用法解析
2020/07/08 Python
python3 re返回形式总结
2020/11/20 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
2013/06/20 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
Myprotein法国官网:欧洲第一运动营养品牌
2019/03/26 全球购物
《长江之歌》教学反思
2014/04/17 职场文书
开学典礼策划方案
2014/05/28 职场文书
车辆年审委托书范本
2014/09/18 职场文书
中学生思想品德评语
2014/12/31 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书