1

1. Overview

Comb is a set of WEB component

Written in JavaScript, HTC, CSS, HTML

There are two solutions for most of component. One is JavaScript, the other one is HTC. The function is same. You can use either one.

Support IE 5.5+

Data formation is XML

Easy to change views by CSS

Easy to add your own logic by java script

2. CombMenuBar

2.1 Feature

A navigator will shown if it is the number of menu items is larger than a number

2.2. Usage

var combMenuBar=new CombMenuBar('combMenuBar','div_combMenuBar', 'self.content','6');

// necessary

// Parameters: (instanceName, targetId, targetFrame, visibleLength)

// instanceName: using for identify multiple MenuBar in one page

// targetId: html component id to display this MenuBar, usually, it is a <div>

// targetFrame: hyperlink target frame. For example, self/parent/parent.right

// visibleLength: the number of menu will display. If the number of menu is larger than this, a navigator will display

</script>

</head>

<body>

<div id="div_combMenuBar"></div>// necessary. The place to display MenuBar

<xml onDataSetComplete="combMenuBar.init(this);"> // necessary. XML Data

<combMenuBar selectedIndex="1">// selectedIndex is optional, default value is 0

<combMenuItem value="Google1" url="http://www.google.com"/>// value/url are necessary

</combMenuBar>

</xml>

2.2 Usage of XML generator

XML generator is written in Java.

See example in CombTest.java

CombMenuBar menuBar = new CombMenuBar();//MenuBar

menuBar.addCombMenuItem(new CombMenuItem("Google1", "http://www.google.com"));//add a menu item

menuBar.addCombMenuItem(new CombMenuItem("Google2", "http://www.google.com"));

menuBar.addCombMenuItem(new CombMenuItem("Google3", "http://www.google.com"));

menuBar.setSelectedIndex(2);//set selected index of menu item. Default is 0

System.out.println(menuBar.toString());//generate xml

3. HTCCombMenuBar

3.1 Feature

Same as CombMenuBar

3.2 Usage

</head>

<body>

// necessary. Place to put HTCCombMenuBar

// Parameters:

// target: hyperlink target frame. For example, self/parent/parent.right

// visibleLength: the number of menu will display. If the number of menu is larger than this, a navigator will display

//classPrefix: the prefix of CSS element. If you want HTCCombMenuBars display in different view, using different class prefix in CSS. Default value is CombMenuBar.

For example,

.combMenuBar{behavior:url(../htc/CombMenuBar.htc);}//this one can’t change

.combMenuBar_table{width:800px}//view set 1

.combMenuBar_td_upperLine{width:100%;height:1px;}

…

.combMenuBar2_table{width:600px}//view set 2

.combMenuBar2_td_upperLine{width:100%;height:2px;}

…

<xml> // necessary. XML Data

<combMenuBar selectedIndex="1">// selectedIndex is optional, default value is 0

<combMenuItem value="Google1" url="http://www.google.com"/>// value/url are necessary

</combMenuBar>

</xml>

3.3 Usage of XML generator

Same as CombMenuBar

4. HTCTabPage

4.1 Feature

Don’t have JavaScript version

4.2 Usage

</head>

<body>

//necessary, the place to display CombTabPage

//classPrefix: the prefix of CSS element. See above

<div combTabPage="true" tabTitle="Table">//first tabPage. combTabPage="true" is necessary

<br><br><table><tr><td>This is a TABLE</td></tr></table><br><br>

</div>

<div combTabPage="true" tabTitle="Word">//second tabPage.

</div>

</div>

<br><a href="http://www.google.com">Google</a>

</div>

<br>

5. CombTree

5.1 Feature

Unlimited sub nodes

Click root node to expand/ collapse all

Multi selectable of nodes, and provide interface to get all selected nodes.

Link to target when click on a node, or execute a self-defined JS function.

Add self-defined attribute to each node. And get it by provided interface in Util.js

5.2 Usage

var combTree=new CombTree('combTree','div_combTree','self.content','true');

//necessary

// Parameters: (instanceName, targetId, targetFrame, selectable)

// instanceName: using for identify multiple MenuTree in one page

// targetId: html component id to display this MenuTree, usually, it is a <div>

// targetFrame: hyperlink target frame. For example, self/parent/parent.right

// selectable: if nodes are selectable. If it is not, the checkbox will not display

</script>

</head>

<body>

<div id="div_combTree" style="width:200px;"></div>//necessary, the place to display CombMenuTree

<xml ondatasetcomplete="combTree.init(this);"> //necessary. XML data

<combTree title="Root">//root and title

<combTreeNode value="Site">//tree nodes.

<extendedProperties workid="333"/>//self-defined attributes

</combTreeNode>

<combTreeNode value="MSN" selected="true" url="http://www.msn.com" onClick="mm_func()"/>//execute self-defined JS function instead of hyperlink

</combTreeNode>

</combTreeNode>

</combTree>

</xml>

5.3 Usage of XML generator

XML generator is written in Java.

See example in CombTest.java

CombTree tree = new CombTree();//Tree

tree.setTitle("Root");//root node

CombTreeNode root = new CombTreeNode("Site", null, null, null);//tree node

tree.addCombTreeNode(root);//add tree node to root or other tree node

CombTreeNode root1 = new CombTreeNode("Entertainment", null, null, null);

CombTreeNode root2 = new CombTreeNode("Search", null, null, null);

root.addSubCombTreeNode(root1);

root.addSubCombTreeNode(root2);

CombTreeNode root11 = new CombTreeNode("SourceForge", "http://sourceforge.net", null, null);

root1.addSubCombTreeNode(root11);

CombTreeNode root111 = new CombTreeNode("Google", "http://www.google.com", null, null);

root111.addExtendedProperty("workid", "333");//add self-defined attribute to a node

CombTreeNode root121 = new CombTreeNode("MSN", "http://www.msn.com", "mm_func()", "true");

CombTreeNode root122 = new CombTreeNode("Google", "http://www.google.com", "mm_func()", "true");

root11.addSubCombTreeNode(root111);

root11.addSubCombTreeNode(root121);

root11.addSubCombTreeNode(root122);

CombTree tree2 = tree.getSubCombTree("workid", "333");//you can get a sub node as a new tree

CombTreeNode _root = new CombTreeNode("_Site", null, null, null);

tree.addCombTreeNode(_root);

System.out.println(tree.toString());//generate xml

6. HTCCombTree

6.1 Feature

Same as CombTree

6.2 Usage

</head>

<body>

// necessary, the place to display MenuTree

// Parameters:

// target: hyperlink target frame. For example, self/parent/parent.right

// selectMode: if nodes are selectable. If it is not, the checkbox will not display

//classPrefix: the prefix of CSS element. See above

<xml>//necessary. XML data

<combTree title="Root">//root and title

<combTreeNode value="Site">//tree nodes.

<extendedProperties workid="333"/>//self-defined attributes

</combTreeNode>

<combTreeNode value="MSN" selected="true" url="http://www.msn.com" onClick="mm_func()"/>//execute self-defined JS function instead of hyperlink

</combTreeNode>

</combTreeNode>

</combTree>

</xml>

</div>

6.3 Usage of XML generator

Same as CombTree