first commit
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
/*
|
||||
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
||||
*
|
||||
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
||||
*
|
||||
* 本文采用《知启蒙许可证》，除非符合许可证，否则不可使该文件！
|
||||
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
||||
* 2、您用于商业用途时，必须在原作者指定的登记网站进行实名登记；
|
||||
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
||||
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
||||
* 5、您可以在以下链接获取一个完整的许可证副本。
|
||||
*
|
||||
* 许可证链接：http://zhiqim.org/licenses/LICENSE.htm
|
||||
*
|
||||
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
||||
*/
|
||||
+(function(Z)
|
||||
{//BEGIN
|
||||
|
||||
/**************************************************/
|
||||
//定义全局的对象，便于所有的页面调用
|
||||
/**************************************************/
|
||||
var Zin = window.Zin = {};
|
||||
|
||||
Zin.doClickChildMenu = function(elem, menuUrl)
|
||||
{//点击二级栏目
|
||||
var $elem = Z(elem);
|
||||
|
||||
//1.判断是否已存在，存在则置为显示并切换该框架导航选项卡置为活动
|
||||
var elemId = $elem[0].id || "menu_" + Z.Ids.uuid();
|
||||
$elem.attr("id", elemId);
|
||||
|
||||
var tabId = "tab_" + elemId;
|
||||
var iframeId = "iframe_" + elemId;
|
||||
var $tab = Z("#" + tabId);
|
||||
var $iframe = Z("#" + iframeId);
|
||||
|
||||
if ($tab[0] && $iframe[0])
|
||||
{
|
||||
Zin.selectIframeTab(elemId);
|
||||
return;
|
||||
}
|
||||
|
||||
//2.不存在则创建该框架导航选项卡
|
||||
var $tabList = Z(".iframenav-tab-list");
|
||||
var clickText = $elem.attr("data-text") || $elem.text() || "未命名";
|
||||
$tab = Z('<li class="iframenav-tab-item" id="'+ tabId +'"><span>'+ clickText +'</span><i class="z-font z-error"></i></li>')
|
||||
.appendTo($tabList);
|
||||
$tab.on("click", Zin.selectIframeTabEvent);
|
||||
$tab.find(".z-refresh").on("click", Zin.refreshIframeTabClick);
|
||||
$tab.find(".z-error").on("click", Zin.closeIframeTabClick);
|
||||
|
||||
$iframe = Z('<div id="'+ iframeId +'" class="iframenav-cont-item"><iframe src="'+ menuUrl +'" name="'+iframeId+'"></iframe></div>')
|
||||
.appendTo(".iframenav-cont");
|
||||
|
||||
//3.选中自己，调整位置偏移，显示完整选项卡
|
||||
Zin.selectIframeTab(elemId);
|
||||
};
|
||||
|
||||
/**************************************************/
|
||||
//3个iframenav的点击事件（其中刷新暂时没有添加）
|
||||
/**************************************************/
|
||||
|
||||
Zin.selectIframeTabEvent = function(event)
|
||||
{//点击选项卡标签页
|
||||
var $tab = Z.E.current(event);
|
||||
var tabId = $tab.id;
|
||||
Zin.selectIframeTab(tabId.replace("tab_", ""));
|
||||
};
|
||||
|
||||
Zin.refreshIframeTabClick = function(event)
|
||||
{//点击选项卡上的刷新按钮
|
||||
var $refresh = Z(Z.E.current(event));
|
||||
var tabId = $refresh.parent()[0].id;
|
||||
Zin.refreshIframeTab(tabId.replace("tab_", ""));
|
||||
};
|
||||
|
||||
Zin.closeIframeTabClick = function(event)
|
||||
{//点击选项卡上的关闭按钮
|
||||
var $close = Z(Z.E.current(event));
|
||||
var tabId = $close.parent()[0].id;
|
||||
Zin.closeIframeTab(tabId.replace("tab_", ""));
|
||||
};
|
||||
|
||||
/**************************************************/
|
||||
//指定操作功能
|
||||
/**************************************************/
|
||||
|
||||
Zin.selectIframeTab = function(id)
|
||||
{//选择指定的选项卡
|
||||
Z("#tab_"+id).addClass("active").siblings(".iframenav-tab-item").removeClass("active");
|
||||
Z("#iframe_"+id).addClass("active").siblings(".iframenav-cont-item").removeClass("active");
|
||||
Zin.setTranslateForShowActive();
|
||||
|
||||
var mainUrl = Z("#iframe_"+id+" iframe").attr("src");
|
||||
if (mainUrl)
|
||||
{//切换选项卡同步到后端，关闭选项卡时为null不处理，整页刷新时依然使用关闭的URL
|
||||
var $elem = Z("#" + id);
|
||||
$elem.parent().parent().find("li").removeClass("active");
|
||||
$elem.addClass("active");
|
||||
|
||||
mainUrl = mainUrl.substring(location.origin.length);
|
||||
Z.ajax().setContextPath(Zin.contextPath)
|
||||
.setClassName("sessionUser").setMethodName("setMainUrl").addParam(mainUrl)
|
||||
.execute();
|
||||
}
|
||||
};
|
||||
|
||||
Zin.refreshIframeTab = function(id)
|
||||
{//刷新指定框架
|
||||
Z("#iframe_" + id).find("iframe")[0].contentWindow.location.reload(true);
|
||||
};
|
||||
|
||||
Zin.closeIframeTab = function(id)
|
||||
{//关闭指定框架，并切换到前一个框架
|
||||
var $currTab = Z("#tab_" + id);
|
||||
var $prevTab = Z($currTab[0].previousElementSibling || Z(".iframenav-tab-item:first-child")[0]);
|
||||
|
||||
//删除当前框架，同时选中前一个为活动
|
||||
Zin.closeIframeTabOnly(id);
|
||||
Zin.selectIframeTab($prevTab[0].id.replace("tab_", ""));
|
||||
};
|
||||
|
||||
Zin.closeIframeTabOnly = function(id)
|
||||
{//仅关闭指定框架
|
||||
Z("#tab_" + id).remove();
|
||||
Z("#iframe_" + id).remove();
|
||||
};
|
||||
|
||||
Zin.setTranslateForShowActive = function()
|
||||
{//调整位置偏移，显示完整选项卡
|
||||
var $tabList = Z(".iframenav-tab-list");
|
||||
var $tabs = Z(".iframenav-tab-item");
|
||||
|
||||
//1.校准宽度
|
||||
var fillWidth = 0;
|
||||
$tabs.each(function(item){
|
||||
fillWidth += item.getBoundingClientRect().width;
|
||||
});
|
||||
fillWidth = Math.ceil(fillWidth);
|
||||
|
||||
var wrapRect = Z(".iframenav-tab-wrap")[0].getBoundingClientRect();
|
||||
$tabList.css("width", fillWidth > wrapRect.width ? fillWidth : wrapRect.width);
|
||||
if (fillWidth < wrapRect.width)
|
||||
$tabList.css("transform", "translate(0,0)");
|
||||
|
||||
//2.当前标签、前后两个标签，宽度信息
|
||||
var $active = Z(".iframenav-tab-item.active");
|
||||
var activeRect = $active[0].getBoundingClientRect();
|
||||
var $prev = $active[0].previousElementSibling;
|
||||
var prevWidth = !!$prev ? $prev.getBoundingClientRect().width : 0;
|
||||
var $next = $active[0].nextElementSibling;
|
||||
var nextWidth = !!$next ? $next.getBoundingClientRect().width : 0;
|
||||
|
||||
//3.计算理论偏移量
|
||||
var mLeft = activeRect.left - prevWidth - wrapRect.left;
|
||||
var mRight = activeRect.right + nextWidth - wrapRect.right;
|
||||
var tabTransX = parseFloat($tabList.css("transform").replace(/^[^\d]+/,"") || 0);
|
||||
tabTransX = tabTransX >= 0 ? tabTransX : 0;
|
||||
if (mLeft < 0 && mRight > 0)
|
||||
return;
|
||||
|
||||
if (mLeft < 0)
|
||||
tabTransX += mLeft;
|
||||
|
||||
if (mRight > 0)
|
||||
tabTransX += mRight;
|
||||
|
||||
$tabList.css("transform", "translate(-" + tabTransX + "px,0)");
|
||||
};
|
||||
|
||||
/**************************************************/
|
||||
//外部调用
|
||||
/**************************************************/
|
||||
|
||||
Zin.toggleIframeCtrlWrap = function()
|
||||
{//切换关闭操作界面
|
||||
Z(".iframenav-ctrl-wrap").toggle();
|
||||
};
|
||||
|
||||
Zin.selectIframeTabActive = function()
|
||||
{//定位到当前选项卡
|
||||
var $active = Z(".iframenav-tab-item.active");
|
||||
var tabId = $active[0].id;
|
||||
Zin.selectIframeTab(tabId.replace("tab_", ""));
|
||||
|
||||
Zin.toggleIframeCtrlWrap();
|
||||
}
|
||||
|
||||
Zin.closeIframeTabAll = function()
|
||||
{//关闭所有选项卡
|
||||
var $tab = Z(".iframenav-tab-item:not(:first-child)");
|
||||
|
||||
var idList = [];
|
||||
$tab.each(function(elem){idList.push(elem.id.replace("tab_", ""));});
|
||||
idList.forEach(Zin.closeIframeTabOnly);
|
||||
|
||||
//选中首页
|
||||
var $index = Z(".iframenav-tab-item:first-child");
|
||||
Zin.selectIframeTab($index[0].id.replace("tab_", ""));
|
||||
Zin.toggleIframeCtrlWrap();
|
||||
};
|
||||
|
||||
Zin.closeIframeTabOther = function()
|
||||
{//关闭其他选项卡
|
||||
var $tab = Z(".iframenav-tab-item:not(:first-child)");
|
||||
var $active = Z(".iframenav-tab-item.active");
|
||||
|
||||
var idList = [];
|
||||
$tab.each(function(elem){if ($active[0] !== elem){idList.push(elem.id.replace("tab_",""));}});
|
||||
idList.forEach(Zin.closeIframeTabOnly);
|
||||
|
||||
Zin.setTranslateForShowActive();
|
||||
Zin.toggleIframeCtrlWrap();
|
||||
};
|
||||
|
||||
Zin.refreshIframeTabActive = function()
|
||||
{//刷新当前选项卡
|
||||
var $active = Z(".iframenav-tab-item.active");
|
||||
Zin.refreshIframeTab($active[0].id.replace("tab_",""));
|
||||
};
|
||||
|
||||
Zin.turnIframeTab = function(isNext)
|
||||
{//向前向后翻页选项卡
|
||||
var wrapWidth = Z(".iframenav-tab-wrap")[0].getBoundingClientRect().width;
|
||||
var $tabList = Z(".iframenav-tab-list");
|
||||
var tabTransX = parseFloat($tabList.css("transform").replace(/^[^\d]+/,"") || 0);
|
||||
tabTransX = tabTransX >= 0 ? tabTransX : 0;
|
||||
|
||||
var $tabs = Z(".iframenav-tab-item");
|
||||
var listWidth = 0, fillWidth = 0;
|
||||
var fillArray=[];
|
||||
|
||||
for (var i=0;i<$tabs.length;i++)
|
||||
{
|
||||
var tab = $tabs[i];
|
||||
var tabWidth = tab.getBoundingClientRect().width;
|
||||
listWidth += tabWidth;
|
||||
if (isNext)
|
||||
{
|
||||
if (listWidth - tabTransX > wrapWidth)
|
||||
{
|
||||
tabTransX = listWidth - tabWidth;
|
||||
break;
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
fillArray.unshift(tabWidth);
|
||||
if (listWidth >= tabTransX)
|
||||
{
|
||||
while(fillWidth < wrapWidth)
|
||||
{
|
||||
fillWidth += fillArray[i++];
|
||||
}
|
||||
tabTransX = listWidth - fillWidth;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$tabList.css("transform", "translate(-" + (tabTransX >= 0 ? tabTransX : 0) + "px,0)");
|
||||
}
|
||||
|
||||
//END
|
||||
})(zhiqim);
|
||||
Reference in New Issue
Block a user