Develop the tabset Ajax control and integrate it into webshop IDE.

 

Develop and extend the Ajax control -- tabset

Today's topic is to develop the tabset control and integrate it into the webshop IDE environment.

The preliminary consideration is that tabset uses table as the page header to add pages without limit (that is, to add TD). Then, tabset has the add method to add a div as its subpage.

The final style looks like this:

The following is the tabset constructor.

// Tab Control
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;
}

Implement the add method of tabset

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 = '& nbsp;' + title + '& nbsp ;';
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;

}

Implement the tabset page header Click Event and switch pages after clicking

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 ();
}
}

Now, this tabset can work. Use it like the following code.

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 = '123 ';
Tabset1.style. width = '123 ';
Tabset1.style. Position = 'absolute ';
Tabset1.style. Left = '99 ';
Tabset1.style. Top = '99 ';
Tabset1.selectindex = 0;
Div1.name = 'div1 ';
Div1.style. Height = '000000 ';
Div1.style. width = '000000 ';
Div1.style. Position = 'absolute ';
Div1.style. Left = '2 ';
Div1.style. Top = '20 ';
Div2.name = 'div2 ';
Div2.style. Height = '123 ';
Div2.style. width = '123 ';
Div2.style. Position = 'absolute ';
Div2.style. Left = '2 ';
Div2.style. Top = '20 ';
Div3.name = 'div3 ';
Div3.style. Height = '123 ';
Div3.style. width = '20140901 ';
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 );;

Now we need to integrate it into the visual IDE environment of webshop.

Create the tabset. xml file in the webshop/jcl directory. The content is as follows:

<? 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>

Open the webshop/config/webshop_palette.xml file and add the following line:

<Class classname = "tabset" file = "" Title = "" icon = "images/compalette/tabset.gif">
</Class>
The tabset control is added to the webshop component palette.

Now, open webshop and you can see that a tabset is added to the webshop component palette. Now you can drag and create subpages visually, now tabset has been developed and integrated into the IDE environment of webshop.

The above development is based on webshop 2.2. to download the tabset code, you can go to www.joyistar.com