学习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>

其中的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>

其中的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>

css和jQuery代码：

Code
<script type="text/javascript" src='http://files.cnblogs.com/gaoweipeng/jquery-latest.pack.js'></script>
    <script type="text/javascript" src='http://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

转载于:https://www.cnblogs.com/gaoweipeng/archive/2009/06/10/1498741.html

学习jQuery之旅--使用炫酷的jQuery插件相关推荐

html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效
这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效,不仅效果很酷,而且能以 ...
8个超炫酷的jQuery相册插件欣赏
在网页中,相册应用十分常见,如果你经常逛一些社交网站,那么你应该会注意到很多各式各样的网页相册应用.今天我们要来分享一些最新收集的jQuery相册插件,这些精美的jQuery相册插件可以帮助你快速搭建 ...
炫酷的jQuery手风琴图片和菜单插件及源码
手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一.今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧. 1. ...
10个非常炫酷的jQuery相册动画赏析
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...
html5下拉幻灯片插件,基于WebGL的炫酷2D幻灯片插件
GLSlideshow.js是一款基于WebGL的炫酷2D幻灯片插件.该幻灯片支持多种过渡效果:波浪效果,立方体效果,风吹效果等.在旧的IE浏览器中它会自动回退为2D Canvas来显示幻灯片. 使用 ...
jQuery/CSS3炫酷动画效果插件 animate
jQuery是一款很强大的JavaScript框架,本文介绍的9个应用插件很多都是基于jQuery的,另外,CSS3的应用让这些插件增添了不少光彩,特别是第一个动画插件Animate.css非常实用, ...
jQuery仿真翻书炫酷翻页动画插件
下载地址booklet的一款jQuery仿真杂志翻页动画插件,看起来很炫酷的翻书效果. dd:
『HTML5梦幻之旅』 - 炫酷的节日贺卡
刚过完春节,想必大家收到了各种祝福和贺卡吧-Y某我今年也为同学和家人准备了贺卡.不一样的是,我的贺卡可不是made from树,而是一行行代码凝聚而来的. 考虑到本次开发需要的功能不多,所以就没有用库 ...
html炫酷在线,程序猿必备的10款超炫酷HTML5 Canvas插件
1.超炫酷HTML5 Canvas 3D旋转地球动画这是一款基于HTML5 Canvas的3D地球模拟动画,动画以太空作为背景,地球在太空中旋转,同时我们也可以拖拽鼠标来从不同的角度观察地球.另外我 ...

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

学习jQuery之旅--使用炫酷的jQuery插件相关推荐

最新文章

热门文章