jQuery常用插件
jQuery UI插件简介：
jQuery UI是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。所有插件测试能兼容IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+, 和GoogleChrome。
jQuery UI 常用插件:
1.dialog插件
2.tabs插件
3.menu插件
4.autocomplete插件
5.lazyload插件：
基本步骤：
（1）.将需要的jquery插件及样式文件加入工程。
（2）.在页面引入jquery插件及样式文件。
1.dialog插件
引入jquery插件及样式：
<script type="text/javascript" src="../jquery-ui-1.9.2/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery-ui-1.9.2/ui/jquery-ui.js"></script>
<link rel="stylesheet" href="../jquery-ui-1.9.2/themes/base/jquery.ui.all.css" type="text/css"></link>
body代码：
<body>
<button id="openbut" onclick="$('#dlg').dialog('open')">打开窗口</button> <div id="dlg" title="用户登录">
用户名<br/>
<input type="text"><br/>
密码<br/>
<input type="text"><br/>
</div>
</body>
js样式操作：
<script type="text/javascript">
$(function(){
$('#dlg').dialog({
//设置成false,代表不自动打开
autoOpen:false,
//按钮的设置
buttons:{
'关闭':function(){
$('#dlg').dialog('close');
}
},
modal:true,
//出
show:{
effect:'blind', //特效样式
duration:2000
},
//收
hide:{
effect:'explode',
duration:2000
}
});
});
</script>
运行效果：
常用参数：
2.tabs插件
body标签里：
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a>
</li>
<li><a href="#tabs-2">Tabs2</a>
</li>
<li><a href="#tabs-3">Tabs3</a>
</li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
</body<script type="text/javascript">
$(function() {
$('#tabs').tabs({
//设置该组件的折叠状态。默认值为false，即不可折叠
collapsible:false,
//Boolean类型值：设置该参数值为false，所有选项卡将会被折叠。必须设置collapsible 参数为true
//Integer类型值：正整数表示下标从0开始的选项卡位置；负整数表示从最后一个开始倒数的选项卡位置
active:1,
//设置切换选项卡的触发事件。默认值为“click”，即点击选项卡时触发切换
event:'hover'
});
});
</script>
常用属性：
常用事件及方法：
3.menu插件：
<script type="text/javascript">
$(function () {
$("#menu").menu({
//获得焦点时触发
focus:function(){
//背景颜色
$(this).css("background","pink");
} //设置菜单不可用
//disabled:true
});
});
</script>
<style>
.ui-menu{ width: 150px; }
</style> </head>
<body>
<ul id="menu">
<li><a href="#">小明一中</a>
<ul>
<li><a href="#">高中部</a>
<ul>
<li><a href="#">高一(1)班</a></li>
<li><a href="#">高一(2)班</a></li>
<li><a href="#">高一(3)班</a>
<ul>
<li><a href="#">小胡</a></li>
<li><a href="#">小李</a></li>
<li><a href="#">小陈</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">初中部</a>
<ul>
<li><a href="#">初一(1)班</a></li>
<li><a href="#">初一(2)班</a></li>
<li><a href="#">初一(3)班</a></li>
</ul>
</li>
<li><a href="#">教研部</a></li>
</ul>
</li>
<li><a href="#">大明二中</a></li>
</ul>
</body>
运行效果图：
autocomplete插件：
<script type="text/javascript">
//json
$(function() {
var source = [ {
"label" : "aa",
"value" : "123"
}, {
"label" : "aaa",
"value" : "456"
}, {
"label" : "bb",
"value" : "789"
}
];
//var source=["accp","apple","blue","bus"];
$("#tags").autocomplete({
source : source,
//自动选择第一项
autoFocus:true, //列表任意一项获得焦点时触发
focus:function(){
alert("1");
}
});
});
</script>
</head> <body>
<input id="tags">
</body>
</html>
显示效果，搜索引擎进行自动装配。
lazyload插件：
<script type="text/javascript">
$(function(){
$(".lazy").lazyload({
effect:"fadeIn",
effectspeed:2000,
//距离下一张图片还有100像素时
threshold:100
});
});
</script> </head>
<body>
<!-- 把 <img> 标签中的 src 属性改为等待图片的URL, data-original 属性填上真正的图片URL. -->
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood">
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side">
<img class="lazy" src="../img/white.gif" data-original="../img/viper_1.jpg" width="765" height="574" alt="Viper 1">
<img class="lazy" src="../img/white.gif" data-original="../img/viper_corner.jpg" width="765" height="574" alt="Viper Corner">
<img class="lazy" src="../img/white.gif" data-original="../img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT">
<img class="lazy" src="../img/white.gif" data-original="../img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"> </body>
延迟加载减少不必要的资源浪费，提高性能。
有所作为是生活的最高境界。 —— 恩格斯
jQuery常用插件的更多相关文章
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- 转:jQuery常用插件
原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome 上传时间:2014-06-1 ...
- jQuery常用插件大全（9）ResponsiveSlides插件
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- 编写jquery常用插件的基本格式
写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...
- 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件
1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...
- jquery 常用插件
50款最有用的 jQuery 插件集锦<表单篇> 50款最有用的 jQuery 插件集锦<网页布局篇> 50款最有用的 jQuery 插件集锦<内容滑块篇> 50款 ...
- jQuery常用插件大全
1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...
- js及jquery常用插件
1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.j ...
随机推荐
- MRDS学习四——自动型机器车
由自己的所在开始,探索自己周围的简单机器车,假设车子的行走路径如下: 我们要把L型路径写成一个Activity,然后由外部输入这个L的大小,最后这个Activity要能够在完成行走路径时吐出更大的L大 ...
- [译]使用branch
这篇文章将介绍Git分支. 首先, 看看如果创建分支, 这就像是request一个新的项目历史. 接着, 来看看git checkout是如果能被用来选择一个分支的. 最后, 学习用git merge ...
- bzoj1045 糖果传递
escription 老师准备了一堆糖果, 恰好n个小朋友可以分到数目一样多的糖果. 老师要n个小朋友去拿糖果, 然后围着圆桌坐好, 第1个小朋友的左边是第n个小朋友, 其他第i个小朋友左边是第i-1 ...
- 加载默认图片，如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
- fetch 资源请求
简介:fetch() 方法用于发起获取资源的请求.它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象. 为了更好的体验,可点击这里阅读 ...
- Java 内部类
1.成员内部类 成员内部类,就是作为外部类的成员,可以直接使用外部类的所有成员和方法,即使是private的.同时外部类要访问内部类的所有成员变量/方法,则需要通过内部类的对象来获取. 2.局部内部类 ...
- 分享一些不错的sql语句
1.说明:复制表(只复制结构,源表名:a 新表名:b) (Access可用) 法一:select * into b from a where 1 <> ...
- ABAP 上传文件到内表
http://www.cnblogs.com/jiangzhengjun/p/4265642.html http://www.xuebuyuan.com/1233478.html
- Jetty使用教程（四：21-22）—Jetty开发指南
二十一.嵌入式开发 21.1 Jetty嵌入式开发HelloWorld 本章节将提供一些教程,通过Jetty API快速开发嵌入式代码 21.1.1 下载Jetty的jar包 Jetty目前已经把所有 ...
- Visual Studio Productivity Power Tools居然也开源
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:微软开源玩得嗨,连VS扩展插件Productivity Power Tools也开源. ...