iTabs Tab切換外掛程式

標籤：style   blog   http   color   java   使用   os   io   

最近項目中使用到Tab切換，切換的頁面不變，內容發生變化，隨手寫了份簡單的外掛程式，附帶源碼。先看樣子：

本人也考慮到是否使用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);});