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>

延迟加载减少不必要的资源浪费,提高性能。



有所作为是生活的最高境界。 —— 恩格斯

时间: 10-14

jQuery常用插件的相关文章

转:jQuery常用插件

原文来自于:http://download.csdn.net/album/detail/369 jquery.cycle.all.js 上传者:itmyhome      上传时间:2014-06-15 Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能,使用方法很简单 $(document).ready(function() { $('#goods').cycle(); }); 博文地址:http://blog.csdn.net/itmyho

jQuery 常用插件和UI插件 总结笔记

1. jQuery 常用插件 (1). 表单验证插件--validate 该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:$(form).validate({options});其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置. Jquery Validate 验证规则 (1)required:true 必输字段 (2)remote:"check.

jQuery常用插件与jQuery使用validation插件实现表单验证实例

jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . pickadate.  Echarts.chosen.(编辑器插件) ckeditor在百度上都可以直接搜索 表单校验 jQuery插件validation:https://jqueryvalidation.org/ validation是一个基于jQuery的插件,里面有了jQuery的一些函数

Jquery常用插件整理(持续更新中)

1. X-editable 这个插件能够让你在页面上创建可编辑的元素.它能够使用任何引擎(bootstrap.jquery-ui.jquery),并且包含弹出式和内联模式. 2. Garlic.js Garlic.js 自动在本地保存表单文本字段的值,直到表单被提交.这样,你的用户如果不小心关闭选项卡或浏览器,也不会失去任何宝贵的数据. 3. Pickadate.js 完全响应式和轻量级的 jQuery 日期输入选择器. 4. jHERE 有了 jHERE,你可以很容易地添加互动地图到您的网站中

jQuery常用插件大全(9)ResponsiveSlides插件

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持.你需要做的只是链接jquery并且把图片裁剪为相同大小. 工具/原料 笔记本电脑或是台式机 互联网 ResponsiveSlides 方法/步骤 1 在github上下载ResponsiveSlides.js,如下图所

编写jquery常用插件的基本格式

写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1.8.3)源码中也能找到下面代码: 其实在jquery中$就是一个函数function,当我们执行$()时会得到一个jquery对象,得到的jquery对象的类型是object类型,而不是数组.除此之外$也是个对象,因为在$上面也可以定义方法和属性,比如常见的$.ajax. 而$.fn就是$的原型,,

jquery常用插件-(转载)

原文链接:http://www.cnblogs.com/hooray/archive/2011/06/05/2072985.html UI: jquery.HooRay(哈哈,自己写的插件是必须有的) jquery UI(官方的UI插件,功能很多,但我只用少数几个) jQuery EasyUI jQuery LigerUI 对话框: artDialog(很欣赏这个插件,又强大又美观) AsyncBox(制作者小吴同学也是博客园的人呢) jBox(继续国人的插件,就是皮肤稍微做的弱了点,功能上一点

Jquery 常用插件

artDialogjquery.multiselect.jshandsometablejquery.boxy.jsjquery.jqGrid.jszTree jquery.tipsy.js

jquery常用插件及用法总结

http://www.jb51.net/Special/200.htm