码迷,mamicode.com
首页 > 其他好文 > 详细

iTabs Tab切换插件

时间:2014-08-06 17:48:31      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   使用   os   io   

最近项目中使用到Tab切换,切换的页面不变,内容发生变化,随手写了份简单的插件,附带源码。先看样子:

bubuko.com,布布扣

本人也考虑到是否使用jquery ui tab,但是还是热衷于自己写一份,首先好处之一是易于培训,要培训整个jquery ui还是比较累的。

源码很简单,只是为上面的dom树绑定了点击事件而已。

源码如下:

/**
 *  JQuery Tabs
 *  created by oShine
 */
(function ($) {

    var Tabs = function (dom, events) {
        this.dom = dom;
        this.events = events;

        this.init();
    };

    Tabs.prototype = {
        init: function () {
            this.bindEvent();
            $(this.dom).find(".tags >ul li a.selected").trigger("click");
        },
        bindEvent: function () {

            var self = this;

            $(this.dom).find(".tags >ul li a").click(function (event) {

                $(self.dom).find(".tags >ul li a.selected").removeClass("selected");
                $(this).addClass("selected");

                $(self.dom).find(".filter").hide();
                if ($(this).attr("data-filter") !== undefined) {
                    $(self.dom).find($(this).attr("data-filter")).show();
                }

                var fn = $(this).attr("data-fun") !== undefined && typeof self.events[$(this).attr("data-fun")] == "function" ? self.events[$(this).attr("data-fun")] : undefined;
                var ajaxUrl = $(this).attr(‘data-url‘) !== undefined ? $(this).attr(‘data-url‘) : undefined;
                if (fn && ajaxUrl) {

                    $.get(ajaxUrl, {}, function (resp) {
                        $(self.dom).find(".content").html(resp);
                        fn($(self.dom));
                    });

                } else if (fn) {
                    fn($(self.dom));

                } else if (ajaxUrl) {
                    $.get(ajaxUrl, {}, function (resp) {
                        $(self.dom).find(".content").html(resp);
                    });
                } else {
                    console.log("no function");
                }

                return false;
            });

        }
    };

    $.fn.extend({
        iTabs: function (events) {
            var iTabs = new Tabs($(this), events);
            return iTabs;
        }
    });

})($);

 

应用如下:

<div class="nav tab-container">
    <div class="tab-header">
        <div class="tags">
            <ul>
                <li class="back-header">
                    <a class="back-btn" data-fun="back" href="javascript:void(0)"></a>                </li>
                <li>
                    <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/custom/update&amp;id=6927" data-fun="updateCustom" href="javascript:void(0)">1 &nbsp; 详细信息</a>                </li>
                <li>
                    <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/quoted/services&amp;id=6927" data-fun="quotedServices" href="javascript:void(0)">2 &nbsp; 服务报价单</a>                </li>
                <li>
                    <a class="" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/services&amp;id=6927" data-fun="createContract" href="javascript:void(0)">3 &nbsp; 生成合同</a>                </li>
                <li>
                    <a class="selected" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/contract/upload&amp;id=6927" data-fun="uploadContract" href="javascript:void(0)">4 &nbsp; 上传合同</a>                </li>
                <li>
                    <a class="shop-add" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/custom/addShop&amp;id=6927" data-fun="createShop" href="javascript:void(0)">5 &nbsp; 添加店铺</a>                </li>
                <li>
                    <a class="order-send" data-url="/oa/branches/v2.0.0.0/index.php?r=sales/argumentProducer/order&amp;id=6927" data-fun="sendOrder" href="javascript:void(0)">6 &nbsp; 发送工单</a>                </li>
            </ul>
        </div>
    </div>
    <div class="tab-content">
        <div class="content">
        </div>
    </div>
</div>

看到每一个a上面有 data-url和data-fun的属性没有,该插件就是有一个好处,如果有 data-url的属性会ajax请求该url,并把内容填充到content 元素中,再执行data-fun定义的js function。

js如下:

$(document).ready(function(){
    var config = {};
    config.sendOrder = function(){};
    .....
    $(".tab-container").iTabs(config);
});

 

iTabs Tab切换插件,布布扣,bubuko.com

iTabs Tab切换插件

标签:style   blog   http   color   java   使用   os   io   

原文地址:http://www.cnblogs.com/oshine/p/3894920.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!