<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'"
+ " onclick=\"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>
分享到:
相关推荐
管理系统主界面,使用tabcontrol分页在tabpage显示各子界面,实现各tabpage子窗体只能单开,打开同一个tabpage时,会激活到已开的tabpage中;并实现双击tabpage关闭和右键点击菜单关闭或全部关闭。附上程序实例与...
自定义结合用户控件,实现了tabpage可左右两边对齐(靠左、靠右的tabpage同时存在)
HTML5实现tabpage源码
添加TabPage,点击添加或删除,长安拖住可排序
C#中控制tabpage可见内容不可用,网上有很多法子,都是说删除再创建,但我这个方法最好,我觉得,原创哈
在很多后台管理系统中,有类似多个TagePage切换页的效果,这里是一个js实现的版本,可以实现TabPage 翻页,切换Tab选项卡,新增Tab,删除Tab等,供学习了解之用!
自定义Tabpage控件,tabcontrol控件,很漂亮哦,C#源代码
网名:唯笑志在 QQ:504547114 DotNet 改善程序代码群:54256083 但是怎么把关闭图标放到tabpage标签的右边,需要解决一下。
TabPage自定义
大家可以看看,声明下这个不是我创做的,转自 http://clocker321.blog.163.com/blog/static/6350577201012152049866/ 维护作者的权益,大家也可以到这个blog上看看!我只是做个备份,谢谢作者!
a Tabpage of Office2007 Style
1、在tabpage上绘制关闭按钮 2、点击链接打开新页面。 详细请参看博文: http://t.csdn.cn/RRIQV
个人感觉 很好用的 VC TABPAGE 不妨下载试试
关闭安钮的TabPage, 下来看看吧。
MFC SDI中使用TabControl控制多视图切换
TabPage没有Visible属性,所以只能通过设置将其与父控件(tabcontrol)的关联性去除就好了,如下面代码:
利用tabcontrol实现winform子窗口切换,且为tabpage添加关闭
我做这个原意是同时连接了几台设备,每个tabpage标题显示每台设备的实时信息,可以轻松切换每个设备。
适合VC入门的简单界面,但是很有用。在一个普通对话框中,基于标准的CTabCtrl类,创建多个带标签的页面。用于在有限的界面尺寸下,显示丰富的内容和信息。