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 UI 使用心得及技巧
Oct 10 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
整理一下常见的IE错误
Nov 18 Javascript
js实现二级导航功能
Mar 03 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
JavaScript分页组件使用方法详解
Jul 26 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实现路由映射到指定控制器
2016/08/13 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
定义select的边框颜色
2008/04/28 Javascript
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
vue中eventbus被多次触发以及踩过的坑
2017/12/02 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
使用python实现扫描端口示例
2014/03/29 Python
Python代码实现KNN算法
2017/12/20 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python返回数组/List长度的实例
2018/06/23 Python
python设置环境变量的作用和实例
2019/07/09 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
阿迪达斯香港官网:adidas香港
2019/11/09 全球购物
支部鉴定材料
2014/06/02 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
2015团员个人年度总结
2015/11/24 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书