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_en.html">English 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">� �������</a>
19       <ul class="tabBody">
20        <li class="tabBodyContainer">
21         <div>
22           ��������� "��������" �������� �������� ������� <a href="/">"The Complete Menu Solution"</a>.<br />
23           ����������� ��������������:
24           <ul>
25            <li>������: TabControl, ������� ���: FlatPanel</li>
26            <li>�������<br />
27             <b>followlinkcontent</b>: ��������� ������� �� ������ �� ��������� �������<br />
28            </li>
29           </ul>
30         </div>
31        </li>
32       </ul>
33      </li>
34      <li><a href="#" class="tabHead">������������ (Ajax) ����</a>
35       <ul class="tabBody">
36        <li class="tabBodyContainer">
37         <div>
38          ������������ ���� ��������� ���������� �������� � �������� ����������������, ��������� ������ � �������,
39          �� ���� �������������.<br />
40          <br />
41          ����������� ��������������:
42          <ul>
43           <li>������: SimpleTree, ������� ���: WindowsExplorer</li>
44           <li>�������
45            <dl>
46             <dt><b>followlinkcontent</b></dt><dd>��������� ������� �� ������ �� ��������� �������</dd>
47             <dt><b>ajaxum</b></dt><dd></dd>
48            </dl>
49           </li>
50          </ul>
51          <br />
52          <ul id="ajaxum_menu" style="display: none">
53           <li><a href="#">Submenu 1</a>
54            <ul title="1"><!-- 1 --></ul>
55           </li>
56           <li><a href="#">Submenu 2</a>
57            <ul title="2"><!-- 2 --></ul>
58           </li>
59           <li><a href="#">Submenu 3 (error @ server)</a>
60            <ul title="3"><!-- 3 --></ul>
61           </li>
62           <li><a href="#">Submenu 4 (error @ client)</a>
63            <ul></ul>
64           </li>
65          </ul>
66          <script type="text/javascript">
67            function ajaxumfetcher (s, callback) {
68              var ret = "";
69              switch(s) {
70                case "1":
71                  ret = "<li><a href=\"#\">Ajax test1</a>"+
72                          "<ul>"+
73                           "<li><a href=\"#\">Inner folder1</a></li>"+
74                           "<li><a href=\"#\">Inner folder2</a></li>"+
75                           "<li><a href=\"#\">Inner folder3</a></li>"+
76                          "</ul>"+
77                         "</li>";
78                  break;
79                case "2":
80                  ret = "<li><a href=\"#\">Ajax test2</a>"+
81                          "<ul>"+
82                           "<li><a href=\"#\">Inner 2 folder1</a></li>"+
83                           "<li><a href=\"#\">Inner 2 folder2</a></li>"+
84                           "<li><a href=\"#\">Inner 2 folder3</a></li>"+
85                          "</ul>"+
86                         "</li>";
87                  break;
88                case "3":
89                  ret = "something goes wrong";
90                  break;
91              }
92
93              setTimeout(function(){callback ({ 'state' : s%3, 'response' : ret})},500);
94            }
95            var ajaxum = new CompleteMenuSolution;
96            var options = { 'theme' : {
97                              'name' : 'SimpleTree/WindowsExplorerAjaxum'
98                            },
99                            modifiers : ['ajaxum'],
100                            toggleMenuOnClick : 1,
101                            openTimeout : 0,
102                            closeTimeout: 0,
103                            closeSiblings : false,
104                            'transitions' : {
105                            },
106                            ajaxum : {
107                              fetcher : ajaxumfetcher
108                            }
109                          }
110            ajaxum.initMenu('ajaxum_menu',options);
111          </script>
112         </div>
113        </li>
114       </ul>
115      </li>
116      <li><a href="#" class="tabHead">������������ ����</a>
117       <ul class="tabBody">
118        <li class="tabBodyContainer">
119         <div>
120          <ul>
121           <li>������: ClassicVertical, ������� ���: CssHover</li>
122           <li>��������
123            <dl>
124             <dt><b>blend</b></dt><dd> ������� "����������" ������� �� ����������� �� ��������� ������������� ��������� ��� ��������, � �������� ��� ��������</dd>
125             <dt><b>clip</b></dt><dd> ������������ ���� � ������������ ������������ ��� ��������</dd>
126             <dt><b>windowborderschecker</b></dt><dd>������������� ����������� CSS ������ ��� ���������, ������� ��� �������� ����� ��������� �� ������� ����</dd>
127            </dl>
128           </li>
129           <li>�������
130            <dl>
131             <dt><b>activeontop</b></dt><dd> �������� �������� ������� ������ ��������� ��������</dd>
132            </dl>
133           </li>
134          </ul>
135          <br />
136          <ul id="cvert_menu" style="display: none">
137           <li><a href="#">Ipsum</a>
138            <ul>
139             <li><a href="#"> lorem           asdf</a></li>
140             <li><a href="#"> adipiscing </a>
141              <ul>
142               <li><a href="#"> dolor </a></li>
143               <li><a href="#"> vestibulum </a></li>
144              </ul>
145             </li>
146             <li><a href="#"> consectetuer </a>
147              <ul>
148               <li><a href="#"> elit </a>
149                <ul>
150                 <li><a href="#"> elit </a>
151                  <ul>
152                   <li><a href="#"> elit </a>
153                    <ul>
154                     <li><a href="#"> elit </a></li>
155                     <li><a href="#"> ipsum </a></li>
156                     <li><a href="#"> Donec </a></li>
157                    </ul>
158                   </li>
159                   <li><a href="#"> ipsum </a></li>
160                   <li><a href="#"> Donec </a></li>
161                  </ul>
162                 </li>
163                 <li><a href="#"> ipsum </a></li>
164                 <li><a href="#"> Donec </a></li>
165                </ul>
166               </li>
167               <li><a href="#"> ipsum </a></li>
168               <li><a href="#"> Donec </a></li>
169              </ul>
170             </li>
171             <li><a href="#" > sit amet </a></li>
172            </ul>
173           </li>
174           <li><a href="#" class="title">Ipsum</a>
175            <ul>
176             <li><a href="#"> lorem </a></li>
177             <li><a href="#"> adipiscing </a>
178              <ul>
179               <li><a href="#"> dolor </a></li>
180               <li><a href="#"> vestibulum </a></li>
181              </ul>
182             </li>
183             <li><a href="#"> consectetuer </a>
184              <ul>
185               <li><a href="#"> elit </a></li>
186               <li><a href="#"> ipsum </a></li>
187               <li><a href="#"> Donec </a></li>
188              </ul>
189             </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="#" > sit amet </a></li>
194             <li><a href="#"> consectetuer </a>
195              <ul>
196               <li><a href="#"> elit </a></li>
197               <li><a href="#"> ipsum </a></li>
198               <li><a href="#"> Donec </a></li>
199              </ul>
200             </li>
201             <li><a href="#"> consectetuer </a>
202              <ul>
203               <li><a href="#"> elit </a></li>
204               <li><a href="#"> ipsum </a></li>
205               <li><a href="#"> Donec </a></li>
206              </ul>
207             </li>
208            </ul>
209           </li>
210          </ul>
211          <script type="text/javascript">
212             var cvert = new CompleteMenuSolution;
213             var options = { 'theme' : {
214                               'name' : 'ClassicVertical/CssHover'
215                             },
216                             length : 200,
217                             toggleMenuOnClick : false,
218                             openTimeout : 10,
219                             closeTimeout: 500,
220                             closeSiblings : true,
221                             'transitions' : {
222                               'blend' : {
223                                 'start' : 0,
224                                 'end'   : 1
225                               }
226                               ,
227                               'clip' : {
228                                 'direction' : 'se'
229                               }
230                             }
231                           }
232             cvert.initMenu('cvert_menu',options);
233          </script>
234         </div>
235        </li>
236       </ul>
237      </li>
238      <li><a href="#" class="tabHead">����������� ����</a>
239       <ul class="tabBody">
240        <li class="tabBodyContainer">
241         <div>
242          <ul>
243           <li>������: SimpleTree</li>
244           <li>������� <br />
245            <dl>
246             <dt><b>followlinkcontent</b></dt><dd>��������� ������� �� ������ �� ��������� �������</dd>
247             <dt><b>groupcheckbox</b></dt>
248             <dd>��������� �����������<br />
249              ��� ������ �������� ���������� ��� ���������� ���������<br />
250              ��� ������ �������� ������������ ����������<br />
251              ��� ������ ���� ���������� - ���������� � ��������<br />
252             </dd>
253           </li>
254          </ul>
255          <br />
256          <ul id="treem_menu" style="display: none">
257           <li class="close"><a href="#"><input type="checkbox" />Ipsum</a>
258            <ul>
259             <li><a href="#"><input type="checkbox" /> lorem</a></li>
260             <li><a href="#"><input type="checkbox" /> adipiscing </a>
261              <ul>
262               <li><a href="#"><input type="checkbox" /> dolor </a></li>
263               <li><a href="#"><input type="checkbox" /> vestibulum </a></li>
264              </ul>
265             </li>
266             <li><a href="#"><input type="checkbox" /> consectetuer </a>
267              <ul>
268               <li><a href="#"><input type="checkbox" /> elit </a></li>
269               <li><a href="#"><input type="checkbox" /> ipsum </a></li>
270               <li><a href="#"><input type="checkbox" /> Donec </a></li>
271              </ul>
272             </li>
273             <li><a href="#" ><input type="checkbox" /> sit amet </a></li>
274            </ul>
275           </li>
276           <li><a href="#" class="title"><input type="checkbox" /> Ipsum</a>
277            <ul>
278             <li><a href="#"><input type="checkbox" /> lorem </a></li>
279             <li><a href="#"><input type="checkbox" /> adipiscing </a>
280              <ul>
281               <li><a href="#"><input type="checkbox" /> dolor </a></li>
282               <li><a href="#"><input type="checkbox" /> vestibulum </a></li>
283              </ul>
284             </li>
285             <li><a href="#"><input type="checkbox" /> consectetuer </a>
286              <ul>
287               <li><a href="#"><input type="checkbox" /> elit </a></li>
288               <li><a href="#"><input type="checkbox" /> ipsum </a></li>
289               <li><a href="#"><input type="checkbox" /> Donec </a></li>
290              </ul>
291             </li>
292             <li><a href="#" ><input type="checkbox" /> sit amet </a></li>
293            </ul>
294           </li>
295          </ul>
296          <script type="text/javascript">
297             var treem = new CompleteMenuSolution;
298             var options = { 'theme' : {
299                               'name' : 'SimpleTree'
300                             },
301                             'modifiers' : [
302                               'groupcheckbox'
303                             ],
304                             closeSiblings : false,
305                             maxOpenDepth : 4,
306                             flagClosedClass : 'close',
307                             toggleMenuOnClick : true,
308                             incrementalConvert : false,
309                             openTimeout : 0,
310                             closeTimeout: 0
311                           }
312             treem.initMenu('treem_menu',options);
313          </script>
314         </div>
315        </li>
316       </ul>
317      </li>
318      <li><a href="#" class="tabHead">�������������� ����</a>
319       <ul class="tabBody">
320        <li class="tabBodyContainer">
321         <div>
322          <ul>
323           <li>������: ClassicHorizontal</li>
324           <li>��������
325            <dl>
326             <dt><b>blend</b></dt><dd> ������� "����������" ������� �� ����������� �� ��������� ������������� ��������� ��� ��������, � �������� ��� ��������</dd>
327             <dt><b>clip</b></dt><dd> ������������ ���� � ������������ ������������ ��� ��������</dd>
328            </dl>
329           </li>
330          </ul>
331          <br />
332          <ul id="chor_menu" style="display: none">
333           <li><a href="#"> Lorem </a>
334            <ul>
335             <li><a href="#"> Ipsum </a></li>
336             <li><a href="#"> Dolor </a></li>
337             <li><a href="#"> consectetuer </a></li>
338             <li><a href="#"> vestibulum </a></li>
339            </ul>
340           </li>
341           <li><a href="#"> elit </a>
342            <ul>
343             <li><a href="#"> sit amet </a></li>
344             <li><a href="#"> adipiscing </a>
345              <ul>
346               <li><a href="#"> elit </a></li>
347               <li><a href="#"> sit amet </a></li>
348               <li><a href="#"> Donec </a></li>
349              </ul>
350             </li>
351             <li><a href="#"> Lorem </a></li>
352            </ul>
353           </li>
354           <li><a href="#"> Ipsum </a>
355            <ul>
356             <li><a href="#"> consectetuer </a></li>
357             <li><a href="#"> adipiscing </a>
358              <ul>
359               <li><a href="#"> elit </a></li>
360               <li><a href="#"> sit amet </a></li>
361              </ul>
362             </li>
363             <li><a href="#"> vestibulum </a></li>
364             <li><a href="#"> elit </a>
365              <ul>
366               <li><a href="#"> consectetues </a></li>
367               <li><a href="#"> Ipsum </a></li>
368              </ul>
369             </li>
370            </ul>
371           </li>
372           <li><a href="#"> Donec </a></li>
373           <li><a href="#"> sit amet </a></li>
374           <li><a href="#"> elit </a></li>
375          </ul>
376          <script type="text/javascript">
377             var chor = new CompleteMenuSolution;
378             var options = { 'theme' : {
379                               'name' : 'ClassicHorizontal'
380                             },
381                             length : 300,
382                             toggleMenuOnClick : false,
383                             openTimeout : 50,
384                             closeTimeout: 50,
385                             closeSiblings : false,
386                             'transitions' : {
387                               'blend' : {
388                                 'start' : 0,
389                                 'end'   : 1
390                               }
391                               ,
392                               'clip' : {
393                                 'direction' : ['se','sw']
394                               }
395                             }
396                           }
397             chor.initMenu('chor_menu',options);
398          </script>
399         </div>
400        </li>
401       </ul>
402      </li>
403     </ul>
404    </td>
405   </tr>
406  </table>
407  <script type="text/javascript">
408    var tabmenu = new CompleteMenuSolution;
409    var options = { 'theme' : {
410                      'name' : 'TabControl/FlatPanel'
411                    },
412                    length : 500,
413                    interval: 1,
414                    'transitions' : {
415                      'blend' : {
416                        'start' : 0,
417                        'end'   : 1
418                      }
419                    },
420                    toggleMenuOnClick : 2,
421                    openTimeout : 0,
422                    closeTimeout: 0,
423                    closeSiblings : true,
424                    incrementalConvert: false
425                  }
426    tabmenu.initMenu('tabmenu',options);
427  </script>
428<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
429</script>
430<script type="text/javascript">
431_uacct = "UA-851865-2";
432urchinTracker();
433</script>
434</body>
435</html>