/********* 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.goRight = $("#goRight", 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 < 0) {
|
var marginLeft = header.data("marginLeft");
|
marginLeft = marginLeft + 120;
|
header.css({"margin-left": marginLeft + "px"});
|
header.data("marginLeft", marginLeft);
|
}
|
});
|
|
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 + headerArea_Width) > (headerParentArea_left + headerParentArea_Width) ) {
|
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 || option.title, config.css.itemText);
|
|
//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);
|
itemBody.attr("name", option.id);
|
|
itemBody[0].style.width = "100%";
|
itemBody[0].style["background-color"] = "#fff";
|
itemBody[0].style["z-index"] = 5;
|
itemBody[0].style.position = "absolute";
|
|
var bodyFrame = itemBody.bodyFrame = $("#bodyFrame", itemBody);
|
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 || option.title);
|
}
|
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;
|
configItems = this;
|
this.showItem(option, isRefresh);
|
if (configItems.container.body[0].children.length > 1) {
|
$("#firstPage").css('display','none');
|
}
|
},
|
|
setShowListener: function(id, listener) {
|
var item = this.getItemBy("id", id);
|
if (!item) {
|
return;
|
}
|
item.onShow = listener;
|
},
|
|
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();
|
$(menu_left).hide()
|
}
|
if(item.itemHeader.nextAll().length < 1) {
|
// $(menu_right).empty();
|
$(menu_right).hide();
|
}
|
|
//获取当前元素
|
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_;
|
|
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');
|
}
|
}
|
}
|
},
|
|
removeItemLeft: function(item) {
|
this.setItemSelected(item);
|
var prevAll_ = item.itemHeader.prevAll();
|
var prevBodyAll_ = item.itemBody.prevAll();
|
prevAll_.remove();
|
prevBodyAll_.remove();
|
configItems.items.splice(0, prevAll_.length);
|
},
|
|
removeItemRight: function(item) {
|
this.setItemSelected(item);
|
var prevAll_ = item.itemHeader.prevAll();
|
var nextAll_ = item.itemHeader.nextAll();
|
var nextBodyAll_ = item.itemBody.nextAll();
|
nextAll_.remove();
|
nextBodyAll_.remove();
|
configItems.items.splice(prevAll_.length+1, nextAll_.length);
|
},
|
|
removeItemOther: function(id) {
|
//获取当前
|
var item = this.getItemBy("id", id);
|
|
//关闭左侧
|
var prevAll_ = item.itemHeader.prevAll();
|
var prevBodyAll_ = item.itemBody.prevAll();
|
prevAll_.remove();
|
prevBodyAll_.remove();
|
configItems.items.splice(0, prevAll_.length);
|
//关闭右侧
|
var nextAll_ = item.itemHeader.nextAll();
|
var nextBodyAll_ = item.itemBody.nextAll();
|
nextAll_.remove();
|
nextBodyAll_.remove();
|
configItems.items.splice(1, 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();
|
old.itemBody[0].style["z-index"] = 1;
|
}
|
|
if (item) {
|
this.selected = item;
|
this.changeItemCss(item, "item-select");
|
|
if (item.onShow) {
|
item.onShow(item);
|
}
|
|
// item.itemBody.show();
|
item.itemBody[0].style["z-index"] = 5;
|
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="goLeft" 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="goRight" 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: 14px"></span>',
|
'<span id="headerText" ></span>',
|
'<span id="closeBtn" class="closeTab iconfont icon-guanbi" style="font-size: 14px"></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">关闭当前</span>',
|
'</div>',
|
'<div id="menu_left" class="div_sub">',
|
'<span class="treemenu-A-text">关闭左侧</span>',
|
'</div>',
|
'<div id="menu_right" class="div_sub">',
|
'<span class="treemenu-A-text">关闭右侧</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) {
|
if (this.container[0].children.length) {
|
var toolbar_width = this.parent[0].scrollWidth;
|
|
var length_ = this.container[0].children.length + 1;
|
var width_ = this.container[0].children[0].scrollWidth + 1;
|
var container_width_ = width_ * length_;
|
|
if (container_width_ > toolbar_width) {
|
this.parent[0].style.overflow = "hidden";
|
}
|
|
this.container[0].style.width = container_width_ + "px";
|
}
|
this.doAddItem(this, this.container, option, 1);
|
},
|
|
createItem: function(container, option) {
|
var config = this.config; var me = this;
|
var toolbar_width = this.parent[0].scrollWidth;
|
//1. item
|
var template = this.getTemplate("Toolbar", "item");
|
var item = $(template);
|
|
item[0].style.width = (toolbar_width * 0.08) + "px";
|
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 || option.title, 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);
|
}
|
|
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>'
|
];
|
|
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();
|
|
this.createItems(this, this.container, itemOptions, 1);
|
}, */
|
|
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 || option.title, 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);
|
}
|
|
if (option.parent_id) {
|
item.parent_id = option.parent_id;
|
}
|
item.this_id = option.id;
|
item.this_name = option.title;
|
if(option.icon) {
|
item.this_icon = option.icon;
|
}
|
if(option.icon_open) {
|
item.this_icon_open = option.icon_open;
|
}
|
item.attr("id", option.id);
|
|
//6. item click event
|
item.body.click(function() {
|
me.setItemSelected(item);
|
if (me.onSelect) {
|
me.onSelect.call(me, item, option);
|
}
|
});
|
|
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";
|
}
|
},
|
|
setItemSelected2: 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);
|
}
|
}
|
}
|
},
|
|
|
setItemSelected: function(selected, close_other) {
|
if (!selected) { return; }
|
var operator = this.getSelectOperator(selected, selected.option);
|
|
//1. open branch
|
if ("open" == operator) {
|
//已展开的即包含class的则需要收起
|
var class_ = selected.body[0].className.split(" ");
|
|
if (class_.length) {
|
var isclose_ = false;
|
class_.map(c=>{
|
if (c == "left-menu-active") {
|
isclose_ = true;
|
return
|
}
|
})
|
if (isclose_) {
|
var colseOlds = [];
|
colseOlds.push(selected);
|
/* this.getAllOld(selected, [], function(colseOlds_) {
|
colseOlds = colseOlds_;
|
}); */
|
|
colseOlds.map(o=>{//关闭
|
debug("关闭" + o.this_name);
|
if (o.option.children) {
|
this.changeItemCss(o, "item-close");
|
if (o.parentItem) {
|
this.selected.branch = o.parentItem
|
}
|
else {
|
this.selected.branch = null;
|
}
|
|
if (o.subContainer) {
|
o.subContainer.hide();
|
}
|
}
|
else {
|
this.changeItemCss(o, "item-unselected");
|
this.selected.leaf = null;
|
}
|
|
})
|
|
return
|
}
|
|
}
|
|
debug("展开" + selected.this_name);
|
var old = this.selected.branch;
|
//var colseOld = !this.isSameOriginal(selected, old);
|
|
//如果有上级，获取上级元素
|
if(selected.parent_id) {
|
var old_l = old;
|
if (!old && this.selected.leaf) {
|
old_l = this.selected.leaf;
|
}
|
|
if (old_l && old_l.this_id && selected.parent_id == old_l.this_id) {
|
selected.parentItem = old_l;
|
debug("获取上级" + selected.this_name + "上级" + old_l.this_name);
|
}
|
else if (old_l && old_l.parent_id && selected.parent_id == old_l.parent_id) {
|
selected.parentItem = old_l.parentItem;
|
if (old_l.parentItem) {
|
debug("获取上级" + selected.this_name + "上级" + old_l.parentItem.this_name);
|
}
|
}
|
else if(old_l && old_l.parent_id && selected.parent_id != old_l.parent_id) {
|
this.getParentItem(selected, old_l, selected.parent_id, function(p_item) {
|
if (p_item) {
|
selected.parentItem = p_item;
|
|
debug("获取上级" + selected.this_name + "上级" + p_item.this_name);
|
}
|
});
|
}
|
else {
|
debug("展开但没有获取到上级" + selected.this_name);
|
}
|
}
|
|
//之前选择的非叶子时用子节点获取关闭元素
|
var old_l = old;
|
if(!old && this.selected.leaf) {
|
old_l = this.selected.leaf;
|
}
|
else {
|
var old_leaf = this.selected.leaf;
|
if (old_leaf) {
|
this.changeItemCss(old_leaf, "item-unselected");
|
this.selected.leaf = null;
|
}
|
}
|
|
//返回关闭元素组
|
var colseOlds = [];
|
|
this.getCloseItems(selected, old_l, function(colseOlds_) {
|
colseOlds = colseOlds_;
|
});
|
|
colseOlds.map(o=>{//关闭
|
if (o) {
|
debug("关闭" + o.this_name);
|
if (o.option.children) {
|
this.changeItemCss(o, "item-close");
|
this.selected.branch = null;
|
|
if (o.subContainer) {
|
o.subContainer.hide();
|
}
|
}
|
else {
|
this.changeItemCss(o, "item-unselected");
|
this.selected.leaf = null;
|
}
|
}
|
})
|
|
if (selected) {
|
this.changeItemCss(selected, "item-open");
|
this.selected.branch = selected;
|
|
if (selected.subContainer) {
|
selected.subContainer.show();
|
}
|
|
|
if (selected.items && selected.items.length) {
|
//selected.items[1].click();
|
this.setItemSelected(selected.items[0]);
|
}
|
}
|
}
|
|
//2. select leaf
|
if ("select" == operator) {
|
var old = this.selected.leaf;
|
debug("选中" + selected.this_name);
|
if (selected == old) {
|
return;
|
}
|
|
//给子菜单添加父元素
|
if (selected.parent_id) {
|
var old_p = old;
|
if(!old_p && this.selected.branch) {
|
old_p = this.selected.branch;
|
}
|
if (old_p && old_p.this_id && selected.parent_id == old_p.this_id) {
|
selected.parentItem = old_p;
|
debug("获取上级" + selected.this_name + "上级" + old_p.this_name);
|
}
|
else if (old_p && old_p.parent_id && selected.parent_id == old_p.parent_id) {
|
selected.parentItem = old_p.parentItem;
|
if (old_p.parentItem) {
|
debug("获取上级" + selected.this_name + "上级" + old_p.parentItem.this_name);
|
}
|
}
|
else if(old_p && old_p.parent_id && selected.parent_id != old_p.parent_id) {
|
this.getParentItem(selected, old_p, selected.parent_id, function(p_item) {
|
selected.parentItem = p_item;
|
if (p_item && p_item.this_name) {
|
debug("获取上级" + selected.this_name + "上级" + p_item.this_name);
|
}
|
|
});
|
}
|
}
|
|
//返回关闭元素组
|
var colseOlds = [];
|
if (old && old != selected) {
|
this.changeItemCss(old, "item-unselected");
|
this.selected.leaf = null;
|
}
|
|
if (old && old.parent_id && old.parent_id == selected.parent_id) {
|
colseOlds = [];
|
}
|
else {
|
this.getCloseItems(selected, old, function(colseOlds_) {
|
colseOlds = colseOlds_;
|
});
|
}
|
|
|
colseOlds.map(o=>{//关闭
|
this.changeItemCss(o, "item-close");
|
this.selected.branch = null;
|
|
if (o && o.subContainer) {
|
o.subContainer.hide();
|
}
|
})
|
|
/* if (old) {
|
this.changeItemCss(old, "item-unselected");
|
this.selected.leaf = null;
|
} */
|
|
if (selected) {
|
|
this.changeItemCss(selected, "item-selected");
|
this.selected.leaf = selected;
|
|
if (this.onSelect) {
|
this.onSelect(selected, selected.option);
|
}
|
}
|
}
|
},
|
|
isSameOriginal: function(current, old) {
|
if (!old || !current) {
|
return false;
|
}
|
|
if (current == old) {
|
return true;
|
}
|
|
if (current.parent_id == old.this_id) {
|
return true;
|
}
|
|
return false;
|
},
|
|
getParentItem(selected, old, parent_id, callback) {
|
if (!old) {
|
var aa= "";
|
debug("没有获取到上级" + selected.this_name);
|
}
|
if (selected.parent_id && old && selected.parent_id == old.this_id) {
|
callback(old)
|
}
|
else if(old && old.parent_id) {
|
this.getParentItem(selected, old.parentItem, selected.parent_id, callback);
|
}
|
else {
|
callback(old)
|
}
|
},
|
|
getCloseItems: function(current, old, callback) {
|
var closeItems = [];
|
if (!old || !current) {// || current == old
|
callback(closeItems);
|
return
|
}
|
|
if (current.parent_id) {
|
if (current.parent_id != old.this_id) {
|
//获取
|
this.getCloseOlds(current, old, closeItems, callback);
|
return
|
}
|
else {
|
callback(closeItems);
|
return
|
}
|
}
|
else {
|
//返回old所有的父级
|
this.getAllOld(old, closeItems, callback);
|
return
|
}
|
},
|
|
getAllOld(old, closeItems_, callback) {
|
closeItems_.push(old);
|
if (old.parent_id) {
|
this.getAllOld(old.parentItem, closeItems_, callback);
|
}
|
else {
|
callback(closeItems_)
|
}
|
},
|
|
getCloseOlds(current, old, closeItems_, callback){
|
closeItems_.push(old);
|
if (old && old.parent_id && current.parent_id != old.parent_id) {
|
this.getCloseOlds(current, old.parentItem, closeItems_, callback);
|
}
|
else {
|
callback(closeItems_)
|
}
|
},
|
|
|
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);
|
}
|
|
if (item.icon && item.this_icon && item.this_icon_open) {
|
item.icon.removeClass(item.this_icon);
|
item.icon.addClass(item.this_icon_open);
|
}
|
|
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);
|
}
|
|
if (item.icon && item.this_icon && item.this_icon_open) {
|
item.icon.removeClass(item.this_icon_open);
|
item.icon.addClass(item.this_icon);
|
}
|
|
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>',
|
'</li>'
|
];
|
|
TreeMenu_TemplateA.item_arrow = [
|
'<i id="icon" class="treemenu-A-body-arrow iconfont"></i> ',
|
];
|
