開發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.onclick=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