(jntabs.js v1.2)js最近做一个tabs切换的,需要嵌套,共享之(新支持异步事件)
d
//jntabs.js说明 // v1.2, 2018.1.4, ijunxiong@126.com ,最近的tabs需要嵌套,做了一个,共享之 // 还需要改:提取出更多的共用成员, // // 引用:jquery, (注: demo使用jquery-1.7.2.min.js) // 名词:标头,标体,标头集合,标体集合 // // 基于标签自定义属性 hrel, brel 及样式 tabActive(样式可改,但需同改js) // 标头,有自定义属性 hrel;标体,有自定义属性 brel; // 标头,使用 tabActive,改变当前样式;标体,使用 style="display:[none]"显示|隐藏 // (重要)hrel/brel含义: 类名-尾串 // 格式说明[类名]: 字母数字下划线 // 格式说明[尾串] 字母数字下划线 // // 特殊说明 // 1.可以多嵌套,使用不同类名即可 // 2.不限定结构,可以跨层级等 // // 使用说明 // 1.一个hrel,对应一个brel,如 hrel="f77-1" 对应 brel="f77-1" // 2.hrel的减号前的串,为类名,在初始化时,需要用到,如(function () { new jntabs("f77"); })(); // 3.不使用,(function () {})();直接写 new jntabs("f77"); 初始化可以吗? 可以,风格的区别 // 4.tabActive可以改吗?可以,var cssTabActive = "tabActive"; 在这句改, // //settings={ // cur: 0, // enter: function(jqobj, hrels, brels, index){ } //} // function jntabs(classid, settings) { settings = settings || {}; var parr = ["cssTabActive", "cur", "enter", "leave"]; //var parr = ["cur", "start", "enter1", "enter2", "leave1"]; var cssTabActive = settings[parr[0]] || "tabActive"; //var cur = settings[parr[0]] || -1;//cur未设置,则检查有没有tabActive的样式,有就为当前 var cur = settings[parr[1]] || -1;//cur未设置,则检查有没有tabActive的样式,有就为当前 //var fn_start = settings[parr[1]] || null; //var fn_enter1 = settings[parr[2]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前 //var fn_enter2 = settings[parr[3]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前 var fn_enter2 = settings[parr[2]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前 //var fn_leave1 = settings[parr[4]] || null; var fn_leave2 = settings[parr[3]] || null; var hrels = $("*[hrel^='" + classid + "-']"); var brels = $("*[brel^='" + classid + "-']"); if (cur == -1) hrels.each(function (i) { if ($(this).hasClass(cssTabActive)) cur = i; }); cur = cur == -1 ? 0 : cur;//还是-1,则为0标签显示 var tabEnter = function (setIndexShow) {//setIndexShow参数可能是事件或数字,事件就是当前控件,数字就是下标 var o0 = this; var xindex = -1; //三种,如果未传入,传入数字,传入事件//传入事件是不需要的,因为有了this if (typeof (setIndexShow) == "undefined") xindex = -1; else if (!isNaN(setIndexShow)) xindex = setIndexShow; hrels.each(function (i) { var jqobj = $(this); var flag = xindex == -1 ? o0 == this : i == xindex; var hrel = jqobj.attr("hrel"); if (flag) { jqobj.addClass(cssTabActive); //if (fn_enter1 != null) fn_enter1($(this), hrels, brels, i); brels.filter("[brel='" + hrel + "']").css("display", ""); if (fn_enter2 != null) fn_enter2(jqobj, hrels, brels, i); } else { jqobj.removeClass(cssTabActive); if (fn_leave2 != null) fn_leave2(jqobj, hrels, brels, i); brels.filter("[brel='" + hrel + "']").css("display", "none"); } }); } tabEnter(cur); hrels.each(function (i) { $(this).click(tabEnter); }); }
d
调用:
<script> jntabs44 = new jntabs("tab44", { "cur": 2, "enter": function (jqobj, hrels, brels, index) { //这里定义进入tab需做的处理 } }); </script> html部分,参考之前的写的,tabs切换
d