uaucms 开发日志: 基于bootstrap的ajax加载和可url定位tab插件制作

前言

uaucms 后台采用bootstrap 构架 ,web 2.0 肯定少不了 ajax tab ,但是现有的 bootstrap tab 有两个缺点,一是不支持ajax,二是不能通过url直接定位某个页面。

插件编写

ajax支持

google 了一下 找到一个差不多的项目 https://github.com/jcgarciam/bootstrap-tab-ajax/blob/master/bootstrap-tab-ajax.js
移植到uaucms 代码如下

(function ($, window, undefined) {
    $.fn.ajaxTab = function (tabId) {
        var $this = $(this);
        var tbCnt = $this.next("div.tab-content");
        var selector_no_hash = $this.selector.substr(1);
        if (tbCnt.length === 0) {
            var div_tab_content = [];
            div_tab_content.push("<div class='tab-content'>")
            div_tab_content.push("<div class='tab-pane active' id='" + selector_no_hash + "-content'>");
            div_tab_content.push("</div>");
            div_tab_content.push("</div>");

            $this.parent().append(div_tab_content.join(""));
        } else {
            tbCnt.find(".tab-pane").attr("id", selector_no_hash + "-content");
        }
        $this.find("li>a").each(function (idx, el) {
            var $el = $(el);
            var href = $el.attr("href");
            var newHref = href + $this.selector + "-content";
            $el.attr("href", newHref);
        });

        $this.bind("show", function (e) {
            tshow($(e.target));

        });
        function tshow(a){

        	 var href = a.attr("href");
             var hash = href.indexOf("#");
             var target = href.substr(hash);
             href = href.substr(0, hash);

             $.get(href, function (data) {
                $(target).html(data);
             });
        }

         if(tabId === undefined || tabId === "" || tabId === null){

        	tshow($this.find('a:first'));

         }else{

        	 tshow($("#"+tabId));
        	 $this.find('li:first').removeClass();        //去掉原来的默认第一项的class属性
        	 $("#"+tabId).parent().attr("class","active");  //给当前的tab加上 active

         } 

    }
})(jQuery, window, undefined);

$(document).ready(function () {
    $("#myTab").ajaxTab();
});

url 定位tab

前面的jquery ajaxTab 已经提供了接口 只需要传入参数即可

var t = window.location.href.split("#");  //分割url
 $("#myTab").ajaxTab(t[1]);  //传入当前的tab

例如:http://w/uauc/uaucms/admin/?m=apps&a=view&id=fddy# seoword
直接定位到 seoword 栏目

高清无码演示