113 lines
4.0 KiB
JavaScript
113 lines
4.0 KiB
JavaScript
|
appcan.define("tab", function($, exports, module) {
|
||
|
|
var model_tab = '<div class="ulev-1 ub ub-f1" data-index="<%=index%>">\
|
||
|
|
<div class="ub-f1 ub ub-ver item ub-ac sc-text-tab">\
|
||
|
|
<%if(option.hasIcon){%><div class="ub-f1 fa <%=data.icon%> fa-2x tx-c"></div><%}%>\
|
||
|
|
<%if(option.hasLabel){%><div class="ulev tx-c"><%=data.label%></div><%}%>\
|
||
|
|
</div>\
|
||
|
|
<%if(option.hasBadge && data.badge){%><div class="ulev bc-text-head sc-bg-alert tab_badge" id="<%="badge_"+index%>"><%=data.badge%></div><%}%>\
|
||
|
|
</div>';
|
||
|
|
|
||
|
|
var tabViewTmp = appcan.view.template(model_tab);
|
||
|
|
function TabView(option) {
|
||
|
|
appcan.extend(this, appcan.eventEmitter);
|
||
|
|
var self = this;
|
||
|
|
self.option = $.extend({
|
||
|
|
selector : null,
|
||
|
|
hasIcon : true,
|
||
|
|
hasLabel : true,
|
||
|
|
hasAnim : true,
|
||
|
|
hasBadge : true,
|
||
|
|
itemName : "TAB" + parseInt(Math.random() * 10),
|
||
|
|
index : 0
|
||
|
|
}, option, true);
|
||
|
|
if (!self.option.selector || !self.option.data)
|
||
|
|
return;
|
||
|
|
self.ele = $(self.option.selector);
|
||
|
|
|
||
|
|
if (self.option.data) {
|
||
|
|
self.set(self.option.data, self.option.index);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
TabView.prototype = {
|
||
|
|
focusAnim : function(index,container) {
|
||
|
|
var self = this;
|
||
|
|
if (self.option.hasAnim) {
|
||
|
|
var s = window.getComputedStyle(self.ele[0], null);
|
||
|
|
var width = parseInt(parseInt(s.width) / self.itemCount);
|
||
|
|
self.focus = self.focus || $('<div class="focus utra bc-head"></div>');
|
||
|
|
self.focus.css("width", width);
|
||
|
|
self.focus.css("-webkit-transform", "translateX("+index * width+"px)");
|
||
|
|
if (container){
|
||
|
|
container.append(self.focus);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
focusText:function(index){
|
||
|
|
var self = this;
|
||
|
|
if (self.option.hasAnim && self.option.hasIcon && self.option.hasLabel){
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
var items=$(".item",self.ele);
|
||
|
|
if(items.length)
|
||
|
|
{
|
||
|
|
items.removeClass("sc-text-active");
|
||
|
|
$(items[index]).addClass("sc-text-active");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
set : function(data, index) {
|
||
|
|
var self = this;
|
||
|
|
self.itemCount = data.length;
|
||
|
|
if (self.focus)
|
||
|
|
self.focus = null;
|
||
|
|
self.ele.empty();
|
||
|
|
var container = $('<div class="uf t-bla ub" ></div>');
|
||
|
|
if(self.option.hasIcon && self.option.hasLabel){
|
||
|
|
container.addClass("tab_m");
|
||
|
|
}
|
||
|
|
else if(self.option.hasLabel){
|
||
|
|
container.addClass("tab_l");
|
||
|
|
}
|
||
|
|
else if(self.option.hasIcon){
|
||
|
|
container.addClass("tab_i");
|
||
|
|
}
|
||
|
|
self.focusAnim(index,container);
|
||
|
|
for (var i in data) {
|
||
|
|
var ele = $(tabViewTmp({
|
||
|
|
data : data[i],
|
||
|
|
option : self.option,
|
||
|
|
index : i
|
||
|
|
}));
|
||
|
|
ele.on('tap', function(evt) {
|
||
|
|
self.itemClick(evt)
|
||
|
|
});
|
||
|
|
container.append(ele);
|
||
|
|
}
|
||
|
|
self.ele.append(container);
|
||
|
|
self.focusText(index);
|
||
|
|
return self;
|
||
|
|
},
|
||
|
|
badge : function(index, count) {
|
||
|
|
$("#badge_" + index, self.ele).html(count);
|
||
|
|
},
|
||
|
|
itemClick : function(evt) {
|
||
|
|
var self = this;
|
||
|
|
var obj = $(evt.currentTarget);
|
||
|
|
var index = parseInt(obj.attr("data-index"));
|
||
|
|
self.focusAnim(index);
|
||
|
|
self.focusText(index);
|
||
|
|
this.emit("click", this, obj, index);
|
||
|
|
},
|
||
|
|
moveTo:function(index){
|
||
|
|
var self = this;
|
||
|
|
self.focusAnim(index);
|
||
|
|
self.focusText(index);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
module.exports = function(option) {
|
||
|
|
return new TabView(option);
|
||
|
|
};
|
||
|
|
});
|