/********* tab *************/
|
|
var configItems;
|
|
Tab = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
headerArea: null,
|
bodyArea: null,
|
itemHeader: null,
|
itemBody: null,
|
selectedItemHeader: "tab-A-item-selectedHeader",
|
itemText: null,
|
itemImage: null,
|
itemIcon: null,
|
itemCloseBtn: null
|
});
|
|
this.selected = null;
|
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
var template = this.getTemplate("Tab", "container");
|
return template;
|
},
|
|
onCreateContainer: function(container) {
|
container.headerOuter = $("#headerOuter", container);
|
|
var header = container.header = $("#headerArea", container);
|
this.addClass(header, this.config.css.headerArea);
|
header.data("marginLeft", 0);
|
|
header.goLeft = $("#goLeft", container);
|
header.goLeft.click(function() {
|
let headerParentArea = header.parent();
|
let headerParentArea_left = headerParentArea[0].offsetLeft;
|
let headerParentArea_Width = headerParentArea[0].clientWidth;
|
|
let headerArea_left = header[0].offsetLeft;
|
let headerArea_Width = header[0].clientWidth;
|
|
if ((headerArea_left + headerArea_Width) > (headerParentArea_left + headerParentArea_Width) ) {
|
var marginLeft = header.data("marginLeft");
|
marginLeft = marginLeft - 120;
|
header.css({"margin-left": marginLeft + "px"});
|
header.data("marginLeft", marginLeft);
|
}
|
});
|
|
header.goRight = $("#goRight", container);
|
header.goRight.click(function() {
|
/* let headerParentArea = header.parent();
|
let headerParentArea_left = headerParentArea[0].offsetLeft;
|
let headerParentArea_Width = headerParentArea[0].clientWidth;
|
*/
|
let headerArea_left = header[0].offsetLeft;
|
//let headerArea_Width = header[0].clientWidth;
|
|
if (headerArea_left < 0) {
|
var marginLeft = header.data("marginLeft");
|
marginLeft = marginLeft + 120;
|
header.css({"margin-left": marginLeft + "px"});
|
header.data("marginLeft", marginLeft);
|
}
|
});
|
|
var body = container.body = $("#bodyArea", container);
|
this.addClass(body, this.config.css.bodyArea);
|
},
|
|
createItem: function(container, option) {
|
var me = this, config = this.config;
|
|
//0. item
|
var item = {
|
subItems: []
|
};
|
item.id = option.id;
|
|
//1. item header
|
var itemHeader = item.itemHeader = $(this.getTemplate("Tab", "item_header"));
|
this.addClass(itemHeader, config.css.itemHeader);
|
|
/* itemHeader.click(function() {
|
me.setItemSelected(item);
|
}); */
|
itemHeader.unbind("mousedown").bind("contextmenu", function (e) {
|
e.preventDefault();
|
return false;
|
});
|
itemHeader.unbind("mousedown").bind("mousedown", function (event) {
|
if (event.which == 3) {
|
//alert("我单击了右键");
|
//选中界面
|
me.setItemSelected(item);
|
//右键显示小菜单
|
me.shouTabMenu(item);
|
}else if(event.which == 1){
|
//alert("我单击了左键");
|
me.setItemSelected(item);
|
}
|
});
|
|
//2. text
|
var text = itemHeader.text = $("#headerText", itemHeader);
|
this.setText(text, option.text, config.css.itemText);
|
if (option.title) {
|
this.setTitle(text, option.title);
|
}
|
|
//2. image and icon
|
if (option.icon) {
|
var icon = itemHeader.image = $("#headerIcon", itemHeader);
|
this.setIcon(icon, option.icon, config.css.itemIcon);
|
itemHeader.prepend(icon);
|
}
|
|
//3. item close button
|
var closeBtn = itemHeader.closeBtn = $("#closeBtn", itemHeader);
|
this.addClass(closeBtn, config.css.itemCloseBtn);
|
closeBtn.click(function() {
|
me.removeItem(item);
|
//this.deleteItem(item);
|
/* let container = item.itemHeader.parent();
|
item.itemHeader.remove();
|
let children = container.children();
|
let w_ = children[0] ? children[0].offsetWidth + 5 : 0;
|
let width_ = children.length * w_;
|
container.css({"width": width_ + "px"});
|
|
//内容的最左，最右
|
//边框的最左，最右
|
let container_left = container[0].offsetLeft;
|
let container_right = container_left + width_;
|
|
let range = container.parent()
|
let range_left = range[0].offsetLeft;
|
let range_right = range_left + range[0].clientWidth;
|
|
//判断内容的最右侧是否<右边框
|
if (container_right < (range_right - 24)) {//小于
|
//判断内容最左侧是否<左边框
|
if (container_left < 0) {//小于
|
//内容向右移动一格
|
var marginLeft = container.data("marginLeft");
|
marginLeft = marginLeft + 120;
|
container.css({"margin-left": marginLeft + "px"});
|
container.data("marginLeft", marginLeft);
|
}
|
}
|
|
item.itemBody.remove();
|
for (var i = 0; i < configItems.items.length; i++) {
|
var itemA = configItems.items[i];
|
if (itemA.id == item.id) {
|
if (i == 0 && i < configItems.items.length) {
|
configItems.setItemSelected(configItems.items[i+1])
|
} else if (i != 0) {
|
configItems.setItemSelected(configItems.items[i-1])
|
}
|
|
configItems.items.splice(i, 1);
|
|
if (configItems.items.length == 0) {
|
$("#firstPage").css('display','block');
|
}
|
}
|
} */
|
});
|
|
//4. body
|
if (option.url) {
|
var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_iframeBody"));
|
|
|
this.addClass(itemBody, config.css.itemBody);
|
|
var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);
|
|
if (option.minwidth) {
|
itemBody[0].style.overflowX = "auto";
|
itemBody[0].style.overflowY = "hidden";
|
bodyFrame[0].style.minWidth = option.minwidth;
|
}
|
|
util.pageTo(bodyFrame, option.url);
|
}
|
else if (option.element) {
|
var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
|
this.addClass(itemBody, config.css.itemBody);
|
itemBody.append(option.element);
|
}
|
else if (option.contentText) {
|
var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
|
this.addClass(itemBody, config.css.itemBody);
|
itemBody.html(option.text);
|
}
|
else {
|
var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_divBody"));
|
this.addClass(itemBody, config.css.itemBody);
|
}
|
|
return item;
|
},
|
|
createSubItem: function(option) {
|
var item = this.selected;
|
|
if (!item) { return; }
|
|
var subItem = {};
|
/* var itemBody = item.itemBody = $(this.getTemplate("Tab", "item_iframeBody"));
|
this.addClass(itemBody, config.css.itemBody);
|
|
var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);
|
pageTo(bodyFrame, option.url); */
|
|
|
var subbody = subItem.body = $(this.getTemplate("Tab", "item_iframeSubbody"));
|
// this.addClass(body, config.css.itemBody);
|
var subbodyFrame = subbody.bodyFrame = $("#bodyFrame", subbody);
|
|
util.pageTo(subbodyFrame, option.url);
|
item.itemBody.append(subbody);
|
subbodyFrame.animate({"margin-left": 0});
|
|
item.subItems.push(subItem);
|
},
|
|
showSubItem: function(option) {
|
this.createSubItem(option);
|
},
|
|
deleteSubItem: function() {
|
var item = this.selected;
|
|
if (!item) { return; }
|
|
var subItems = item.subItems;
|
if (!subItems.length) { return; }
|
|
var subItem = subItems[subItems.length - 1];
|
|
subItem.body.animate({"margin-left": "-100%"}, {
|
complete: function() {
|
subItem.body.remove();
|
subItems.splice(subItems.length - 1, 1);
|
}
|
});
|
},
|
|
hideSubItem: function() {
|
this.deleteSubItem();
|
},
|
|
attachItem: function(container, item) {
|
//1.1 attach header
|
container.header.append(item.itemHeader);
|
let w_ = item.itemHeader[0].offsetWidth + 5;
|
let children = container.header.children();
|
|
let width_ = children.length * w_;
|
container.header.css({"width": width_ + "px"});
|
container.body.append(item.itemBody);
|
|
//1.2 attach body
|
// var overflow = container.header.width() > container.headerOuter.width();
|
// $.fm.setVisible(container.header.goLeft, overflow);
|
// $.fm.setVisible(container.header.goRight, overflow);
|
},
|
|
deleteItem: function(item) {
|
item.header.remove();
|
item.body.remove();
|
},
|
|
showItem: function(option, isRefresh) {
|
//1. get item
|
if (!option.id) {
|
option.id = this.createSequenceValue("Tab");
|
}
|
|
var item = this.getItemBy("id", option.id);
|
|
if (!item) {
|
item = this.doAddItem(this, this.container, option);
|
}
|
|
//2. select
|
this.setItemSelected(item, isRefresh);
|
},
|
|
open: function(option, isRefresh) {
|
let me = this;
|
me.pageCode = option.page_code;
|
configItems = this;
|
this.showItem(option, isRefresh);
|
if (configItems.container.body[0].children.length > 1) {
|
$("#firstPage").css('display','none');
|
}
|
},
|
|
shouTabMenu: function(item) {
|
var me = this;
|
var isF = false;
|
var menu_this_ = $(".tab-A-item_menu", $("#content"));
|
if (menu_this_) {
|
menu_this_.remove();
|
}
|
//创建右键菜单并设置显示位置
|
var item_menu = item.item_menu = $(this.getTemplate("Tab", "item_menu"));
|
|
var menu_this = $("#menu_this", $(item_menu));
|
var menu_left = $("#menu_left", $(item_menu));
|
var menu_right = $("#menu_right", $(item_menu));
|
|
if(item.itemHeader.prevAll().length < 1) {
|
$(menu_left).empty();
|
}
|
if(item.itemHeader.nextAll().length < 1) {
|
$(menu_right).empty();
|
}
|
|
//获取当前元素
|
var this_sub = item.itemHeader[0];
|
menu_this.click(function() {
|
me.removeItem(item);
|
item_menu.remove();
|
});
|
//获取同级之前的元素
|
menu_left.click(function() {
|
me.removeItemLeft(item);
|
item_menu.remove();
|
});
|
//获取同级之后的元素
|
menu_right.click(function() {
|
me.removeItemRight(item);
|
item_menu.remove();
|
});
|
|
var h_ = this_sub.offsetHeight;
|
var w_ = this_sub.offsetWidth;
|
|
var top_ = this_sub.offsetTop + h_;
|
var left_ = this_sub.offsetLeft + w_;
|
|
var pw_ = document.documentElement.clientWidth / 2;
|
if (left_ > pw_) {
|
left_ = this_sub.offsetLeft;
|
}
|
|
item_menu.css('position','absolute');
|
item_menu.css('top', top_ + "px");
|
item_menu.css('left', left_ + "px");
|
item_menu.css('z-index','100');
|
|
$("#content").append(item_menu);
|
|
setTimeout(function() {
|
if(!isF) {
|
item_menu.remove();
|
}
|
},"5000");
|
},
|
|
removeItem: function(item) {
|
let container = item.itemHeader.parent();
|
item.itemHeader.remove();
|
let children = container.children();
|
let w_ = children[0] ? children[0].offsetWidth + 5 : 0;
|
let width_ = children.length * w_;
|
container.css({"width": width_ + "px"});
|
|
//内容的最左，最右
|
//边框的最左，最右
|
let container_left = container[0].offsetLeft;
|
let container_right = container_left + width_;
|
|
let range = container.parent()
|
let range_left = range[0].offsetLeft;
|
let range_right = range_left + range[0].clientWidth;
|
|
//判断内容的最右侧是否<右边框
|
if (container_right < (range_right - 24)) {//小于
|
//判断内容最左侧是否<左边框
|
if (container_left < 0) {//小于
|
//内容向右移动一格
|
var marginLeft = container.data("marginLeft");
|
marginLeft = marginLeft + 120;
|
container.css({"margin-left": marginLeft + "px"});
|
container.data("marginLeft", marginLeft);
|
}
|
}
|
|
item.itemBody.remove();
|
for (var i = 0; i < configItems.items.length; i++) {
|
var itemA = configItems.items[i];
|
if (itemA.id == item.id) {
|
if (i == 0 && i < configItems.items.length) {
|
configItems.setItemSelected(configItems.items[i+1])
|
} else if (i != 0) {
|
configItems.setItemSelected(configItems.items[i-1])
|
}
|
|
configItems.items.splice(i, 1);
|
|
if (configItems.items.length == 0) {
|
$("#firstPage").css('display','block');
|
}
|
}
|
}
|
|
if(item.option.closecallback) {
|
item.option.closecallback()
|
}
|
|
},
|
|
removeItemLeft: function(item) {
|
this.setItemSelected(item);
|
var prevAll_ = item.itemHeader.prevAll();
|
prevAll_.remove();
|
configItems.items.splice(0, prevAll_.length);
|
},
|
|
removeItemRight: function(item) {
|
this.setItemSelected(item);
|
var nextAll_ = item.itemHeader.nextAll();
|
nextAll_.remove();
|
configItems.items.splice(configItems.items.length - nextAll_.length, nextAll_.length);
|
},
|
|
setItemSelected: function(item, isRefresh) {
|
var old = this.selected;
|
|
if (item == old) {
|
if (isRefresh) {
|
item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
|
}
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-unselect");
|
old.itemBody.hide();
|
if (old.option.isrefresh) {
|
item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
|
}
|
|
}
|
|
if (item) {
|
this.selected = item;
|
this.changeItemCss(item, "item-select");
|
item.itemBody.show();
|
if (isRefresh) {
|
item.itemBody.bodyFrame[0].contentWindow.location.reload(true);
|
}
|
|
}
|
},
|
|
changeItemCss: function(item, event) {
|
var config = this.config, header = item.itemHeader;
|
|
if ("item-select" == event) {
|
this.removeClass(header, config.css.itemHeader);
|
this.addClass(header, config.css.selectedItemHeader);
|
}
|
else if ("item-unselect" == event) {
|
this.removeClass(header, config.css.selectedItemHeader);
|
this.addClass(header, config.css.itemHeader);
|
}
|
}
|
|
});
|
|
|
//*************************************
|
|
Tab_TemplateA = {};
|
Tab_TemplateB = {};
|
|
|
Tab_TemplateA.container = [
|
'<div class="tab-A">',
|
'<div id="headerOuter" class="tab-A-headerOuter">',
|
'<div id="goRight" class="tab-A-goleft el-icon-arrow-left" style= "line-height: 22px"></div>',
|
'<div class="tab-A-header">',
|
'<div id="headerArea" class="tab-A-header-inner"></div>',
|
'</div>',
|
'<div id="goLeft" class="tab-A-goright el-icon-arrow-right" style= "line-height: 22px"></div>',
|
'</div>',
|
'<div id="bodyArea" class="tab-A-body"></div>',
|
'</div>'
|
];
|
|
Tab_TemplateA.item_header = [
|
'<div class="tab-A-item-header">',
|
'<span id="headerIcon" class="tab-A-item-headerImg iconfont" style="font-size: 12px"></span>',
|
'<span id="headerText" ></span>',
|
'<span id="closeBtn" class="closeTab iconfont icon-circleclose" style="font-size: 12px"></span>',
|
'</div>'
|
];
|
|
Tab_TemplateA.item_iframeBody = [
|
'<div style="height: 100%;">',
|
'<iframe id="bodyFrame" class="tab-A-item-iframe"></iframe>',
|
'</div>'
|
];
|
|
Tab_TemplateA.item_iframeSubbody = [
|
'<div style="height: 100%; width: 100%; top: 0; position: fixed; background-color: #a0a0a036;">',
|
'<iframe id="bodyFrame" class="tab-A-subitem-iframe"></iframe>',
|
'</div>'
|
];
|
|
Tab_TemplateA.item_divBody = [
|
'<div class="tab-A-item-div"></div>'
|
];
|
|
Tab_TemplateA.item_menu = [
|
'<div class="tab-A-item_menu">',
|
'<div id="menu_this" class="div_sub">',
|
'<span class="treemenu-A-text-mini">关闭当前</span>',
|
'</div>',
|
'<div id="menu_left" class="div_sub">',
|
'<span class="treemenu-A-text-mini">关闭左侧</span>',
|
'</div>',
|
'<div id="menu_right" class="div_sub">',
|
'<span class="treemenu-A-text-mini">关闭右侧</span>',
|
'</div>',
|
'</div>'
|
];
|
|
|
|
/********* toolbar *************/
|
|
Toolbar = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
this.selectable = config.selectable;
|
this.selectedItem = null;
|
|
config.css = util.combine(config.css, {
|
container: null,
|
item: null,
|
itemSelected: null,
|
itemImage: null,
|
itemIcon: null,
|
itemText: null,
|
itemDown: null
|
});
|
|
Control.call(this, config);
|
},
|
|
getContainerTemplate: function() {
|
var template = this.getTemplate("Toolbar", "container");
|
return template;
|
},
|
|
beforeCreateItems: function(config) {
|
|
},
|
|
addItem: function(option) {
|
this.doAddItem(this, this.container, option, 1);
|
},
|
|
createItem: function(container, option) {
|
var config = this.config; var me = this;
|
|
//1. item
|
var template = this.getTemplate("Toolbar", "item");
|
var item = $(template);
|
|
item.body = $("#body", item);
|
if (!item.body.length) {
|
item.body = item;
|
}
|
|
this.addClass(item.body, config.css.item);
|
|
//2. text
|
var text = item.text = $("#text", item);
|
this.setText(text, option.text, config.css.itemText);
|
|
//3. image and icon
|
var image = item.image = $("#image", item);
|
this.setImage(image, option.image, config.css.itemImage);
|
|
var icon = item.icon = $("#icon", item);
|
this.setIcon(icon, option.icon, config.css.itemIcon);
|
|
//4. click
|
item.click(function() {
|
if (me.selectable) {
|
me.focusItem(item);
|
}
|
|
if (option.action) {
|
var onGet = config.onGet;
|
if (!onGet) {
|
return;
|
}
|
|
Action.exec({
|
operator: option.action,
|
dataName: onGet("dataname"),
|
record: onGet("record"),
|
observer: onGet("observer")
|
});
|
}
|
|
if (option.onSelect) {
|
option.onSelect.call(this, item, option);
|
}
|
});
|
|
//5. link
|
if (option.menu) {
|
this.addDownButton(item);
|
var menu = new PopMenu(option.menu);
|
this.linkControl(item, menu, option.menu);
|
}
|
else if (option.tree) {
|
this.addDownButton(item);
|
var tree = new Tree(option.tree);
|
this.linkControl(item, tree, option.menu);
|
}
|
else if (option.panel) {
|
this.addDownButton(item);
|
var panel = new Panel(option.panel);
|
this.linkControl(item, panel, option.menu);
|
}
|
|
//6标记
|
if(option.z_badge) {
|
var badge = item.badge = $("#badge", item);
|
if (option.id) {
|
badge.attr("id", "badge_" + option.id);
|
}
|
|
this.setBadge(badge, option.z_badge, config.css.itemText);
|
}
|
|
return item;
|
},
|
|
addDownButton: function(item) {
|
var config = this.config;
|
|
var template = this.getTemplate("Toolbar", "item_down");
|
var down = item.down = $(template);
|
this.addClass(down, config.css.itemDown);
|
item.append(down);
|
},
|
|
linkControl: function(item, childCtrl) {
|
var trigger = this.config.trigger || "hover";
|
|
if ("hover" == trigger) {
|
item.mouseenter(function() {
|
childCtrl.setVisible(true);
|
});
|
item.mouseleave(function() {
|
childCtrl.setVisible(false);
|
});
|
}
|
else {
|
item.click(function() {
|
childCtrl.changeVisible();
|
});
|
}
|
|
item.append(childCtrl.container);
|
},
|
|
focusItem: function(item) {
|
if (item.selected) {
|
return;
|
}
|
|
if (this.selectedItem) {
|
this.selectedItem.removeClass(this.config.css.itemSelected);
|
}
|
|
this.selectedItem = item;
|
item.addClass(this.config.css.itemSelected);
|
},
|
|
focusByIndex: function(idx) {
|
var item = this.items[idx];
|
|
if (!item) {
|
return;
|
}
|
|
this.focusItem(item);
|
},
|
|
selectItem: function(item) {
|
item.click();
|
},
|
|
selectByIndex: function(idx) {
|
var item = this.items[idx];
|
this.selectItem(item);
|
}
|
|
});
|
|
|
//*************************************
|
Toolbar_TemplateA = {};
|
Toolbar_TemplateB = {};
|
Toolbar_TemplateC = {};
|
|
|
Toolbar_TemplateA.container = [
|
'<div class="toolbar-A">',
|
'</div>'
|
];
|
|
Toolbar_TemplateA.director = [
|
'<div class="toolbar-A-director"><div>'
|
];
|
|
Toolbar_TemplateA.item = [
|
'<a href="#" class="toolbar-A-btn-outer">',
|
'<span id="body" class="toolbar-A-btn">',
|
'<span id="icon" class="toolbar-A-btn-icon iconfont"></span>',
|
'<span id="text" class="toolbar-A-btn-content"></span>',
|
'</span>',
|
'</a>'
|
];
|
|
//*************************************
|
Toolbar_TemplateB.container = [
|
'<div id="container" class="toolbar-B">'
|
];
|
|
Toolbar_TemplateB.item = [
|
'<div class="toolbar-B-btn" style="left: 0px; width: 110px" >',
|
'<span id="icon" class="iconfont"></span>',
|
'<span id="text" class="toolbar-B-btn-text"></span>',
|
'</div>'
|
];
|
|
Toolbar_TemplateB.item_down = [
|
'<img class="photo-preview">',
|
];
|
|
//*************************************
|
Toolbar_TemplateC.container = [
|
'<div id="container" class="toolbar-C">'
|
];
|
|
Toolbar_TemplateC.item = [
|
'<div class="toolbar-C-btn">',
|
'<div id="icon" class="toolbar-C-btn-icon iconfont"></div>',
|
'<div id="text" class="toolbar-C-btn-text"></div>',
|
'<div id="badge" class="toolbar-C-btn-badge" style="display: none;"></div>',
|
'</div>'
|
];
|
|
Toolbar_TemplateC.item_down = [
|
'<img class="photo-preview">',
|
];
|
|
|
/********* treemenu *************/
|
|
|
TreeMenu = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = util.combine(config.css, {
|
container: null,
|
item: null,
|
openItem: null,
|
selectedItem: "treemenu-A-itemBody",
|
itemArrow : "icon-jiantouarrow486",
|
openItemArrow: "icon-jiantou",
|
icon: null,
|
selectedItemIcon: null
|
});
|
|
this.selected = {};
|
this.itemIndent = 15;
|
|
Control.call(this, config);
|
|
if (config.itemIndex !== undefined) {
|
this.setItemSelected(this.items[0]);
|
}
|
},
|
|
getContainerTemplate: function() {
|
var template = this.getTemplate("TreeMenu", "container");
|
return template;
|
},
|
|
load: function(itemOptions) {
|
this.container.empty();
|
var item_ = "";//返回收首个菜单元素
|
|
item_ = this.createItems(this, this.container, itemOptions, 1, item_);
|
return item_;
|
},
|
|
createItem: function(container, option, level) {
|
var me = this, config = this.config;
|
|
//1. item
|
var template = this.getTemplate("TreeMenu", "item");
|
var item = $(template);
|
|
item.body = $("#body", item);
|
item.body.css({"padding-left": level * this.itemIndent + "px"});
|
this.addClass(item.body, config.css.item);
|
|
//2. text
|
var text = item.text = $("#text", item);
|
this.setText(text, option.text, config.css.itemText);
|
|
//3. image
|
var image = item.image = $("#image", item);
|
this.setImage(image, option.image, config.css.itemImage);
|
|
//4. icon
|
var icon = item.icon = $("#icon", item);
|
this.setIcon(icon, option.icon, config.css.itemIcon);
|
|
//5. sub tree
|
if (option.children) {
|
this.addSubTree(option, item, option.children, level + 1);
|
}
|
|
//6. item click event
|
item.body.click(function() {
|
me.setItemSelected(item);
|
if (me.onSelect) {
|
me.onSelect.call(me, item, option);
|
}
|
});
|
|
//7标记
|
if(option.z_badge) {
|
var badge = item.badge = $("#badge", item);
|
if (option.id) {
|
badge.attr("id", "badge_menu_" + option.id);
|
}
|
this.setBadge(badge, option.z_badge, config.css.itemText);
|
}
|
|
return item;
|
},
|
|
addSubTree: function(option, item, children, level) {
|
var config = this.config;
|
|
//1. arrow icon
|
var arrow = item.arrow = $(this.getTemplate("TreeMenu", "item_arrow"));
|
arrow.addClass(config.css.itemArrow);
|
item.body.append(arrow);
|
|
//2. sub tree
|
var container = item.subContainer = this.createContainer(false);
|
this.createItems(item, container, children, level + 1);
|
item.append(container);
|
},
|
|
setSelectIndex: function(idx) {
|
var item = this.items[idx];
|
this.setItemSelected(item);
|
},
|
|
getSelectOperator: function(item, option) {
|
//1. type
|
if ("leaf" == option.nodetype) {
|
return "select";
|
}
|
else if ("branch" == option.nodetype) {
|
return "open";
|
}
|
|
//2. URL
|
if (option.url) {
|
return "select";
|
}
|
else {
|
return "open";
|
}
|
},
|
|
setItemSelected: function(selected) {
|
if (!selected) { return; }
|
var operator = this.getSelectOperator(selected, selected.option);
|
|
//1. open branch
|
if ("open" == operator) {
|
var old = this.selected.branch;
|
|
if (selected == old) {
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-close");
|
this.selected.branch = null;
|
|
if (old.subContainer) {
|
old.subContainer.hide();
|
}
|
}
|
|
if (selected) {
|
this.changeItemCss(selected, "item-open");
|
this.selected.branch = selected;
|
|
if (selected.subContainer) {
|
selected.subContainer.show();
|
}
|
}
|
}
|
|
//2. select leaf
|
if ("select" == operator) {
|
var old = this.selected.leaf;
|
|
if (selected == old) {
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-unselected");
|
this.selected.leaf = null;
|
}
|
|
if (selected) {
|
this.changeItemCss(selected, "item-selected");
|
this.selected.leaf = selected;
|
|
if (this.onItemSelected) {
|
this.onItemSelected(selected, selected.option);
|
}
|
}
|
}
|
},
|
|
changeItemCss: function(item, event) {
|
var config = this.config;
|
|
//1. branch event
|
if ("item-open" == event && item) {
|
item.body.addClass(config.css.openItem);
|
|
if (item.arrow) {
|
item.arrow.removeClass(config.css.itemArrow);
|
item.arrow.addClass(config.css.openItemArrow);
|
}
|
|
return;
|
}
|
|
if ("item-close" == event && item) {
|
item.body.removeClass(config.css.openItem);
|
|
if (item.arrow) {
|
item.arrow.removeClass(config.css.openItemArrow);
|
item.arrow.addClass(config.css.itemArrow);
|
}
|
|
return;
|
}
|
|
//2. leaf event
|
if ("item-select" == event && item) {
|
item.body.addClass(config.css.selectedItem);
|
|
item.arrow.removeClass(config.css.itemArrow);
|
item.arrow.addClass(config.css.activeItemArrow);
|
|
return;
|
}
|
|
if ("item-unselect" == event && item) {
|
item.body.removeClass(config.css.selectedItem);
|
|
item.arrow.removeClass(config.css.activeItemArrow);
|
item.arrow.addClass(config.css.itemArrow);
|
|
return;
|
}
|
if ("item-selected" == event && item) {
|
item.addClass(config.css.selectedItem);
|
|
return;
|
}
|
|
if ("item-unselected" == event && item) {
|
item.removeClass(config.css.selectedItem);
|
|
return;
|
}
|
}
|
|
});
|
|
|
//*************************************
|
TreeMenu_TemplateA = {};
|
|
TreeMenu_TemplateA.container = [
|
'<ul class="treemenu-A"></ul>'
|
];
|
|
TreeMenu_TemplateA.item = [
|
'<li class="treemenu-A-item">',
|
'<div id="body">',
|
'<i id="icon" class="iconfont"></i> ',
|
'<span id="text" class="treemenu-A-text"></span>',
|
'</div>',
|
'<div id="badge" class="treemenu-A-btn-badge" style="display: none;"></div>',
|
'</li>'
|
];
|
|
TreeMenu_TemplateA.item_arrow = [
|
'<i id="icon" class="treemenu-A-body-arrow iconfont"></i> ',
|
];
|
