/*************************************************************
* 全局变量
*************************************************************/
//是否支持数据表格的 mouseover 和 mouseout 效果
var is_datatable_mouse = true;
//是否以TAB效果方式显示界面
var is_showtab_mode = true;
/*************************************************************
* loadUI
*************************************************************/
function loadUI(){
//装载数据表格
loadUI_datatable();
//装载 button 的效果
loadUI_formobj();
//装载 tab 效果
loadUI_tab();
}
/*************************************************************
* loadUI_tab
*************************************************************/
//装载 tab 的效果
function loadUI_tab(){
if(!is_showtab_mode||null == $("tabBox")){
return;
}
//最大TAB数
var maxTabCount = 20;
//最终要插入TAB区的代码
var overTabHtml = '
| ';
var tabTableBegin = "";
tabTableBegin += '';
tabTableBegin += '';
tabTableBegin += ' ';
tabTableBegin += ' ';
tabTableBegin += ' | ';
var tabTableEnd = "";
tabTableEnd += ' ';
tabTableEnd += ' ';
tabTableEnd += ' | ';
tabTableEnd += '
';
tabTableEnd += '
';
//第一个标题区的对象
var firstTitleObj ;
for(var i = 1;i<=maxTabCount;i++){
var tabObj = $("p" + i);
if(null == tabObj){
break;
}
//取得标题对象 就是p1这样的表格之前的一个表格
var titleObj = getPreviousSibling(tabObj);
if(i==1){
firstTitleObj = getPreviousSibling(tabObj);
}
//隐藏 标题行,还有对应的内容
titleObj.style.display="none";
tabObj.style.display="none";
//标题行,p1_btn 的所在TD
var btnTD = $("p" + i + "_btn");
//ICON图标
var btnTDIcon = btnTD.innerHTML; // |
//标题
var btnNameText = getNextSibling(btnTD).innerHTML; // 基本信息 |
//alert(btnTDIcon + btnNameText);
var tabInnerHTMLTemplet = '';
tabInnerHTMLTemplet += '';
tabInnerHTMLTemplet += ' ';
tabInnerHTMLTemplet += ' ';
tabInnerHTMLTemplet += ' TEMPLET_ICON | ';
tabInnerHTMLTemplet += ' TEMPLET_TITLE | ';
tabInnerHTMLTemplet += ' ';
tabInnerHTMLTemplet += ' ';
tabInnerHTMLTemplet += ' | ';
overTabHtml += tabInnerHTMLTemplet;
overTabHtml = overTabHtml.replaceAll("NUM",i); //第几个TAB
overTabHtml = overTabHtml.replaceAll("TEMPLET_TITLE_COUNT_",btnNameText.length); //CSS,TITLE汉字的个数
overTabHtml = overTabHtml.replaceAll("TEMPLET_ICON",btnTDIcon); //icon
overTabHtml = overTabHtml.replaceAll("TEMPLET_TITLE",btnNameText); //标题
}
//显示tab
$("tabBox").innerHTML = tabTableBegin + overTabHtml + tabTableEnd;
//选择第1个tab
selectTab(1);
}
//选择第N个TAB,N是从1开始计数
function selectTab(index){
var tabObj = $("tab_title_" + index);
if(null != tabObj){
//之前选择的是哪一个,并处理
var oldSelectValue = $("currSelectTabIndex").value;
if(oldSelectValue > 0){
//隐藏之前选择的内容
var oldTabObjContent = $("p" + oldSelectValue);
if(null != oldTabObjContent){
oldTabObjContent.style.display="none";
}
//改变之前选择的tab的样式
var oldTabObj = $("tab_title_" + oldSelectValue);
if(null != oldTabObj){
oldTabObj.className = oldTabObj.className.replaceAll("mouseover","mouseout");
}
}
//当前选择的,并处理
$("currSelectTabIndex").value=index;
var currClassName = tabObj.className;
tabObj.className = currClassName.replaceAll("mouseout","mouseover");
//显示对应的内容
var tabObj = $("p" + index);
if(null != tabObj){
tabObj.style.display="";
}
}
}
//tab的onmouseover
function tabOnMouseOver(obj){
if(obj.className.indexOf("mouseover") < 0){
obj.className = obj.className.replaceAll("mouseout","mouseover");
}
}
//tab的onmouseout
function tabOnMouseOut(obj){
//当前应该选择的是第几个
var selectedIndex = $("currSelectTabIndex").value;
//当前TAB的ID
var tabID = obj.id.substring("tab_title_".length);
if(selectedIndex != tabID){
obj.className = obj.className.replaceAll("mouseover","mouseout");
}
}
//tab的onmouseout
function tabOnClick(obj){
//当前TAB的ID
var tabIndex = obj.id.substring("tab_title_".length);
//选择
selectTab(tabIndex);
}
/*************************************************************
* loadUI_formobj
*************************************************************/
//装载 button 的效果
function loadUI_formobj(){
var allFormObj = document.getElementsByTagName("input");
//alert(document.body.innerHTML);
//alert(allFormObj.length);
for(var i = 0; i