前言
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 代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
| (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_tab_content.push("");
$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(); $("#"+tabId).parent().attr("class","active");
}
} })(jQuery, window, undefined);
$(document).ready(function () { $("#myTab").ajaxTab(); });
|
url 定位tab
前面的jquery ajaxTab 已经提供了接口 只需要传入参数即可
1 2
| var t = window.location.href.split("#"); $("#myTab").ajaxTab(t[1]);
|
例如:http://w/uauc/uaucms/admin/?m=apps&a=view&id=fddy#**app**
直接定位到 seoword 栏目
高清无码演示