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

最新推荐文章于 2024-08-12 22:28:07 发布

weixin_34255793

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量74

点赞数

文章标签： javascript ui ViewUI

前两篇文章中，介绍了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='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的插件深受大家的喜爱和好评，的确给我们的开发带来了不少便捷和绚丽的效果，这里就不多介绍了，大家可以到下面的地址中去继续体验。

http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/

http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html

weixin_34255793

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jQuery之旅--使用炫酷的jQuery插件

.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...
复制链接

扫一扫