学习jQuery之旅--使用炫酷的jQuery插件

<style> .lavaLamp { position: relative; height: 29px; width: 600px; background: url("http://images.cnblogs.com/cnblogs_com/gaoweipeng/194616/o_bg.gif"); padding: 15px; margin: 10px 0; overflow: hidden; } .lavaLamp li { float:left; list-style: none; } .lavaLamp li.back { background: url(http://images.cnblogs.com/cnblogs_com/gaoweipeng/194616/o_lava.gif) no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url(http://images.cnblogs.com/cnblogs_com/gaoweipeng/194616/o_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> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});

前两篇文章中，介绍了jQuery中强大的Selectors （选择器）以及开发中比较常用的方法的使用。今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件。

做网站的都知道，网站的美工很重要，如果一个BS的软件美工做的不好，技术含量很高，算法再高深，也不会很受到用户的青睐。（其实CS的也是如此）

然而jQuery强大的插件，可以很容易的给我们的网站带来炫酷的效果，以及更人性化得用户体验。下面和大家分享一些开发中可能常用的jQuery插件。

Menu

效果：

• 主页
• 日志
• 相册
• 留言
• 详细信息

实现起来非常简单：

Html代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><ulclass="lavaLamp">
<li><ahref="#">主页</a></li>
<li><ahref="#">日志</a></li>
<li><ahref="#">相册</a></li>
<li><ahref="#">留言</a></li>
<li><ahref="#">详细信息</a></li>
</ul>

css和jQuery代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><style>
.lavaLamp
{
position:relative;
height:29px;width:600px;
background:url("image/bg.gif");
padding:15px;margin:10px0;
overflow:hidden;
}
.lavaLampli
{

float:left;
list-style:none;
}
.lavaLampli.back
{

background:url("image/lava.gif")no-repeatright-30px;
width:9px;height:30px;
z-index:8;
position:absolute;
}
.lavaLampli.back.left
{

background:url("image/lava.gif")no-repeattopleft;
height:30px;
margin-right:9px;
}
.lavaLamplia
{

position:relative;overflow:hidden;
text-decoration:none;
text-transform:uppercase;
font:bold14pxarial;
color:#fff;outline:none;
text-align:center;
height:30px;top:7px;
z-index:10;letter-spacing:0;
float:left;display:block;
margin:auto10px;
}
</style>
<scripttype="text/javascript"src="js/jquery-latest.pack.js"></script>
<scripttype="text/javascript"src="js/jquery.lavalamp.js"></script>
<scripttype="text/javascript"src="js/jquery.easing.js"></script>

<scripttype="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
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->h2>SimpleTabs</h2>

<divid="container-1">
<ul>
<li><ahref="#fragment-1"><span>One</span></a></li>
<li><ahref="#fragment-2"><span>Two</span></a></li>
<li><ahref="#fragment-3"><span>Three</span></a></li>
</ul>
<divid="fragment-1">
学习Jquery之旅，体验炫酷使用的Jquery插件！
</div>
<divid="fragment-2">
简单快捷的实现Tabs！效果还不错吧？
</div>
<divid="fragment-3">
Jquery的Tabs还有很多样式和效果的搭配，大家可以到我提供的网址上查找。
</div>
</div>

css和jQuery代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><scriptsrc="jquery-latest.pack.js"type="text/javascript"></script>
<scriptsrc="ui.tabs.pack.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$('#container-1>ul').tabs();
});
</script>
<styletype="text/css"media="screen,projection">
h1{
margin:1em01.5em;
font-size:18px;
}
h2{
margin:2em01.5em;
font-size:16px;
}
pre,pre+p,p+p{
margin:1em00;
}
code{
font-family:"CourierNew",Courier,monospace;
}

@mediaprojection,screen{
.ui-tabs-hide{
display:none;
}
}

@mediaprint{
.ui-tabs-nav{
display:none;
}
}

