【学习拾遗】Jquery（二）--插件

　　上篇谈了一下Jquery的核心，这篇来说一下Jquery的“效果”。主要是官网那些Jquery特效。

首先，去官网下载Jquery的核心文件，此外，要实现效果，还需要下载一个jquery-ui.js的文件。

特效：官网给的效果：Draggable，Accordion，Autocomplete，Explod等效果，这里简单实现一下；

一、爆炸特效

样式和JS文件

<script type="text/javascript" src="../jquery-1.11.3.js"></script>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-ui.js"></script>
<style>
	#accordion{
		width:200px;
		height:400px;
	}
	
	#div1{
		width:200px;
		height:200px;
		border:1px solid #999;
		
	}
	
	#uicorner{
		width:200px;
		height:200px;
		border:1px solid #999;
		background:#EEE;
	}
</style>

html标签

<div id="uicorner" class="ui-corner-all"></div>

<input type="button" id="btn" value="点击">

Js

$("#btn").click(function(){
	$("#uicorner").toggle("explode","slow");
})

二、Autocomeplete自动填充

样式和js

<script type="text/javascript" src="../jquery-1.11.3.js"></script>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-ui.js"></script>
<style>
	#accordion{
		width:200px;
		height:400px;
	}
	
	#div1{
		width:200px;
		height:200px;
		border:1px solid #999;
		
	}
	
	#uicorner{
		width:200px;
		height:200px;
		border:1px solid #999;
		background:#EEE;
	}
</style>

html标签

<div>
	<label for="tags">Tags: </label>
	<input id="tags">
</div>

js

<script type="text/javascript">
	$(function() {
		var availableTags = [
			{"label":"tangseng","value":"唐僧"},
			{"label":"wukong","value":"悟空"},
			{"label":"bajie","value":"八戒"},
			{"label":"shaseng","value":"沙僧"},
			{"label":"guanyin","value":"观音"}
		];
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});</script>

效果：输入wukong

三、Accordion折叠

样式和js

<script type="text/javascript" src="../jquery-1.11.3.js"></script>
<link href="jquery-ui.css" rel="stylesheet">
<script src="jquery-ui.js"></script>
<style>
	#accordion{
		width:200px;
		height:400px;
	}
	
	#div1{
		width:200px;
		height:200px;
		border:1px solid #999;
		
	}
	
	#uicorner{
		width:200px;
		height:200px;
		border:1px solid #999;
		background:#EEE;
	}
</style>

html

<div id="accordion">
	<h3>用户管理</h3>
	<div>添加用户</div>

	<h3>部门管理</h3>
	<div>添加部门</div>
	
	<h3>角色管理</h3>
	<div>添加角色</div>
	
</div>

js

$("#accordion").accordion({
			collapsible: true,
			active:2,
			event: "mouseover click"
});

四、小结

　　这里简单的通过Ｎotepad++实现了具有代表性的效果，其它的效果，也基本类似。有兴趣的可以下个参考手册，挨着做些实现！想想用的DWZ和EasyUI，其实就是jquery的一次再封装和优化！