学习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:10px
0;
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.jsjquery.lavalamp.jsjquery.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:1em
01.5em;
font
-size:18px;
}
h2{
margin:2em
01.5em;
font
-size:16px;
}
pre,pre
+p,p+p{
margin:1em
00;
}
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:1px
00;
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"<sp
分享到:
评论

你可能感兴趣的:(JavaScript,jquery,UI,css,Opera)