.ui-tabs-nav,.ui-tabs-panel{
font-family:"TrebuchetMS",Trebuchet,Verdana,Helvetica,Arial,sans-serif;
font-size:12px;
}
.ui-tabs-nav{
list-style:none;
margin:0;
padding:0004px;
}
.ui-tabs-nav:after{
display:block;
clear:both;
content:"";
}
.ui-tabs-navli{
float:left;
margin:0001px;
min-width:84px;
}
.ui-tabs-nava,.ui-tabs-navaspan{
display:block;
padding:010px;
background:url(tab.png)no-repeat;
}
.ui-tabs-nava{
margin:1px00;
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-selecteda{
position:relative;
top:1px;
z-index:2;
margin-top:0;
color:#000;
}
.ui-tabs-navaspan{
width:64px;
min-width:64px;
height:18px;
min-height:18px;
padding-top:6px;
padding-right:0;
}
*>.ui-tabs-navaspan{
width:auto;
height:auto;
}
.ui-tabs-nav.ui-tabs-selectedaspan{
padding-bottom:1px;
}
.ui-tabs-nav.ui-tabs-selecteda,.ui-tabs-nava:hover,.ui-tabs-nava:focus,.ui-tabs-nava:active{
background-position:100%-150px;
}
.ui-tabs-nava,.ui-tabs-nav.ui-tabs-disableda:hover,.ui-tabs-nav.ui-tabs-disableda:focus,.ui-tabs-nav.ui-tabs-disableda:active{
background-position:100%-100px;
}
.ui-tabs-nav.ui-tabs-selectedaspan,.ui-tabs-nava:hoverspan,.ui-tabs-nava:focusspan,.ui-tabs-nava:activespan{
background-position:0-50px;
}
.ui-tabs-navaspan,.ui-tabs-nav.ui-tabs-disableda:hoverspan,.ui-tabs-nav.ui-tabs-disableda:focusspan,.ui-tabs-nav.ui-tabs-disableda:activespan{
background-position:00;
}
.ui-tabs-nav.ui-tabs-selecteda:link,.ui-tabs-nav.ui-tabs-selecteda:visited,.ui-tabs-nav.ui-tabs-disableda:link,.ui-tabs-nav.ui-tabs-disableda:visited{/*@Opera,usepseudoclassesotherwiseitconfusescursor*/
cursor:text;
}
.ui-tabs-nava:hover,.ui-tabs-nava:focus,.ui-tabs-nava:active,
.ui-tabs-nav.ui-tabs-unselecta:hover,.ui-tabs-nav.ui-tabs-unselecta:focus,.ui-tabs-nav.ui-tabs-unselecta:active{/*@Opera,weneedtobeexplicitagainherenow*/
cursor:pointer;
}
.ui-tabs-disabled{
opacity:.4;
filter:alpha(opacity=40);
}
.ui-tabs-panel{
border-top:1pxsolid#97a5b0;
padding:1em8px;
background:#fff;
}
.ui-tabs-loadingem{
padding:00020px;
background:url(loading.gif)no-repeat050%;
}

*html.ui-tabs-nav{
display:inline-block;
}
*:first-child+html.ui-tabs-nav{
display:inline-block;
}


</style>

其中的ui.tabs.pack.js

Accordion

手风琴效果，大家应该很熟悉。

效果：点击这里查看效果

Html代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><divclass="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>
&nbsp;</p>
</div>
<a>Jquery-accordion分页Three</a
<div><p>
很不很不错的Jquery-accordion插件。</p>
</div>
</div>

css和jQuery代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><scripttype="text/javascript"src="js/jquery.easing.js"></script>
<scripttype="text/javascript"src="js/jquery-latest.pack.js"></script>
<scripttype="text/javascript"src="js/jquery.accordion.js"></script>
<scripttype="text/javascript">
$().ready(function(){
$('#list1a').accordion();
});
</script>
<styletype="text/css">
*{margin:0;padding:0;}
html,body,#main{height:100%}
.basic{
width:260px;
border:1pxsolidblack;
}
.basicdiv{
background-color:#eee;
}

.basicp{
margin-bottom:10px;
border:none;
text-decoration:none;
font-weight:bold;
font-size:13px;
margin:0px;
padding:10px;
}
.basica{
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:1pxsolid#FFFFFF;
border-bottom:1pxsolid#999;

}



@mediaprint{
.basicdiv,#navigationul,#list2dd,#list3div{
display:block!important;
height:auto!important
}
}
</style>

其中的jquery.accordion.js当然，大家可以制作更炫酷漂亮的效果。

Round

有的时候我们希望页面中的Div实现圆角的效果，Jquery可以很好的满足我们。

效果：点击这里查看效果

Html代码：

<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --> < DIV id =main >
< DIV class =demo id ="corner1" >
< H1 > Round </ H1 >
< P > HelloWorld!! </ P ></ DIV >


< DIV class =demo id ="corner2" >
< H1 > Round </ H1 >
< P > HelloWorld!! </ P ></ DIV >
</ DIV >

css和jQuery代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><scripttype="text/javascript"src="jquery-latest.pack.js"></script>
<scripttype="text/javascript"src="jquery.corner.js"></script>
<STYLEtype=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>

<scripttype="text/javascript">
$(function(){
$("#corner1").corner();
$("#corner2").corner();
});
</script>

其中的jquery.corner.js。这样就能够实现Div的圆角效果。

Dialog

简单的实现在网页中弹出对话框。

效果：点击这里查看效果

Html代码：

Code
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><divid='basicModal'><h2>jQuery对话框</h2>
<inputtype='button'name='basic'value='Demo'class='basicdemo'/><br/>
&nbsp;</div>
<divid="basicModalContent"style='display:none'>
<p>Hello,这就是简单的jQueryDemo.可以做一个登陆界面。注册界面..</p>

<inputid="Text1"type="text"