1<!DOCTYPE 2 html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 4<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 7 <title>The Complete Menu Solution demo page</title> 8<!-- 9<script type="text/javascript" src="at.js" ></script> --> 10 <script type="text/javascript" src="cms.js" ></script> 11 </head> 12 <body bgcolor="#ffffff"> 13 <a href="demo.html">Russian demo</a> 14 <table border="0" height="100%" width="100%"> 15 <tr> 16 <td valign="top"> 17 <ul id="tabmenu" style="display: none"> 18 <li class="CmsMenuItemFolderExpanded"><a href="#" class="tabHead">About template</a> 19 <ul class="tabBody"> 20 <li class="tabBodyContainer"> 21 <div> 22 'TebControl' component is the plugin for <a href="/">"The Complete Menu Solution"</a> project.<br /> 23 Tech info: 24 <ul> 25 <li>Template: TabControl, skin: FlatPanel</li> 26 <li>Plugin used<br /> 27 <b>followlinkcontent</b>: allows to follow the link only when user clicks on filled area<br /> 28 </li> 29 </ul> 30 </div> 31 </li> 32 </ul> 33 </li> 34 <li><a href="#" class="tabHead">Ajax-driven tree menu</a> 35 <ul class="tabBody"> 36 <li class="tabBodyContainer"> 37 <div> 38 Dynamic menu allows runtime updates of the menu contents. It's very useful, when you have to operate with the big trees.<br /> 39 <br /> 40 Tech info: 41 <ul> 42 <li>Template: SimpleTree, skin: WindowsExplorer</li> 43 <li>Plugin used 44 <dl> 45 <dt><b>followlinkcontent</b></dt><dd>allows to follow the link only when user clicks on filled area</dd> 46 <dt><b>ajaxum</b></dt><dd>Performs lookup and menu data retrieval</dd> 47 </dl> 48 </li> 49 </ul> 50 <br /> 51 <ul id="ajaxum_menu" style="display: none"> 52 <li><a href="#">Submenu 1</a> 53 <ul title="1"><!-- 1 --></ul> 54 </li> 55 <li><a href="#">Submenu 2</a> 56 <ul title="2"><!-- 2 --></ul> 57 </li> 58 <li><a href="#">Submenu 3 (error @ server)</a> 59 <ul title="3"><!-- 3 --></ul> 60 </li> 61 <li><a href="#">Submenu 4 (error @ client)</a> 62 <ul></ul> 63 </li> 64 </ul> 65 <script type="text/javascript"> 66 function ajaxumfetcher (s, callback) { 67 var ret = ""; 68 switch(s) { 69 case "1": 70 ret = "<li><a href=\"#\">Ajax test1</a>"+ 71 "<ul>"+ 72 "<li><a href=\"#\">Inner folder1</a></li>"+ 73 "<li><a href=\"#\">Inner folder2</a></li>"+ 74 "<li><a href=\"#\">Inner folder3</a></li>"+ 75 "</ul>"+ 76 "</li>"; 77 break; 78 case "2": 79 ret = "<li><a href=\"#\">Ajax test2</a>"+ 80 "<ul>"+ 81 "<li><a href=\"#\">Inner 2 folder1</a></li>"+ 82 "<li><a href=\"#\">Inner 2 folder2</a></li>"+ 83 "<li><a href=\"#\">Inner 2 folder3</a></li>"+ 84 "</ul>"+ 85 "</li>"; 86 break; 87 case "3": 88 ret = "something goes wrong"; 89 break; 90 } 91 92 setTimeout(function(){callback ({ 'state' : s%3, 'response' : ret})},500); 93 } 94 var ajaxum = new CompleteMenuSolution; 95 var options = { 'theme' : { 96 'name' : 'SimpleTree/WindowsExplorerAjaxum' 97 }, 98 modifiers : ['ajaxum'], 99 toggleMenuOnClick : 1, 100 openTimeout : 0, 101 closeTimeout: 0, 102 closeSiblings : false, 103 'transitions' : { 104 }, 105 ajaxum : { 106 fetcher : ajaxumfetcher 107 } 108 } 109 ajaxum.initMenu('ajaxum_menu',options); 110 </script> 111 </div> 112 </li> 113 </ul> 114 </li> 115 <li><a href="#" class="tabHead">Vertical menu</a> 116 <ul class="tabBody"> 117 <li class="tabBodyContainer"> 118 <div> 119 <ul> 120 <li>Template: ClassicVertical, skin: CssHover</li> 121 <li>Transition used 122 <dl> 123 <dt><b>blend</b></dt><dd> blending transformation</dd> 124 <dt><b>clip</b></dt><dd> clipping transformation </dd> 125 <dt><b>windowborderschecker</b></dt><dd>set special CSS classes on elements, appearing outside window borders</dd> 126 </dl> 127 </li> 128 <li>Plugin used 129 <dl> 130 <dt><b>activeontop</b></dt><dd>adjust zIndex to put active menu item on top of others</dd> 131 </dl> 132 </li> 133 </ul> 134 <br /> 135 <ul id="cvert_menu" style="display: none"> 136 <li><a href="#">Ipsum</a> 137 <ul> 138 <li><a href="#"> lorem asdf</a></li> 139 <li><a href="#"> adipiscing </a> 140 <ul> 141 <li><a href="#"> dolor </a></li> 142 <li><a href="#"> vestibulum </a></li> 143 </ul> 144 </li> 145 <li><a href="#"> consectetuer </a> 146 <ul> 147 <li><a href="#"> elit </a> 148 <ul> 149 <li><a href="#"> elit </a> 150 <ul> 151 <li><a href="#"> elit </a> 152 <ul> 153 <li><a href="#"> elit </a></li> 154 <li><a href="#"> ipsum </a></li> 155 <li><a href="#"> Donec </a></li> 156 </ul> 157 </li> 158 <li><a href="#"> ipsum </a></li> 159 <li><a href="#"> Donec </a></li> 160 </ul> 161 </li> 162 <li><a href="#"> ipsum </a></li> 163 <li><a href="#"> Donec </a></li> 164 </ul> 165 </li> 166 <li><a href="#"> ipsum </a></li> 167 <li><a href="#"> Donec </a></li> 168 </ul> 169 </li> 170 <li><a href="#" > sit amet </a></li> 171 </ul> 172 </li> 173 <li><a href="#" class="title">Ipsum</a> 174 <ul> 175 <li><a href="#"> lorem </a></li> 176 <li><a href="#"> adipiscing </a> 177 <ul> 178 <li><a href="#"> dolor </a></li> 179 <li><a href="#"> vestibulum </a></li> 180 </ul> 181 </li> 182 <li><a href="#"> consectetuer </a> 183 <ul> 184 <li><a href="#"> elit </a></li> 185 <li><a href="#"> ipsum </a></li> 186 <li><a href="#"> Donec </a></li> 187 </ul> 188 </li> 189 <li><a href="#" > sit amet </a></li> 190 <li><a href="#" > sit amet </a></li> 191 <li><a href="#" > sit amet </a></li> 192 <li><a href="#" > sit amet </a></li> 193 <li><a href="#"> consectetuer </a> 194 <ul> 195 <li><a href="#"> elit </a></li> 196 <li><a href="#"> ipsum </a></li> 197 <li><a href="#"> Donec </a></li> 198 </ul> 199 </li> 200 <li><a href="#"> consectetuer </a> 201 <ul> 202 <li><a href="#"> elit </a></li> 203 <li><a href="#"> ipsum </a></li> 204 <li><a href="#"> Donec </a></li> 205 </ul> 206 </li> 207 </ul> 208 </li> 209 </ul> 210 <script type="text/javascript"> 211 var cvert = new CompleteMenuSolution; 212 var options = { 'theme' : { 213 'name' : 'ClassicVertical/CssHover' 214 }, 215 length : 200, 216 toggleMenuOnClick : false, 217 openTimeout : 10, 218 closeTimeout: 500, 219 closeSiblings : true, 220 'transitions' : { 221 'blend' : { 222 'start' : 0, 223 'end' : 1 224 } 225 , 226 'clip' : { 227 'direction' : 'se' 228 } 229 } 230 } 231 cvert.initMenu('cvert_menu',options); 232 </script> 233 </div> 234 </li> 235 </ul> 236 </li> 237 <li><a href="#" class="tabHead">Tree menu</a> 238 <ul class="tabBody"> 239 <li class="tabBodyContainer"> 240 <div> 241 <ul> 242 <li>Template: SimpleTree</li> 243 <li>Plugin used<br /> 244 <dl> 245 <dt><b>followlinkcontent</b></dt><dd>allows to follow the link only when user clicks on filled area</dd> 246 <dt><b>groupcheckbox</b></dt> 247 <dd>manage checkbox in the categories<br /> 248 checked parent checks all children<br /> 249 on parent reset, reset all children<br /> 250 on all childs selection - parent is selected<br /> 251 </dd> 252 </li> 253 </ul> 254 <br /> 255 <ul id="treem_menu" style="display: none"> 256 <li class="close"><a href="#"><input type="checkbox" />Ipsum</a> 257 <ul> 258 <li><a href="#"><input type="checkbox" /> lorem</a></li> 259 <li><a href="#"><input type="checkbox" /> adipiscing </a> 260 <ul> 261 <li><a href="#"><input type="checkbox" /> dolor </a></li> 262 <li><a href="#"><input type="checkbox" /> vestibulum </a></li> 263 </ul> 264 </li> 265 <li><a href="#"><input type="checkbox" /> consectetuer </a> 266 <ul> 267 <li><a href="#"><input type="checkbox" /> elit </a></li> 268 <li><a href="#"><input type="checkbox" /> ipsum </a></li> 269 <li><a href="#"><input type="checkbox" /> Donec </a></li> 270 </ul> 271 </li> 272 <li><a href="#" ><input type="checkbox" /> sit amet </a></li> 273 </ul> 274 </li> 275 <li><a href="#" class="title"><input type="checkbox" /> Ipsum</a> 276 <ul> 277 <li><a href="#"><input type="checkbox" /> lorem </a></li> 278 <li><a href="#"><input type="checkbox" /> adipiscing </a> 279 <ul> 280 <li><a href="#"><input type="checkbox" /> dolor </a></li> 281 <li><a href="#"><input type="checkbox" /> vestibulum </a></li> 282 </ul> 283 </li> 284 <li><a href="#"><input type="checkbox" /> consectetuer </a> 285 <ul> 286 <li><a href="#"><input type="checkbox" /> elit </a></li> 287 <li><a href="#"><input type="checkbox" /> ipsum </a></li> 288 <li><a href="#"><input type="checkbox" /> Donec </a></li> 289 </ul> 290 </li> 291 <li><a href="#" ><input type="checkbox" /> sit amet </a></li> 292 </ul> 293 </li> 294 </ul> 295 <script type="text/javascript"> 296 var treem = new CompleteMenuSolution; 297 var options = { 'theme' : { 298 'name' : 'SimpleTree' 299 }, 300 'modifiers' : [ 301 'groupcheckbox' 302 ], 303 maxOpenDepth : 4, 304 flagClosedClass : 'close', 305 toggleMenuOnClick : true, 306 incrementalConvert : false, 307 openTimeout : 0, 308 closeTimeout: 0 309 } 310 treem.initMenu('treem_menu',options); 311 </script> 312 </div> 313 </li> 314 </ul> 315 </li> 316 <li><a href="#" class="tabHead">Horizontal menu</a> 317 <ul class="tabBody"> 318 <li class="tabBodyContainer"> 319 <div> 320 <ul> 321 <li>Template: ClassicHorizontal</li> 322 <li>Transition used 323 <dl> 324 <dt><b>blend</b></dt><dd> blending transformation</dd> 325 <dt><b>clip</b></dt><dd> clipping transformation </dd> 326 </dl> 327 </li> 328 </ul> 329 <br /> 330 <ul id="chor_menu" style="display: none"> 331 <li><a href="#"> Lorem </a> 332 <ul> 333 <li><a href="#"> Ipsum </a></li> 334 <li><a href="#"> Dolor </a></li> 335 <li><a href="#"> consectetuer </a></li> 336 <li><a href="#"> vestibulum </a></li> 337 </ul> 338 </li> 339 <li><a href="#"> elit </a> 340 <ul> 341 <li><a href="#"> sit amet </a></li> 342 <li><a href="#"> adipiscing </a> 343 <ul> 344 <li><a href="#"> elit </a></li> 345 <li><a href="#"> sit amet </a></li> 346 <li><a href="#"> Donec </a></li> 347 </ul> 348 </li> 349 <li><a href="#"> Lorem </a></li> 350 </ul> 351 </li> 352 <li><a href="#"> Ipsum </a> 353 <ul> 354 <li><a href="#"> consectetuer </a></li> 355 <li><a href="#"> adipiscing </a> 356 <ul> 357 <li><a href="#"> elit </a></li> 358 <li><a href="#"> sit amet </a></li> 359 </ul> 360 </li> 361 <li><a href="#"> vestibulum </a></li> 362 <li><a href="#"> elit </a> 363 <ul> 364 <li><a href="#"> consectetues </a></li> 365 <li><a href="#"> Ipsum </a></li> 366 </ul> 367 </li> 368 </ul> 369 </li> 370 <li><a href="#"> Donec </a></li> 371 <li><a href="#"> sit amet </a></li> 372 <li><a href="#"> elit </a></li> 373 </ul> 374 <script type="text/javascript"> 375 var chor = new CompleteMenuSolution; 376 var options = { 'theme' : { 377 'name' : 'ClassicHorizontal' 378 }, 379 length : 300, 380 toggleMenuOnClick : false, 381 openTimeout : 50, 382 closeTimeout: 50, 383 closeSiblings : false, 384 'transitions' : { 385 'blend' : { 386 'start' : 0, 387 'end' : 1 388 } 389 , 390 'clip' : { 391 'direction' : ['se','sw'] 392 } 393 } 394 } 395 chor.initMenu('chor_menu',options); 396 </script> 397 </div> 398 </li> 399 </ul> 400 </li> 401 </ul> 402 </td> 403 </tr> 404 </table> 405 <script type="text/javascript"> 406 var tabmenu = new CompleteMenuSolution; 407 var options = { 'theme' : { 408 'name' : 'TabControl/FlatPanel' 409 }, 410 length : 500, 411 interval: 1, 412 'transitions' : { 413 'blend' : { 414 'start' : 0, 415 'end' : 1 416 } 417 }, 418 toggleMenuOnClick : 2, 419 openTimeout : 0, 420 closeTimeout: 0, 421 closeSiblings : true, 422 incrementalConvert: false 423 } 424 tabmenu.initMenu('tabmenu',options); 425 </script> 426<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 427</script> 428<script type="text/javascript"> 429_uacct = "UA-851865-2"; 430urchinTracker(); 431</script> 432</body> 433</html>