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实现的页内搜索代码
May 23 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
js图片预加载示例
Apr 30 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 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
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
javascript 对象的定义方法
2007/01/10 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
python实现教务管理系统
2018/03/12 Python
python处理“
2019/06/10 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python实现投影法分割图像示例(二)
2020/01/17 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
Python是什么 Python的用处
2020/05/26 Python
用python制作个音乐下载器
2021/01/30 Python
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
金融专业毕业生推荐信
2013/11/26 职场文书
商场活动策划方案
2014/01/24 职场文书
孝老爱亲模范事迹
2014/01/24 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
政风行风整改报告
2014/11/06 职场文书
少先队中队工作总结2015
2015/07/23 职场文书
会计实训总结范文
2015/08/03 职场文书
Python爬取某拍短视频
2021/06/11 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏
Redis实战高并发之扣减库存项目
2022/04/14 Redis