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常用插件的更多相关文章
	

    
						
  1. jQuery常用插件与jQuery使用validation插件实现表单验证实例
		
    jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
    
		
    2. 
						
  2. 《JQuery常用插件教程》系列分享专栏
		
    <JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
    
		
    3. 
								
  3. 转:jQuery常用插件
		
    原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome      上传时间:2014-06-1 ...
    
		
    4. 
						
  4. jQuery常用插件大全（9）ResponsiveSlides插件
		
    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
    
		
    5. 
						
  5. 编写jquery常用插件的基本格式
		
    写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...
    
		
    6. 
						
  6. 三、jQuery--jQuery基础--jQuery基础课程--第9章 jQuery 常用插件
		
    1.表单验证插件——validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({option ...
    
		
    7. 
						
  7. jquery 常用插件
		
    50款最有用的 jQuery 插件集锦<表单篇> 50款最有用的 jQuery 插件集锦<网页布局篇> 50款最有用的 jQuery 插件集锦<内容滑块篇> 50款 ...
    
		
    8. 
						
  8. jQuery常用插件大全
		
    1.五星级插件jRating 详细文档介绍:http://www.myjqueryplugins.com/jquery-plugin/jrating 2.图片展示插件Swiper和Slider swi ...
    
		
    9. 
						
  9. js及jquery常用插件
		
    1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.j ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 292. Nim Game
			
    292. Nim Game You are playing the following Nim Game with your friend: There is a heap of stones on  ...
    
			
    2. 
						
  2. CPU思考
			
    线程高并发 会导致CPU load长,线程大运算量和大量线程 会导致CPU利用率高 因为CPU处理都是原子操作的,8核CPU在同一时刻最多也只能处理8个线程,但是因为处理的非常快,所以即使几万个简单线 ...
    
			
    3. 
						
  3. shell--2.shell数组
			
    shell 数组 (1)定义数组 shell中,用括号表示数组,数组元素用空格分开,定义数组的一般形式 arrt_name=(val1 val2 val3) 或者 arry_name=(val1 va ...
    
			
    4. 
						
  4. tornado 路由系统----扩展（include）
			
    在Tornado中实现Django分层路由 看了几个 Tornado 的 demo 发现都是一个py搞定所有,这样做做为例子来讲确实很直观,但如果在大型项目中这样做肯定不现实,所以博主考虑如何制定合理 ...
    
			
    5. 
						
  5. EL算术表达式
			
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
    
			
    6. 
						
  6. 关于Promise模式  整理中。。。
			
    http://blog.csdn.net/womendeaiwoming/article/details/49849055 研究了几天Promise模式,因为在项目里也遇到了所谓的“回调陷阱”,就是多 ...
    
			
    7. 
						
  7. delphi 各新版本特性收集
			
    delphi 各新版本特性收集 http://www.cnblogs.com/dreamszx/p/3602589.html
    
			
    8. 
						
  8. macbook air 开机黑屏解决方法
			
    故障现象:1. 开机有声音2. 背面logo亮灯3. 键盘背光灯不亮4. 大写锁定键按下不亮5. 屏幕黑屏,无苹果logo 解决:重置PRAM后成功开机. 1. 关闭 Mac.2. 在键盘上找到以下按 ...
    
			
    9. 
						
  9. 给包含compid列且值为null ,表的行数据赋值--
			
    IF OBJECT_ID ('dbo.spSelectColValue_In_DB') IS NOT NULL DROP PROCEDURE dbo.spSelectColValue_In_DB go ...
    
			
    10. 
						
  10. python习题 （1）：login
			
    #!/uer/bin/env python # _*_ coding: utf-8 _*_ import sys retry_limit = 3 retry_count = 0 account_fil ...
    
			
    11.