/************************************************************* * 全局变量 *************************************************************/ //是否支持数据表格的 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 += ' '; tabTableEnd += ''; tabTableEnd += '
'; tabTableBegin += ' '; tabTableBegin += ' '; var 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 += ' '; tabInnerHTMLTemplet += ' '; tabInnerHTMLTemplet += ' '; tabInnerHTMLTemplet += '
TEMPLET_ICONTEMPLET_TITLE
'; 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