• 基于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>

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

  • 相关阅读:
    【Azure 应用服务】在Azure App Service多实例的情况下,如何在应用中通过代码获取到实例名(Instance ID)呢?
    【Azure 应用服务】App Service For Windows 中如何设置代理实现前端静态文件和后端Java Spring Boot Jar包
    【Azure Developer】使用Azure Key Vault 的Key签名后,离线验证的一些参考资料
    【Azure Function】调试 VS Code Javascript Function本地不能运行,报错 Value cannot be null. (Parameter 'provider')问题
    【Azure 应用服务】App Service 使用Tomcat运行Java应用,如何设置前端网页缓存的相应参数呢(Xms512m Xmx1204m)?
    【Azure API 管理】APIM添加Logtoeventhub的策略后,一些相关APIM与Event Hub的问题
    【Azure API 管理】为调用APIM的请求启用Trace 调试APIM Policy的利器
    【Azure 事件中心】China Azure上是否有Kafka服务简答
    【Azure 应用服务】探索在Azure上设置禁止任何人访问App Service的默认域名(Default URL)
    【Azure 微服务】记一次错误的更新Service Fabric 证书而引发的集群崩溃而只能重建
  • 原文地址:https://www.cnblogs.com/58img/p/3749505.html
Copyright © 2020-2023  润新知