开发TabSet AJAX控件并集成到WebShop IDE

关注

原创最新推荐文章于 2026-05-05 22:00:40 发布 1.2k 阅读 AI 写同款· GEO 优化 ›

Android自定义WheelView 没人可以预见未来，珍惜现在看项目新原型，好像要用到时间选择控件，我看八成要自定义是吧，然后就去网上找了一点，说用这个WheelView做比较好，还能做什么省市县的。去github看了会，额，感觉可能为了功能强还是什么，感觉代码好多，四五百行，六七百行之类的。反正有时间，还是自己写一个吧。有问题自己也好改先看看效果这里的WheelView继承的是view,我的思路是，数据和线自己画，阅读详情

开发扩展AJAX控件--TabSet

今天的题目是开发TabSet控件,并且将它集成到webshop的IDE环境中.

初步考虑的是TabSet的页头用table来做,便于无限增加页.(即增加td),然后TabSet有Add方法,能够将DIV添加为它的子页.

最后的样式是这个样子:

下面是TabSet的构造函数

//TAB页控件
function TabSet(parent)
{
obj=new Div(parent);
obj.Table = document.createElement('table');
obj.appendChild(obj.Table);
obj.TableBody = document.createElement('TBody');
obj.Table.appendChild(obj.TableBody);

obj.HeaderRow = document.createElement('tr');
obj.TableBody.appendChild(obj.HeaderRow);
obj.Buttons=new Array();
obj.Items=new Array();
obj.SelectTab;
obj.SelectIndex;
obj.Add=TabSet_Add;
obj.GetSelectTab=TabSet_GetSelectTab;
obj.GetSelectIndex=TabSet_GetSelectIndex;
obj.SetSelectIndex=TabSet_SetSelectIndex;
obj.SetSelectTab=TabSet_SetSelectTab;
obj.OnTabChange;
return obj;
}

实现TabSet的Add方法

function TabSet_Add(title,div){
if(!div)return;
if(div.parentNode)
div.parentNode.removeChild(div);
this.appendChild(div);
div.style.borderWidth=1;
div.style.borderStyle='solid';
div.style.display='none';
var tabtd = document.createElement('td');
this.HeaderRow.appendChild(tabtd);

var tabplace=new Div(tabtd);
var button=new Link(tabplace);
button.innerHTML='  '+title+'  ';
button.href='#';
button.style.textDecoration='none';

tabplace.style.borderWidth=1;
tabplace.style.borderStyle='solid';
tabplace.style.borderBottomWidth=0;
tabplace.style.position = 'relative';
tabplace.style.zIndex = 2;

this.Buttons[this.Buttons.length]=button;
button.tab=div;
button.tabtd=tabtd;
div.tabbutton=button;
div.Index=this.Items.length;
this.Items[this.Items.length]=div;
button.owner=this;
button.tabplace=tabplace;
button.onclick=TabSet_ButtonClick;

}

实现TabSet页头点击的事件,点击后切换页

好了,现在这个TabSet已经可以工作了,类似下面的代码使用它.

window.TabSet1=new TabSet();
window.Div1=new Div(TabSet1);
window.Div2=new Div(TabSet1);
window.Div3=new Div(TabSet1);
TabSet1.Name='TabSet1';
TabSet1.style.height='283';
TabSet1.style.width='461';
TabSet1.style.position='absolute';
TabSet1.style.left='99';
TabSet1.style.top='99';
TabSet1.SelectIndex=0;
Div1.Name='Div1';
Div1.style.height='259';
Div1.style.width='455';
Div1.style.position='absolute';
Div1.style.left='2';
Div1.style.top='20';
Div2.Name='Div2';
Div2.style.height='259';
Div2.style.width='455';
Div2.style.position='absolute';
Div2.style.left='2';
Div2.style.top='20';
Div3.Name='Div3';
Div3.style.height='259';
Div3.style.width='455';
Div3.style.position='absolute';
Div3.style.left='2';
Div3.style.top='20';
TabSet1.Add('Div1',Div1);;
TabSet1.Add('Div2',Div2);;
TabSet1.Add('Div3',Div3);;
TabSet1.SetSelectIndex(0);;

现在我们要将它集成到webshop的可视化IDE环境中.

在webshop/jcl目录下创建TabSet.XML文件,内容如下:

<?xml version="1.0" encoding="gb2312"?>
<class classname="TabSet" visible="true" iscontainer="true" extends="Div">
<private>
</private>
<protect>
</protect>
<public>
</public>
<published>
<properties>
<property name="SelectIndex" type="Integer">
</property>
</properties>
<methods>
</methods>
<events>
<event name="OnTabChange">
<params>
<param name="sender">
</param>
<param name="selectIndex">
</param>
</params>
</event>
</events>
</published>
</class>