<script type="text/javascript" >
function TabPage(width, height, tabTitleArray, tabPageArray)
{
var ids =
new Array();
var id =
document.uniqueID;
var tabTitleHtml =
"";
var index = 0;
for (
var i = 0; i < tabTitleArray.length; i++)
{
tabTitleHtml +=
"<table border='0' cellspacing='0' cellpadding='0' width='" + width +
"'>"
+
"<tbody><tr>";
var titles = tabTitleArray[i];
for (
var n = 0; n < titles.length; n++)
{
var myId = id + index;
ids[index] = myId;
var title = titles[n];
tabTitleHtml +=
"<td class='TabTitle'"
+
" οnclick=/"secBoard(this, '" + myId +
"')/">" + title +
"</td>";
index++;
}
tabTitleHtml +=
"</tr></tbody></table>";
}
var tabPageHtml =
"";
for (
var i = 0; i < tabPageArray.length; i++)
{
tabPageHtml +=
"<tbody id='" + ids[i] +
"' style='display:none''>"
+
"<tr><td>" + tabPageArray[i] +
"</td>" +
"</tr></tbody>";
}
var controlID =
document.uniqueID.toString();
var html =
"<table id='" + controlID +
"' width='" + width +
"' border='0'><tbody><tr><td>"
+ tabTitleHtml
+
"<table border='0' cellspacing='0' cellpadding='0' width='" + width
+
" ' height='" + height +
"' class='TabPage'>"
+ tabPageHtml
+
"</table>"
+
"</td></tr></tbody></table>";
document.write(html);
document.getElementById(controlID).rows[0].cells[0].children[0].rows[0].cells[0].click();
}
function secBoard(obj, tabPageID)
{
var currentTabTitleTable = obj.parentNode.parentNode.parentNode;
var container = obj.parentNode.parentNode.parentNode.parentNode;
for (
var n = 0; n < container.children.length - 1; n++) {
var cells = container.children[n].rows[0].cells;
for(
var i = 0; i < cells.length; i++)
{
var cell = cells[i]
if (cell.className ==
"SelectedTabTitle")
{
cell.className =
"TabTitle";
break;
}
}
}
obj.className =
"SelectedTabTitle";
var tabPageTable = container.lastChild;
for (
var i = 0; i < container.children.length; i++)
{
var node = container.children[i];
if (node != currentTabTitleTable)
continue;
if (node.nextSibling == tabPageTable)
break;
node.swapNode(node.nextSibling);
node = container.children[i+1];
}
for(
var i = 0; i < tabPageTable.tBodies.length; i++)
{
var tbody = tabPageTable.tBodies[i];
if (tbody.
style.display !=
"none")
{
tbody.
style.display =
"none";
break;
}
}
document.getElementById(tabPageID).
style.display =
"block";
}
function GetPinYinArray()
{
var pinYinArray =
new Array(
new Array(
'a',
'ai',
'an',
'ang',
'ao'),
new Array(
'ba',
'bai',
'ban',
'bang',
'bao',
'bei',
'ben',
'beng',
'bi',
'bian',
'biao',
'bie',
'bin',
'bing',
'bo',
'bu'),
new Array(
'ca',
'cai',
'can',
'cang',
'cao',
'ce',
'cen',
'ceng',
'cha',
'chai',
'chan',
'chang',
'chao',
'che',
'chen',
'cheng',
'chi',
'chong',
'chou',
'chu',
'chua',
'chuai',
'chuan',
'chuang',
'chui',
'chun',
'chuo',
'ci',
'cong',
'cou',
'cu',
'cuan',
'cui',
'cun',
'cuo'),
new Array(
'da',
'dai',
'dan',
'dang',
'dao',
'de',
'deng',
'di',
'dia',
'dian',
'diao',
'die',
'ding',
'diu',
'dong',
'dou',
'du',
'duan',
'dui',
'dun',
'duo'),
new Array(
'e',
'en',
'er'),
new Array(
'fa',
'fan',
'fang',
'fei',
'fen',
'feng',
'fo',
'fou',
'fu'),
new Array(
'ga',
'gai',
'gan',
'gang',
'gao',
'ge',
'gei',
'gen',
'geng',
'gong',
'gou',
'gu',
'gua',
'guai',
'guan',
'guang',
'gui',
'gun',
'guo'),
new Array(
'ha',
'hai',
'han',
'hang',
'hao',
'he',
'hei',
'hen',
'heng',
'hong',
'hou',
'hu',
'hua',
'huai',
'huan',
'huang',
'hui',
'hun',
'huo'),
new Array(),
new Array(
'ji',
'jia',
'jian',
'jiang',
'jiao',
'jie',
'jin',
'jing',
'jiong',
'jiu',
'ju',
'juan',
'jue',
'jun',
'jv'),
new Array(
'ka',
'kai',
'kan',
'kang',
'kao',
'ke',
'ken',
'keng',
'kong',
'kou',
'ku',
'kua',
'kuai',
'kuan',
'kuang',
'kui',
'kun',
'kuo'),
new Array(
'la',
'lai',
'lan',
'lang',
'lao',
'le',
'lei',
'leng',
'li',
'lia',
'lian',
'liang',
'liao',
'lie',
'lin',
'ling',
'liu',
'long',
'lou',
'lu',
'luan',
'lue',
'lun',
'luo',
'lv'),
new Array(
'ma',
'mai',
'man',
'mang',
'mao',
'me',
'mei',
'men',
'meng',
'mi',
'mian',
'miao',
'mie',
'min',
'ming',
'miu',
'mo',
'mou',
'mu'),
new Array(
'na',
'nai',
'nan',
'nang',
'nao',
'ne',
'nei',
'nen',
'neng',
'ni',
'nian',
'niang',
'niao',
'nie',
'nin',
'ning',
'niu',
'nong',
'nou',
'nu',
'nuan',
'nue',
'nuo',
'nv'),
new Array(
'o',
'ou'),
new Array(
'pa',
'pai',
'pan',
'pang',
'pao',
'pei',
'pen',
'peng',
'pi',
'pian',
'piao',
'pie',
'pin',
'ping',
'po',
'pou',
'pu'),
new Array(
'qi',
'qia',
'qian',
'qiang',
'qiao',
'qie',
'qin',
'qing',
'qiong',
'qiu',
'qu',
'quan',
'que',
'qun'),
new Array(
'ran',
'rang',
'rao',
're',
'ren',
'reng',
'ri',
'rong',
'rou',
'ru',
'ruan',
'rui',
'run',
'ruo'),
new Array(
'sa',
'sai',
'san',
'sang',
'sao',
'se',
'sen',
'seng',
'sha',
'shai',
'shan',
'shang',
'shao',
'she',
'shen',
'sheng',
'shi',
'shou',
'shu',
'shua',
'shuai',
'shuan',
'shuang',
'shui',
'shun',
'shuo',
'si',
'song',
'sou',
'su',
'suan',
'sui',
'sun',
'suo'),
new Array(
'ta',
'tai',
'tan',
'tang',
'tao',
'te',
'teng',
'ti',
'tian',
'tiao',
'tie',
'ting',
'tong',
'tou',
'tu',
'tuan',
'tui',
'tun',
'tuo'),
new Array(),
new Array(),
new Array(
'wa',
'wai',
'wan',
'wang',
'wei',
'wen',
'weng',
'wo',
'wu'),
new Array(
'xi',
'xia',
'xian',
'xiang',
'xiao',
'xie',
'xin',
'xing',
'xiong',
'xiu',
'xu',
'xuan',
'xue',
'xun'),
new Array(
'ya',
'yan',
'yang',
'yao',
'ye',
'yi',
'yin',
'ying',
'yo',
'yong',
'you',
'yu',
'yuan',
'yue',
'yun'),
new Array(
'za',
'zai',
'zan',
'zang',
'zao',
'ze',
'zei',
'zen',
'zeng',
'zha',
'zhai',
'zhan',
'zhang',
'zhao',
'zhe',
'zhen',
'zheng',
'zhi',
'zhong',
'zhou',
'zhu',
'zhua',
'zhuai',
'zhuan',
'zhuang',
'zhui',
'zhun',
'zhuo',
'zi',
'zong',
'zou',
'zu',
'zuan',
'zui',
'zun',
'zuo')
);
var array =
new Array(pinYinArray.length);
for (
var i = 0; i < pinYinArray.length; i++)
{
var html =
"";
var myArray = pinYinArray[i];
for (
var n = 0; n < myArray.length; n++)
{
html += myArray[n] +
" ";
}
html +=
"";
array[i] = html;
}
return array;
}
function GetFirstLetterArray()
{
var array =
new Array(
new Array(
'A',
'B',
'C',
'D',
'E',
'F',
'G'),
new Array(
'H',
'I',
'J',
'K',
'L',
'M',
'N'),
new Array(
'O',
'P',
'Q',
'R',
'S',
'T'),
new Array(
'U',
'V',
'W',
'X',
'Y',
'Z'));
return array;
}
new TabPage(200, 50,GetFirstLetterArray(), GetPinYinArray() );
var titleArray =
new Array(
new Array(1, 2, 3, 4),
new Array(5, 6, 7, 8),
new Array(9, 10, 11, 12),
new Array(13, 14, 15, 16));
var pageArray =
new Array(1, 2,3 ,4, 5,6,7,8,9,10,11,12,13,14,15,16);
new TabPage(200, 50,titleArray, pageArray );
</script>
<style type="text/css">
.TabTitle
{
text-align: center;
background-color:#99CC99;
cursor: hand;
color: #000000;
border-left: 1px solid #F0F0F0;
border-top: 1px solid #F0F0F0;
border-right: 1px solid gray;
border-bottom: 1px solid #F0F0F0
}
.SelectedTabTitle
{
text-align: center;
background-color: #D2D8D8;
cursor: hand;
color: blue;
border-left: 1px solid #F0F0F0;
border-top: 1px solid #F0F0F0;
border-right: 1px solid gray;
}
.TabPage
{
background-color: #D2D8D8;
color: #000000;
border-left:1px solid #F0F0F0;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
</style>
