tab.js
2.63 KB
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
var $ = require('jquery'),
util = require('./util');
var tab = function(options) {
var defaults = {
innerHtml: '<ul class="nav nav-pills"></ul>'
};
this.options = $.extend({}, defaults, options);
$(options.el).html(this.options.innerHtml);
this.tab = $("ul", options.el);
this.active = undefined; //undefined==void(0)
return this;
}
tab.prototype = {
constructor: tab,
init: function(data) {
var g = this,
p = this.options;
$(this.tab).html("");
var pattern = /tab=.*?(?=&&)/gi,
tab = pattern.exec(location.hash),
index = null;
if (tab instanceof Array) {
tab = tab[0];
index = tab.split('=')[1];
}
g.index = index;
g.active = index;
this.render(data);
p._init && p._init(g.active);
this.bind(p.click);
return this;
},
bind: function(callback) {
var g = this,
p = this.options;
$(p.el).off("click", "li");
$(p.el).on("click", "li", function() {
$(this).addClass('active').siblings().removeClass('active');
g.active = $(this).find("a").attr("columnname");
g.key = $(this).find("a").attr("key");
g.value = $(this).find("a").attr("value");
g.__index__ = $(this).index();
this._init = p._init;
callback && callback.call(this);
});
},
render: function(data) {
var g = this,
p = this.options;
var lis = [];
var hasActive = false;
$(p.columns).each(function(i, column) {
var li = $("<li></li>");
var a = $("<a href='javascript:void(0);'></a>");
if (g.index && i == g.index) {
li = $('<li class="active"></li>');
}else if(!g.index && column.active) {
li = $('<li class="active"></li>');
g.index = i;
g.active = i;
if (column.key) g.key = column.key;
if (column.value) g.value = column.value;
$.each(column, function(key,value) {
if(key != "index" && key != "active" && key != "name" && key != "display") {
g[key] = value;
}
});
hasActive = true;
}else if (!g.index && !hasActive && column.name == 'all') {
li = $('<li class="active"></li>');
}
if (column.name) a.attr({
columnname: column.name
});
$.each(column, function(key,value) {
if(key != "index" && key != "active" && key != "name" && key != "display") {
a.attr(key, value);
}
});
var h_t = column.display || "";
a.html(h_t);
li.append(a);
g.tab.append(li);
});
g.__tab = g.tab.html();
g.tab.html(util.__template(g.tab.html(), data || {}));
},
load: function(data) {
var g = this,
p = this.options;
g.tab.html(util.__template(g.__tab, data || {}));
if (g.__index__ != undefined) {
$('li',p.el).removeClass('active');
$('li',p.el).eq(g.__index__).addClass('active');
}
}
}
module.exports = tab;