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 ...
随机推荐
- C# 读取excel日期时获取到数字转换成日期
string strDate= DateTime.FromOADate(Convert.ToInt32(data[i][7])).ToString("d"); strDate= D ...
- 手动封装js原生XMLHttprequest异步请求
Code Object.extend =function(targetObj,fnJson){ //扩展方法,类似于jQuery的$.extend,可以扩展类的方法,也可以合并对象 for(var f ...
- PHP保留2位小数 格式化小数、浮点数
JS保留两位小数例子 四舍五入使用函数 toFixed() <html> <head> </head> <script language="java ...
- PHP中的魔术方法：__construct, __destruct , __call, __callStatic,__get, __set, __isset, __unset , __sleep, __wakeup, __toString, __set_state, __clone and __autoload
1.__get.__set 这两个方法是为在类和他们的父类中没有声明的属性而设计的: __get( $property ) 当调用一个未定义的属性时访问此方法: __set( $property, $ ...
- jquery.print.js 打印插件
<script language="javascript" src="jquery-1.4.4.min.js"></script> &l ...
- java连接oracle范例
需要引用:ojdbc6.jar import java.sql.*; public class Main { static Connection conn; static Statement stat ...
- js自动更新时间+星期
<div class="top_bar" id="cao" height="28px"><script> setIn ...
- Python~recursive function递归函数
尾递归实现循环 def fact(n): if n==1: return 1 else : return n * fact(n-1) raw_input() 字符而非数字 unsupported op ...
- JavaScript高级程序设计学习笔记--错误处理与调试
try-catch语句 只要代码中包含finally子句,则无论try或catch语句块中包含什么代码--甚至return语句,都不会阻止finally子句的执行,来看下面这个函数: function ...
- Java面试：1
月薪10000以上: 1.了解Java的反射机制 2. 了解泛型的原理 3. 了解Spring框架的基本原理 4. 熟悉设计模式 5. 了解如斐波那契数列之类的简单算法月薪20000以上: 1. 精通 ...