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 09 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
js弹出对话框方式小结
Nov 17 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
15分钟深入了解JS继承分类、原理与用法
Jan 19 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
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&amp;java(一)
2006/10/09 PHP
PHP分页函数代码(简单实用型)
2010/12/02 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP模板引擎Smarty内建函数section,sectionelse用法详解
2016/04/11 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
JS 实现Json查询的方法实例
2013/04/12 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
Python ini文件常用操作方法解析
2020/04/26 Python
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
幼儿园亲子活动总结
2014/04/26 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
民政局未婚证明
2015/06/15 职场文书
警示教育观后感
2015/06/17 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
python实现层次聚类的方法
2021/11/01 Python
Nginx安装配置详解
2022/06/25 Servers