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

 

                                    开发扩展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.οnclick=TabSet_ButtonClick;

}

---

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

function TabSet_ButtonClick(){
this.tab.style.display='block';
if(this.owner.SelectTab) 
if(this.owner.SelectTab!=this.tab){
this.owner.SelectTab.style.display='none';
this.owner.SelectTab.tabbutton.parentNode.style.backgroundColor='';
// this.owner.SelectTab.tabbutton.style.fontSize=12;
this.owner.SelectTab.tabbutton.tabplace.style.padding=0;
}
this.owner.SelectTab=this.tab;
this.owner.SelectIndex=this.tab.Index;

this.parentNode.style.backgroundColor=clWhite;
this.tabplace.style.padding=2;
if(this.owner.OnTabChange)this.owner.OnTabChange(this.owner,this.tab.Index);

// this.style.fontSize=16;
}
function TabSet_GetSelectTab(){
return this.SelectTab;
}

function TabSet_GetSelectIndex(){
if(this.SelectTab)
return this.SelectTab.Index;
}

function TabSet_SetSelectIndex(i){
if(isInspect)return;
if(i==null)i=0;
var button=this.Buttons[i];
if(button){
if(isIE)
button.click();
else
button.onclick();
}
}

function TabSet_SetSelectTab(i){
var tab=this.Items[i];
if(tab){
if(isIE)
tab.tabbutton.click();
else
tab.tabbutton.onclick();
}
}

---

好了,现在这个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>

然后打开webshop/config/webshop_palette.xml文件,加入下面一行:

<class classname="TabSet" file="" title="" icon="images/compalette/tabset.gif">
</class>
从而在webshop的元件选项板上增加了TabSet控件.

---

现在打开webshop,可以看到webshop的元件选项板上已多了一个TabSet,现在就可以可视化地拖拉并创建子页了,至此TabSet开发完成并集成到WebShop的IDE环境中.

以上开发基于WebShop 2.2版本.要下载这个TabSet的代码,可以到www.joyistar.com