This sample demonstrates the WebTabSet children items support for key/value pairs.
This feature allows each entry in the tab control to contain a unique key and display value.
The unique key is used to identify the item, and the display value is a friendly description for the end-user.
To use children key/value pairs, the text for each item needs to be prefixed with a key string.
For example:
"[S101]Clothing & Sports"
"[S102]Home & Electronics"
When the WebTabSet control sees all the children items in this format, it parses each item using the following form:
"[key]value".
The square brackets surround the key and the rest of the string contains the value.
This feature is especially useful for web applications that need to be localized.
When using key/value pairs, the path strings passed to and from WebTabSet contain both components.
For example:
"/KeyValue:[S101]Clothing & Sports/KeyValue:[D102]Sports/KeyValue:[PS101]Baseball"
To simplify working with such paths, WebTabSet implements client-side methods, namely
cwtsExtractKeys,
cwtsExtractValues and
cwtsAppendKeyValue, for parsing and appending to these strings.
Below is a lookup table for the available key/value pairs used in this sample:
Stores |
Departments |
Products (Clothing) |
Products (Sports) |
Products (Home) |
Products (Electronics) |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
Key |
Value |
S101 |
Clothing & Sports |
D101 |
Clothing |
PC101 |
Gloves |
PS101 |
Baseball |
PH101 |
Cabinet |
PE101 |
Camcorder |
S102 |
Home & Electronics |
D102 |
Sports |
PC102 |
Hat |
PS102 |
Basketball |
PH102 |
Chair |
PE102 |
Camera |
|
|
D103 |
Home |
PC103 |
Jacket |
PS103 |
Bicycle |
PH103 |
Desk |
PE103 |
Cell phone |
|
|
D104 |
Electronics |
PC104 |
Pants |
PS104 |
Football |
PH104 |
Lamp |
PE104 |
Ear buds |
|
|
|
|
PC105 |
Shirt |
PS105 |
Golf clubs |
PH105 |
Picture |
PE105 |
Laptop |
|
|
|
|
PC106 |
Shoes |
PS106 |
Helmet |
PH106 |
Plant |
PE106 |
MP3 player |
|
|
|
|
PC107 |
Shorts |
PS107 |
Ice skates |
PH107 |
Rug |
PE107 |
Tablet |
|
|
|
|
PC108 |
Socks |
PS108 |
Skateboard |
PH108 |
Sofa |
PE108 |
Television |
|
|
|
|
PC109 |
Sweater |
PS109 |
Sneakers |
PH109 |
Table |
PE109 |
Watch |
Pressing the "Submit" button simulates saving of your selection by writing the results below:
Click the "Reset" link to clear your selection.