|
|
/**
|
|
|
* Created with JetBrains PhpStorm.
|
|
|
* User: xuheng
|
|
|
* Date: 12-9-26
|
|
|
* Time: 下午1:06
|
|
|
* To change this template use File | Settings | File Templates.
|
|
|
*/
|
|
|
// 以上部分是代码的创建相关信息注释，说明了代码是使用 JetBrains PhpStorm 创建，以及作者、创建日期和时间等信息，对代码本身功能无实质影响。
|
|
|
|
|
|
// 定义一个名为 'clickHandler' 的函数，用于处理 tab 点击相关的操作，比如改变头部元素的样式以及控制对应主体内容的显示隐藏和层级关系等。
|
|
|
// @param tabHeads ：传入的参数，表示 tab 头部元素的集合（通常是一组用于切换不同 tab 的按钮或链接等元素组成的数组）。
|
|
|
// @param tabBodys ：传入的参数，表示 tab 主体内容的集合（通常是一组对应不同 tab 的详细内容展示区域的元素组成的数组）。
|
|
|
// @param obj ：传入的参数，代表当前被点击的 tab 头部元素对象，用于针对该特定元素进行样式等相关操作。
|
|
|
function clickHandler( tabHeads, tabBodys, obj ) {
|
|
|
//head样式更改
|
|
|
// 循环遍历 tab 头部元素集合（tabHeads），将每个元素的类名（className）设置为空字符串，目的是清除之前可能存在的任何样式类，用于后续重新设置样式。
|
|
|
for ( var k = 0, len = tabHeads.length; k < len; k++ ) {
|
|
|
tabHeads[k].className = "";
|
|
|
}
|
|
|
// 将当前被点击的 tab 头部元素（obj）的类名设置为 "focus"，可能在 CSS 中有对应的样式定义，用于突出显示当前选中的 tab 头部，比如改变背景色、字体颜色等样式来体现选中状态。
|
|
|
obj.className = "focus";
|
|
|
|
|
|
//body显隐
|
|
|
// 获取当前被点击的 tab 头部元素（obj）上自定义的 'tabSrc' 属性值，该值可能对应着某个 tab 主体内容的唯一标识（比如 id），用于后续查找并显示对应的主体内容。
|
|
|
var tabSrc = obj.getAttribute( "tabSrc" );
|
|
|
// 循环遍历 tab 主体内容集合（tabBodys），对每个主体内容元素进行相关操作。
|
|
|
for ( var j = 0, length = tabBodys.length; j < length; j++ ) {
|
|
|
var body = tabBodys[j],
|
|
|
id = body.getAttribute( "id" );
|
|
|
// 为每个主体内容元素（body）绑定点击事件监听器，当点击主体内容元素时，执行一个匿名函数，函数内将该元素的 'zoom' 属性设置为 1，可能是用于触发某些浏览器特定的布局相关行为（比如在低版本 IE 中用于解决一些布局问题等），具体功能依赖于页面的 CSS 和整体布局设置。
|
|
|
body.onclick = function () {
|
|
|
this.style.zoom = 1;
|
|
|
};
|
|
|
// 判断当前主体内容元素的 id 是否与通过 tab 头部元素获取的 'tabSrc' 值不相等，如果不相等，表示不是当前选中 tab 对应的主体内容。
|
|
|
if ( id!= tabSrc ) {
|
|
|
// 将该主体内容元素的 z-index 属性设置为 1，用于控制元素在页面中的堆叠层级，值为 1 表示较低的层级，可能使其在页面中显示在其他元素下方或者隐藏起来（结合其他 CSS 样式），实现非当前选中 tab 主体内容的隐藏或后置效果。
|
|
|
body.style.zIndex = 1;
|
|
|
} else {
|
|
|
// 如果当前主体内容元素的 id 与 'tabSrc' 值相等，即表示是当前选中 tab 对应的主体内容，则将其 z-index 属性设置为 200，设置较高的层级值，使其能够显示在其他元素之上，保证当前选中 tab 的主体内容处于可见且突出显示的状态。
|
|
|
body.style.zIndex = 200;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 定义一个名为'switchTab' 的函数，用于实现整体的 TAB 切换功能，主要是遍历 tab 元素，为每个 tab 头部元素绑定点击事件监听器，点击时调用 'clickHandler' 函数来处理相应的样式改变和主体内容切换显示等操作。
|
|
|
// @param tabParentId ：传入的参数，代表 tab 的父节点 ID 或者传入 tab 所在的父元素对象本身，用于基于此查找 tab 头部和主体元素等相关子元素进行操作。
|
|
|
function switchTab( tabParentId ) {
|
|
|
// 通过 $G 函数（可能是自定义的获取 DOM 元素的函数），根据传入的 tabParentId 获取对应的元素对象，然后获取其所有子元素（children），这些子元素包含了 tab 的头部和主体相关元素集合等信息。
|
|
|
var tabElements = $G( tabParentId ).children,
|
|
|
tabHeads = tabElements[0].children,
|
|
|
tabBodys = tabElements[1].children;
|
|
|
|
|
|
// 循环遍历 tab 头部元素集合（tabHeads），对每个头部元素进行相关操作。
|
|
|
for ( var i = 0, length = tabHeads.length; i < length; i++ ) {
|
|
|
var head = tabHeads[i];
|
|
|
// 判断当前头部元素的类名是否为 "focus"，如果是，表示当前元素已经处于选中状态，直接调用 'clickHandler' 函数传入相应参数进行相关样式和显示处理（可能是页面加载时默认选中某个 tab 的情况需要进行初始化处理）。
|
|
|
if ( head.className === "focus" ) clickHandler( tabHeads, tabBodys, head );
|
|
|
// 为每个 tab 头部元素绑定点击事件监听器，当点击头部元素时，执行一个匿名函数，函数内调用 'clickHandler' 函数并传入 tab 头部元素集合（tabHeads）、tab 主体内容集合（tabBodys）以及当前被点击的头部元素对象（this）作为参数，实现点击切换 tab 时的样式改变和主体内容切换显示等操作。
|
|
|
head.onclick = function () {
|
|
|
clickHandler( tabHeads, tabBodys, this );
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 调用'switchTab' 函数，并传入 "helptab" 作为参数，启动整个 TAB 切换功能，"helptab" 可能是页面中包含 tab 结构的某个父元素的 id，通过这个调用使得页面加载后就能对相应的 tab 进行切换操作了。
|
|
|
switchTab( "helptab" );
|
|
|
|
|
|
// 获取页面中 id 为 'version' 的元素（可能是一个用于显示版本信息的 HTML 元素，比如段落元素等），然后将其内部 HTML 内容（innerHTML）设置为 'parent.UE.version' 的值，这里的 'parent' 可能是指父窗口或者某个包含版本信息的上级对象，通过访问其 'UE' 属性下的'version' 值来获取并显示具体的版本号信息，用于在页面上展示相关软件或工具的版本情况。
|
|
|
document.getElementById( 'version' ).innerHTML = parent.UE.version; |
