var configItems;
|
|
Tab = $.fm.Tab = Control.subClass({
|
|
items: true,
|
|
init: function(config) {
|
config.css = $.fm.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);
|
});
|
|
//2. text
|
var text = itemHeader.text = $("#headerText", itemHeader);
|
this.setText(text, option.text, 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() {
|
//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);
|
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);
|
|
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) {
|
//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);
|
},
|
|
open: function(option) {
|
configItems = this;
|
this.showItem(option);
|
if (configItems.container.body[0].children.length > 1) {
|
$("#firstPage").css('display','none');
|
}
|
},
|
|
setItemSelected: function(item) {
|
var old = this.selected;
|
|
if (item == old) {
|
return;
|
}
|
|
if (old) {
|
this.changeItemCss(old, "item-unselect");
|
old.itemBody.hide();
|
}
|
|
if (item) {
|
this.selected = item;
|
this.changeItemCss(item, "item-select");
|
item.itemBody.show();
|
}
|
},
|
|
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: 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>'
|
];
|
