和大家一起体验一下Jquery另一个吸引人的地方--强大炫酷实用的Jquery插件。
前两篇文章中，介绍了jQuery中强大的Selectors （选择器）以及开发中比较常用的方法的使用。今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件。
做网站的都知道，网站的美工很重要，如果一个BS的软件美工做的不好，技术含量很高，算法再高深，也不会很受到用户的青睐。（其实CS的也是如此）
然而jQuery强大的插件，可以很容易的给我们的网站带来炫酷的效果，以及更人性化得用户体验。下面和大家分享一些开发中可能常用的jQuery插件。
Menu
效果：
实现起来非常简单：
Html代码：
Code
<ul class="lavaLamp">
<li><a href="#">主页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">详细信息</a></li>
</ul>css和jQuery代码：
Code
<style>
.lavaLamp
{
position: relative;
height: 29px; width: 600px;
background: url("image/bg.gif");
padding: 15px; margin: 10px 0;
overflow: hidden;
}
.lavaLamp li
{
float:left;
list-style: none;
}
.lavaLamp li.back
{
background: url("image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left
{
background: url("image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
.lavaLamp li a
{
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff; outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
</style>
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
其中的jquery-latest.pack.js，jquery.lavalamp.js，jquery.easing.js
当然，这是比较简单的Menu，但是比较实用，还有其他很酷的Menu，比如下拉式的Menu，大家可以到我最后给的网站上查找，这里就不多介绍了。
Tabs
Tabs也是我们经常使用插件，它可以使我们的网站更佳的整洁和规范，是个很人性化的设计。
效果： 点击这里查看效果（这里可能有点问题，我不知道为什么css的@media应用不上，本地测试是没有问题的，写在博客园的html模板中就有了问题，看了半天无语了）
实现起来也不是很难，关键的地方就是对css的操作上
Html代码：
Code
h2>Simple Tabs</h2>
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
学习Jquery之旅，体验炫酷使用的Jquery插件！
</div>
<div id="fragment-2">
简单快捷的实现Tabs！效果还不错吧？
</div>
<div id="fragment-3">
Jquery的Tabs还有很多样式和效果的搭配，大家可以到我提供的网址上查找。
</div>
</div>
css和jQuery代码：
Code
<script src="jquery-latest.pack.js" type="text/javascript"></script>
<script src="ui.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#container-1 > ul').tabs();
});
</script>
<style type="text/css" media="screen, projection">
h1 {
margin: 1em 0 1.5em;
font-size: 18px;
}
h2 {
margin: 2em 0 1.5em;
font-size: 16px;
}
pre, pre+p, p+p {
margin: 1em 0 0;
}
code {
font-family: "Courier New", Courier, monospace;
}
@media projection, screen {
.ui-tabs-hide {
display: none;
}
}
@media print {
.ui-tabs-nav {
display: none;
}
}
.ui-tabs-nav, .ui-tabs-panel {
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
font-size: 12px;
}
.ui-tabs-nav {
list-style: none;
margin: 0;
padding: 0 0 0 4px;
}
.ui-tabs-nav:after {
display: block;
clear: both;
content: " ";
}
.ui-tabs-nav li {
float: left;
margin: 0 0 0 1px;
min-width: 84px;
}
.ui-tabs-nav a, .ui-tabs-nav a span {
display: block;
padding: 0 10px;
background: url(tab.png) no-repeat;
}
.ui-tabs-nav a {
margin: 1px 0 0;
padding-left: 0;
color: #27537a;
font-weight: bold;
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
outline: 0;
}
.ui-tabs-nav .ui-tabs-selected a {
position: relative;
top: 1px;
z-index: 2;
margin-top: 0;
color: #000;
}
.ui-tabs-nav a span {
width: 64px;
min-width: 64px;
height: 18px;
min-height: 18px;
padding-top: 6px;
padding-right: 0;
}
*>.ui-tabs-nav a span {
width: auto;
height: auto;
}
.ui-tabs-nav .ui-tabs-selected a span {
padding-bottom: 1px;
}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active {
background-position: 100% -150px;
}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active {
background-position: 100% -100px;
}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span {
background-position: 0 -50px;
}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span {
background-position: 0 0;
}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor
*/
cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now */
cursor: pointer;
}
.ui-tabs-disabled {
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-panel {
border-top: 1px solid #97a5b0;
padding: 1em 8px;
background: #fff;
}
.ui-tabs-loading em {
padding: 0 0 0 20px;
background: url(loading.gif) no-repeat 0 50%;
}
* html .ui-tabs-nav {
display: inline-block;
}
*:first-child+html .ui-tabs-nav {
display: inline-block;
}
</style>
其中的ui.tabs.pack.js
Accordion
手风琴效果，大家应该很熟悉。
效果： 点击这里查看效果
Html代码：
Code
<div class="basic" style="float:left;" id="list1a">
<a>Jquery-accordion分页One</a>
<div>
<p>学习Jquery之旅，和大家一起学习Jquery</p>
<br />
</div>
<a>Jquery-accordion分页Two</a>
<div>
<p>
强大的Jquery非常好用啊！
<br />
</p>
<p>
</p>
</div>
<a>Jquery-accordion分页Three</a
<div><p>
很不很不错的Jquery-accordion插件。</p>
</div>
</div>
css和jQuery代码：
Code
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#list1a').accordion();
});
</script>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body, #main { height: 100% }
.basic {
width: 260px;
border: 1px solid black;
}
.basic div {
background-color: #eee;
}
.basic p {
margin-bottom : 10px;
border: none;
text-decoration: none;
font-weight: bold;
font-size: 13px;
margin: 0px;
padding: 10px;
}
.basic a {
cursor:pointer;
display:block;
padding:5px;
margin-top: 0;
text-decoration: none;
font-weight: bold;
font-size: 12px;
color: black;
background-color: #00a0c6;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #999;
}
@media print {
.basic div, #navigation ul, #list2 dd, #list3 div{
display: block!important;
height: auto!important
}
}
</style>
其中的jquery.accordion.js当然，大家可以制作更炫酷漂亮的效果。
Round
有的时候我们希望页面中的Div实现圆角的效果，Jquery可以很好的满足我们。
效果：点击这里查看效果
Html代码：
<DIV id=main>
<DIV class=demo id="corner1">
<H1>Round</H1>
<P>Hello World!!</P></DIV>
<DIV class=demo id="corner2">
<H1>Round</H1>
<P>Hello World!!</P></DIV>
</DIV>
css和jQuery代码：
Code
<script type="text/javascript" src="jquery-latest.pack.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<STYLE type=text/css>BODY {
BACKGROUND: #f8f0e0
}
DIV.section {
CLEAR: left
}
H1 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 150%; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
H2 {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #ccc; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
DIV.demo {
PADDING-RIGHT: 20px; PADDING-LEFT: 20px; BACKGROUND: #c92; FLOAT: left; PADDING-BOTTOM: 20px; MARGIN: 1em; WIDTH: 18em; COLOR: #000; PADDING-TOP: 20px; TEXT-ALIGN: center
}
DIV.fun {
MARGIN: 2px
}
#main
{
height: 269px;
}
</STYLE>
<script type="text/javascript">
$(function(){
$("#corner1").corner();
$("#corner2").corner();
});
</script>
其中的jquery.corner.js。这样就能够实现Div的圆角效果。
Dialog
简单的实现在网页中弹出对话框。
效果：点击这里查看效果
Html代码：
Code
<div id='basicModal'><h2>jQuery对话框</h2>
<input type='button' name='basic' value='Demo' class='basic demo'/><br />
</div>
<div id="basicModalContent" style='display:none'>
<p>Hello,这就是简单的jQuery Demo.可以做一个登陆界面。注册界面..</p>
<input id="Text1" type="text" /><br/>
<input id="Text2" type="text" /><br/>
<input id="Text3" type="text" /><br/>
<input id="Button1" type="button" value="button" />
<input id="Button2" type="button" value="button" />
</div>
css和jQuery代码：
Code
<script type="text/javascript" src='https://files.cnblogs.com/gaoweipeng/jquery-latest.pack.js'></script>
<script type="text/javascript" src='https://files.cnblogs.com/gaoweipeng/jquery.simplemodal.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$('#basicModal input.basic, #basicModal a.basic').click(function(e) {
e.preventDefault();
$('#basicModalContent').modal();
});
});
</script>
<style>
#simplemodal-overlay {background-color:#000; cursor:wait;}
#simplemodal-container {height:400px; width:600px; background-color:#fff; border:3px solid #ccc;}
#simplemodal-container a.modalCloseImg {background:url(../img/basic/x.png) no-repeat; background-color:Red; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-18px; cursor:pointer;}
#simplemodal-container #basicModalContent {padding:8px;}
</style>
其中的jquery.simplemodal.js，在Dialog中我们能做很多事情，类似的场景很多：百度的登录....
ok，就先写到这。
小结：就先简单的介绍这些。jQuery的插件深受大家的喜爱和好评，的确给我们的开发带来了不少便捷和绚丽的效果，这里就不多介绍了，大家可以到下面的地址中去继续体验。
更多Jquery插件：
http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html
http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/
http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html
