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下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
Node调试工具JSHint的安装及配置教程
May 27 Javascript
有效提高JavaScript执行效率的几点知识
Jan 31 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
微信小程序 swiper组件详解及实例代码
Oct 25 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
Mar 07 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
Oct 20 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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实现首页链接查询 友情链接检查的代码
2010/01/05 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php邮件发送的两种方式
2020/04/28 PHP
php session的锁和并发
2016/01/22 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
PHP针对redis常用操作实例详解
2019/08/17 PHP
JavaScript表单常用验证集合
2008/01/16 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python中方法链的使用方法
2016/02/23 Python
Python中new方法的详解
2019/01/15 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
实用的简历自我评价
2014/03/06 职场文书
求职自荐信的格式
2014/04/07 职场文书
商标侵权律师函
2015/05/27 职场文书
红楼梦读书笔记
2015/06/25 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
mysq启动失败问题及场景分析
2021/07/15 MySQL