• 基于jQuery UI的tabs选项卡美化


    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习来解决此问题,但对于后台程序员或者只是简单使用的人员来说,这个就会很影响开发效率了!

    其实jQuery团队已经为大家解决了这个问题,只是很多同学没发布而已,jQuery团队基于jQuery打造了一套功能强大的UI框架——jQuery UI.经过长期的改进完善,jQuery UI已经拥有了很多常用和实用的功能。我们只需要利用好jQuery UI就可以快速得到想要的效果,而无须写JS也不用担心性能问题。

    对于jQuery UI很多人觉得其很臃肿,并且很丑陋。

    我个人看法如下:相对jQuery UI拥有的强大功能和灵活的自定义选项,其并不显得臃肿,而且算精简的了,样式虽然不是很美观,但可以定义,所以这个问题基本可忽略。如果有同学经常上国外的站点,就会发现约60%以上的网站都会引用jquery uI.

    扯了这么多,就是想告诉大家jQuery UI其实很优秀,要善于利用!今天我基于jQuery UI自定义了一个tabs选项卡样式!效果是仿的,以后多弄一些漂亮的样式供大家直接使用!

    效果图如下:

    在线DEMO

    示例完整代码:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta content="utf-8" />
        <title>jQuery UI Tabs 选项卡美化</title>
        <style type="text/css">
            body {background-color: #655c89;font-size: 14px;font-family: "Microsoft Yahei","Tahoma","SimSun";}
            /*tabs*/
            #tabs{width:500px;margin:0 auto;}
            #tabs ul{margin:0;padding:0;display:table;width:100%;}
            #tabs ul li{float:left;list-style-type:none;margin-right:2px;}
            #tabs ul li a {display: block;padding: 17px 30px;background: #544f6b;text-decoration: none;color: #8478B3;}
            #tabs ul li.ui-tabs-active a {background:#fff;color: #655c89;outline:none;}
            #tabs-1, #tabs-2, #tabs-3 {padding: 40px;overflow: hidden;position: relative;background: #fff;}
            /*tabs2*/
            #tabs2 {width: 500px;margin: 30px auto 0 auto;}
            #tabs2 ul {margin: 0;padding: 0;display: table;width: 100%;}
            #tabs2 ul li {float: left;list-style-type: none;margin-right: 2px;}
            #tabs2 ul li a {display: block;padding: 17px 30px;background: #544f6b;text-decoration: none;color: #8478B3;}
            #tabs2 ul li.ui-tabs-active a {background: #fff;color: #655c89;outline: none;}
            #tabs-4, #tabs-5, #tabs-6 {padding: 40px;overflow: hidden;position: relative;background: #fff;}
            .copyright {width: 500px;margin: 0 auto;padding: 20px 0;text-align: center;color: #8478B3;}
            .copyright a{color:#8478B3;display:inline-block;padding:0 5px;text-decoration:none;}
        </style>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#tabs").tabs();
                $("#tabs2").tabs({
                    event: "mouseover"
                });
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">宝贝详情</a></li>
                <li><a href="#tabs-2">累计评论</a></li>
                <li><a href="#tabs-3">成交记录</a></li>
            </ul>
            <div id="tabs-1">
                <p>翻开一本书,还没有看两眼,就站了起来。在外边走了一圈,又回来坐下看书,没看几分钟,又站了起来。就这样,循环反复了不知多少次,最后终于毅然决然地将书合上,开始发呆。这个时候脑子里什么都不愿意想,就是想保持这个状态很久,也不知道过了多久,突然心情一下子舒畅了起来,于是才能静下心来开始看书。</p>
            </div>
            <div id="tabs-2">
                <p>不知怎么,最近总是看不进去书,一看书,就会感觉心里发痒,总是想干那些自己比较喜欢的浪费时间的事情。很多时候,明明知道要赶紧把手头的东西做完,可是就是这样一直拖着,拖到最后,果真如同学所说:本来需要一个礼拜的事情,结果却是仅用一天完成,甚至更短。这不并不是说自己有多么智商高抑或是高创造性思维,只是缘于惰性使然。</p>
            </div>
            <div id="tabs-3">
                <p>惰性,首先来源于自己的不喜欢,亦或是不感兴趣。生活中,往往有很多名人会让你去做自己感兴趣的事情,自己擅长的事情,他们说这样你才能有所作为。听了这么多年,我依然对此深信不疑。可是问题是,更多的身边人会告诉我:人这一辈子能够将兴趣与工作统一的人少之又少,所以还是做好工作,兴趣也就是辅助性的东西,闲暇之余可以玩玩。我不是一个超级现实主义者,但是这些年的感触和他们一样:理想很丰满,现实很骨感。</p>
                <p>惰性,其次来源于没有动力源泉。这就相当于一台机器没有发动机,怎么也转动不起来。想让一个小孩亲你一下,给他点好吃的零食就可以办到,可是现在的我早已不是小孩,什么美食都吊不起胃口,仿然也对什么东西都不感冒。谁都知道,看一些无用的书,做一些无用的事,也许用处自然就会来到。可是这话也就只能够说说,“无利不起早”的时代,能够做到如此的人能有几个,要么是闲人,要么是圣人。</p>
            </div>
        </div>
        <div id="tabs2">
            <ul>
                <li><a href="#tabs-4">宝贝详情</a></li>
                <li><a href="#tabs-5">累计评论</a></li>
                <li><a href="#tabs-6">成交记录</a></li>
            </ul>
            <div id="tabs-4">
                <p>翻开一本书,还没有看两眼,就站了起来。在外边走了一圈,又回来坐下看书,没看几分钟,又站了起来。就这样,循环反复了不知多少次,最后终于毅然决然地将书合上,开始发呆。这个时候脑子里什么都不愿意想,就是想保持这个状态很久,也不知道过了多久,突然心情一下子舒畅了起来,于是才能静下心来开始看书。</p>
            </div>
            <div id="tabs-5">
                <p>不知怎么,最近总是看不进去书,一看书,就会感觉心里发痒,总是想干那些自己比较喜欢的浪费时间的事情。很多时候,明明知道要赶紧把手头的东西做完,可是就是这样一直拖着,拖到最后,果真如同学所说:本来需要一个礼拜的事情,结果却是仅用一天完成,甚至更短。这不并不是说自己有多么智商高抑或是高创造性思维,只是缘于惰性使然。</p>
            </div>
            <div id="tabs-6">
                <p>惰性,首先来源于自己的不喜欢,亦或是不感兴趣。生活中,往往有很多名人会让你去做自己感兴趣的事情,自己擅长的事情,他们说这样你才能有所作为。听了这么多年,我依然对此深信不疑。可是问题是,更多的身边人会告诉我:人这一辈子能够将兴趣与工作统一的人少之又少,所以还是做好工作,兴趣也就是辅助性的东西,闲暇之余可以玩玩。我不是一个超级现实主义者,但是这些年的感触和他们一样:理想很丰满,现实很骨感。</p>
                <p>惰性,其次来源于没有动力源泉。这就相当于一台机器没有发动机,怎么也转动不起来。想让一个小孩亲你一下,给他点好吃的零食就可以办到,可是现在的我早已不是小孩,什么美食都吊不起胃口,仿然也对什么东西都不感冒。谁都知道,看一些无用的书,做一些无用的事,也许用处自然就会来到。可是这话也就只能够说说,“无利不起早”的时代,能够做到如此的人能有几个,要么是闲人,要么是圣人。</p>
            </div>
        </div>
        <div class="copyright">本示例由<a href="http://www.58img.com/">WEB前端资源网</a>发布,作者:風塵</div>
    </body>
    </html>

    如果有问题或建议可直接留言交流!

  • 相关阅读:
    【mysql优化1】表的优化与列类型选择
    mysql 各数据类型的 大小及长度
    android如何建立数据库。(如何重写SQLiteOpenHelper)
    PHP中统计目录中文件以及目录中目录的大小
    如何下载coursera视频
    JAVAEE filter总结
    zookeeper安装
    如何从硬盘安装fedora 19 (How to install fedora 19 from hard drive, Fedora-19-i386-DVD.iso)
    WCF 项目应用连载[3]
    POJ1184-------操作分离的BFS
  • 原文地址:https://www.cnblogs.com/58img/p/3749505.html
Copyright © 2020-2023  润新知