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 ...

随机推荐

大熊君{{bb}}------春节期间你跳槽了吗？
时间过的很快,转眼间又快过春节了,推荐你在春节期间跳槽,是基于以下几个原因: 1,命中率高通常情况下,所有公司都会在年底进行一定幅度的裁员,而惟独这家公司在招工,这等于明摆着告诉公众他们现在面临严重 ...
vijos1404 遭遇战
描述今天,他们在打一张叫DUSTII的地图,万恶的恐怖分子要炸掉藏在A区的SQC论坛服务器!我们SQC的人誓死不屈,即将于恐怖分子展开激战,准备让一个人守着A区,这样恐怖分子就不能炸掉服务器了.(一 ...
（转载）JavaWeb学习总结(五十二)——使用JavaMail创建邮件和发送邮件
博客源地址:http://www.cnblogs.com/xdp-gacl/p/4216311.html 一.RFC882文档简单说明 RFC882文档规定了如何编写一封简单的邮件(纯文本邮件),一封 ...
微信安卓版下载 Android微信各版本列表
前面ytkah弄了一个iso微信各版本列表,现在就来整一个微信 for Android各版本列表,方便大伙下载.每个版本都放出一些新的功能或修复相关错误,详情可以点击下面的版本链接进行查看.资源收集于 ...
vue2.0学习（一）
1.解决双花括号在初始化时的闪烁,两种方式,一种是<div v-text="name"></div>,将用v-text指令来显示,类似于angular的ng ...
进阶系列五【绝对干货】----Git教程
一.介绍 1.1Git是什么? Git是目前世界上最先进的分布式版本控制系统.什么是版本控制系统?请自行百度. 1.2Git与SVN对比有什么特点? SVN是集中式版本控制系统.版本库是集中放在中央服 ...
ps批量处理图片
刚刚有朋友问,ps咋做批量动作呢,其实特别简单,基本一劳永逸,用尺寸做个例子,大家看看就知道了.
面向对象（五）super
super方法只是为了执行继承父级的init方法,若要详细,请参考别人的博客 class a(object): def __init__(self): print("aINIT") ...
php，nginx重启
查看php运行目录命令:which php/usr/bin/php 查看php-fpm进程数:ps aux | grep -c php-fpm 查看运行内存/usr/bin/php -i|grep ...
secureCRT会话导入到xshell中的方法
官方给出了一个工具,sessionimporter.exe 不过软件有点老了,导入的会话路径和xshell默认的会话路径不一致,导致导入后,xshell没有导入的会话信息 sessionimporte ...

jQuery常用插件

jQuery UI 常用插件:

jQuery常用插件的更多相关文章

随机推荐

热门专题