UMIhelp

Разработка сайта на UMI.CMS => Шаблоны TPL => Тема начата: HardHardy от 10 Марта 2011, 13:27:25

Название: Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 10 Марта 2011, 13:27:25
Здравствуйте!
Многоуровневое меню средствами XSLT-шаблонизатора создается достаточно легко.
А как его сделать средствами TPL-шаблонизатора?
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 10 Марта 2011, 13:32:35
очень просто, создаешь в системе разделы и подразделы с отмеченными галочками выводить в меню выводить подменю и меню всегда развернуто (ну там уж по желанию с последней галочкой). Вот пример шаблона для многоуровневого меню

<?php

$FORM = Array();

$FORMS['menu_block_level1'] = <<<END
%lines%
END;

$FORMS['menu_line_level1'] = <<<END

END;

$FORMS['menu_line_level1_a'] = <<<END
%sub_menu%
END;



$FORMS['menu_block_level2'] = <<<END

               <ul id="submenu"
                     umi:element-id="%id%"
                     umi:module="content"
                     umi:method="menu"
                     umi:sortable="sortable"
                     umi:add-method="popup"
                     umi:region="list"
                     umi:button-position="top left"
               >
%lines%
               </ul>
END;

$FORMS['menu_line_level2'] = <<<END
                  <li><a href="%link%" umi:field-name="name">%text%</a></li>

END;

$FORMS['menu_line_level2_a'] = <<<END

                  <li class="active"><a href="%link%" umi:field-name="name">%text%</a></li>
%sub_menu%

END;


$FORMS['menu_block_level3'] = <<<END

                  <ul
                     umi:element-id="%id%"
                     umi:module="content"
                     umi:method="menu"
                     umi:sortable="sortable"
                     umi:add-method="popup"
                     umi:region="list"
                     umi:button-position="top left"
                  >
%lines%
                  </ul>
END;

$FORMS['menu_line_level3'] = <<<END
                        <li
                           umi:element-id="%id%"
                           umi:field-name="name"
                           umi:delete="delete"
                           umi:region="row"
                           umi:empty="Название страницы"
                        >
                           <a href="%link%" umi:field-name="name">%text%</a>
                        </li>

END;

$FORMS['menu_line_level3_a'] = <<<END
                        <li class="active"
                           umi:field-name="name"
                           umi:element-id="%id%"
                           umi:field-name="name"
                           umi:delete="delete"
                           umi:region="row"
                           umi:empty="Название страницы"
                        >
                           %text%
                        </li>
END;


?>
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 10 Марта 2011, 13:34:50
Спасибо огромное! :) Щас попробуем)))
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 10 Марта 2011, 14:07:51
Чет у меня не получается... Уточню вопрос, мне нужно выпадающее меню, при наведении мышки.
Сейчас выглядит вот так:

<?php
$FORMS = Array();
 
$FORMS['menu_block_level1'] = <<<END
<table border="0" cellpadding="0" cellspacing="0" background="">
<tr valign="bottom">
%lines%   
</tr>
</table>
 
END;
 

$FORMS['menu_line_level1'] = <<<END
          <ul>
            <li><a href="%link%">%text%</a></li>
          </ul>
END;


$FORMS['menu_line_level1_a'] = <<<END
          <ul>
            <li><a href="%link%">%text%</a></li>
          </ul>
END;
?>
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 10 Марта 2011, 14:44:39
такой шаблон вам выдаст примерно такой вариант (соединю кусочки по частям)

Вначале берем блок для всего меню

<table border="0" cellpadding="0" cellspacing="0" background="">
<tr valign="bottom">
%lines%   
</tr>
</table>

дальше, вместо %lines% подставиться содержимое блока menu_line_level1 (если пользователь находиться на странице присутствующей в меню, то эта страница будет оформлена с использованием блока menu_line_level1_a). В итоге у нас получиться

<table border="0" cellpadding="0" cellspacing="0" background="">
<tr valign="bottom">
          <ul>
            <li><a href="%link%">%text%</a></li>
          </ul>
</tr>
</table>

отсюда мы видим что у вас... Во-первых уже будет проблемы с html, так как не указанны теги <td>, во-вторых, здесь нигде не выводиться второй уровень. А должно это выглядеть как-то так (я проявлю немного самодейтельности и избавлюсь от таблицы, возьмем стандартное выпадающее горизонтальное меню на css (первый результат в google который мне выдал), ссылка тут http://cssor.ru/css/polezno-interesnoe/cssmenu)

в итоге надо будет получить вот такой html код:

<ul id="cssmenu">
        <li><a href="#">Горизонтальное</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
        <li><a href="#">CSS</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                        <li><a href="#">Ссылка 3</a></li>
                        <li><a href="#">Ссылка 4</a></li>
                        <li><a href="#">Ссылка 5</a></li>
                </ul>
        </li>
        <li><a href="#">Меню</a>
                <ul>
                        <li><a href="#">Ссылка 1</a></li>
                        <li><a href="#">Ссылка 2</a></li>
                </ul>
        </li>
</ul>

для этого мы делаем вот такой шаблон
 
<?php

$FORM = Array();

$FORMS['menu_block_level1'] = <<<END
<ul id="cssmenu">
        %lines%
</ul>

END;

$FORMS['menu_line_level1'] = <<<END
        <li><a href="%link%">%text%</a>
                %sub_menu%
        </li>
END;

$FORMS['menu_line_level1_a'] = <<<END
        <li><a href="%link%">%text%</a>
                %sub_menu%
        </li>
END;



$FORMS['menu_block_level2'] = <<<END
      <ul>
                        %lines%
                </ul>
END;

$FORMS['menu_line_level2'] = <<<END
         <li><a href="%link%" >%text%</a></li>
END;

$FORMS['menu_line_level2_a'] = <<<END
                        <li><a class="active" href="%link%" >%text%</a></li>
END;


?>

он будет выводить нам  двухуровневое меню а остальные штуки типа css .

В общем использование шаблонов похоже на матрешку, вначале собирают все пункты n-ого уровня меню (menu_line_leveln), потом закидывают их в общий контейнер для данного уровня (menu_block_leveln), если есть уровень выше то собираем его в итоге получаем цельный html код
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 10 Марта 2011, 16:47:33
млин, я уже тупо скачал ксс и ваш пример. всеравно не хотит работать :(
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 10 Марта 2011, 17:10:35
На XSLT-шаблонизаторе вабще ни каких трудностей не возникло, код там такой:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   xmlns:umi="http://www.umi-cms.ru/TR/umi">


 <xsl:template match="udata[@module = 'content'][@method = 'menu']">
   <ul umi:element-id="0" umi:module="content" umi:add-method="popup" umi:region="list" umi:sortable="sortable">
       <xsl:apply-templates select="items/item" mode="menu"/>   
   </ul>
 </xsl:template>

 <xsl:template match="item" mode="menu">
  <li>
   <a href="{@link}" umi:element-id="{@id}" umi:field-name="name" umi:region="row" umi:delete="delete">
      <xsl:value-of select="." />
   </a>
  </li>
 </xsl:template>
   
 <xsl:template match="item" mode="menu">
  <li>
   <a href="{@link}" umi:element-id="{@id}" umi:field-name="name" umi:region="row" umi:delete="delete" class="act">
      <xsl:value-of select="." />
   </a>
        <xsl:apply-templates select="document(concat('udata://content/menu/0/2/', @id))/udata[items/item]" />
  </li>
 </xsl:template>


</xsl:stylesheet>

Ну и в контентной странице:

        <div class="header-bottom">
         <div class="nav2">
                  <xsl:apply-templates select="document('udata://content/menu/')/udata"/>
         </div>
        </div>
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 11 Марта 2011, 09:06:10
прекрасно что у вас получилось сделать меню с xslt, а ради интереса, можно получить доступы к вашему сайту и проверить что было не так с tpl меню? если да пишите на почту admin@umihelp.ru
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 15 Марта 2011, 10:15:53
ОК
щас скину :)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: talanter от 11 Июня 2011, 01:07:26
Скорее всего у родителльского обекта меню не стоит галочка
меню всегда развернуто,
и отображать подменю.
ХSLT - их игнорит.

Возможно проблема именно в этом.
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: nops от 05 Июля 2011, 13:21:36
Друзья!
Я новичок в разработке и тем более в UMI.
имеем html шаблон.
корневые разделы в верхнем меню в строчку. Нужно подразделы вывести слева во второе меню и содержимое зависело от главного раздела.
Делать надо на tpl.
xslt вообще не знаю что это такое:(
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: albion от 05 Июля 2011, 20:17:12
nops, В принципе здесь ничего сложного. http://help-dev.umi-cms.ru/content.menu.html#tplDesc . Должно стать понятно, как это делается.
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: nops от 05 Июля 2011, 20:53:53
Так вот в том то и дело, что именно по этой статье делал, но ничего не получилось:(
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 05 Июля 2011, 23:28:25
какой макрос используешь в выводе бокового меню?
приведи код шаблона?
и что он в итоге тебе выдает

Да и поздравляю тебя с 500 сообщением на форуме, в личку отписал) от меня презент
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: nops от 06 Июля 2011, 07:50:25
Да и поздравляю тебя с 500 сообщением на форуме, в личку отписал) от меня презент
забавный презнтик, мог бы хоть раз и написать:-)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 06 Июля 2011, 08:01:07
Да не, презент при встрече в августе)

А так просто удивился тебя увидев) только по хостингу понял)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 11 Августа 2011, 11:24:04
Скорее всего у родителльского обекта меню не стоит галочка
меню всегда развернуто,
и отображать подменю.
ХSLT - их игнорит.

Возможно проблема именно в этом.

Действительно была проблема с галочкой "меню всегда развернуто". Большое спасибо =)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 17 Ноября 2011, 09:43:43
Еще такой вопрос. Есть два разных многоуровневых меню использующие один и тот же каталог. Только в одном нужно чтоб в пунктах стояла галочка "меню всегда развернута", а во втором, чтоб такой галочки не стояло. :) Такое возможно средствами tpl-шаблонизатора?
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 17 Ноября 2011, 09:55:55
галочка всегда будет одна для обоих вариантов. так что либо хитрите (просто прячте то подменю которое не должно выводиться, либо второе меню делайте на основе usel запроса и своей кастомной галочки
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 17 Ноября 2011, 10:39:06
А как можно спрятать то подменю которое не должно выводиться? Usel запросы я так понимаю только при xslt-шаблонизаторе можно использовать?

А не могли бы Вы мне помочь прописать третий  уровень меню в ксс. А то я с этим туплю :(
.nav2 {float:left; width:900px; border:none; background:rgb(220,220,220) url(/images/new/bg_head_bottom_nav.jpg) repeat-x; color:rgb(75,75,75); font-size:1.0em; font-size:130%;} /*Color navigation bar normal mode*/
.nav2 ul {list-style-type:none;}
.nav2 ul li {float:left; position:relative; z-index:1000; border-right:solid 1px rgb(175,175,175);}
.nav2 ul li ul {display:none; border:none;}
.nav2 ul li ul {margin-left:-30px; padding:0 30px 30px 30px; background:url(/images/new/bg_head_bottom_nav_hover.gif) top center;} /*Sticky hover zones*/
.nav2 ul li a {float:left; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color: rgb(100,100,100);}
.nav2 ul li:hover {width:auto;}
.nav2 table {position:absolute; z-index:999; top:0; left:0; border-collapse:collapse;}

/*Non-IE6*/
.nav2 ul li:hover a {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li:hover ul {display:block; position:absolute; z-index:998; top:3.0em; margin-top:0.1em; left:0;}
.nav2 ul li:hover ul li ul {display:none;}
.nav2 ul li:hover ul li a {display:block; width:15em; height:auto; line-height:1.3em; margin-left:-1px; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

/*IE6*/
.nav2 ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color main cells hovering mode*/
.nav2 ul li a:hover ul {display:block; position:absolute;z-index: 998; top:3.1em; top:3.0em; left:0; margin-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; width:15em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a ul {visibility:hidden; height:0px; width:0px; position:absolute; z-index: 997;}
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

В шаблоне прописал так (вроде все правильно):
<?php

$FORM = Array();

$FORMS['menu_block_level1'] = <<<END
<ul>%lines%</ul>
END;

$FORMS['menu_line_level1'] = <<<END
<li><a href="%link%">%text%</a>%sub_menu%</li>
END;

$FORMS['menu_line_level1_a'] = <<<END
<li><a href="%link%">%text%</a>%sub_menu%</li>
END;



$FORMS['menu_block_level2'] = <<<END
<ul>%lines%</ul>
END;

$FORMS['menu_line_level2'] = <<<END
<li><a href="%link%">%text%</a>%sub_menu%</li>
END;

$FORMS['menu_line_level2_a'] = <<<END
<li><a class="active" href="%link%">%text%</a>%sub_menu%</li>
END;


$FORMS['menu_block_level3'] = <<<END
<ul>%lines%</ul>
END;

$FORMS['menu_line_level3'] = <<<END
<li><a href="%link%">%text%</a></li>
END;

$FORMS['menu_line_level3_a'] = <<<END
<li><a class="active" href="%link%">%text%</a></li>
END;
?>
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 17 Ноября 2011, 10:49:57
HardHardy, если смотреть, то лучше на сайте, там все быстрее будет понятно благодаря firebag, а то так придется моделировать 3 уровневое меню и пытаться понят как там было у тебя.

а usel можно использовать и на езд шаблонах посредством макроса %data doSelection()%
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 17 Ноября 2011, 10:56:19
да я все там же :) http://www.fortis74.ru/test/
с парнями замутили фирму. а мне как более менее понимающему в компутерах, досталась работа над сайтом :).. жесть канешн, но оч. интересно :)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: admin от 17 Ноября 2011, 11:27:48
и  где у тебя 1 и 2 меню и где у тебя лишний вывод подменю?
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 27 Февраля 2012, 10:16:16
Дошел до макроса %data doSelection()%
Пользуюсь http://wiki.umisoft.ru/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BC%D0%B0%D0%BA%D1%80%D0%BE%D1%81%D0%B0_data_doSelection (http://wiki.umisoft.ru/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D1%8B_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F_%D0%BC%D0%B0%D0%BA%D1%80%D0%BE%D1%81%D0%B0_data_doSelection)
http://help-dev.umi-cms.ru/chapter.XSLTTemplates.usel.html (http://help-dev.umi-cms.ru/chapter.XSLTTemplates.usel.html)
+ Документацией по макросу
Но чет голова пухнет. Макрос туп не выводится. А по мимо config.ini нужно гденить еще ченить включать??
Не могли бы Вы привести пример tpl, xml и как правильно вписать сам макрос?
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 29 Февраля 2012, 14:02:09
Во, нашел http://wiki.umisoft.ru/%D0%9C%D0%B5%D0%BD%D1%8E_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_Usel_(%D0%B4%D0%BB%D1%8F_tpl-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0) (http://wiki.umisoft.ru/%D0%9C%D0%B5%D0%BD%D1%8E_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_Usel_(%D0%B4%D0%BB%D1%8F_tpl-%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D0%B8%D0%B7%D0%B0%D1%82%D0%BE%D1%80%D0%B0))

Все ок. Теперь вопрос. Как сделать выборку многоуровневым как меню? И чтоб пункты не перемешивались в хаотичном порядке?? об этом в следующей теме :))
http://umihelp.ru/forum/index.php/topic,992.0.html (http://umihelp.ru/forum/index.php/topic,992.0.html)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: john от 24 Марта 2012, 16:51:12
а как используя tpl  шаблонизатор и средствами usel сделать так чтобы только активный раздел первого уровня был развернутый?
Например "О компании" свернут и "Закупки развернут"
    О компании
    Закупки
        -2012 год
            -Годовой план
            -Закупки способом запроса ценовых предложений
            -Закупки способом из одного источника
            -Закупки способом тендера
        -2011 год
            -Годовой план
            -Закупки способом запроса ценовых предложений
            -Закупки способом из одного источника
            -Закупки способом тендера

И можно ли сделать при нажатии например раздела "Закупки"
 Сразу открывался подраздел например "Годовой план" в разделе 2012?
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 24 Марта 2012, 16:59:38
http://umihelp.ru/articles/usel-multilevel-menu/ (http://umihelp.ru/articles/usel-multilevel-menu/)
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: Armor от 25 Марта 2012, 02:31:06
Друзья!
Я новичок в разработке и тем более в UMI.
имеем html шаблон.
корневые разделы в верхнем меню в строчку. Нужно подразделы вывести слева во второе меню и содержимое зависело от главного раздела.
Делать надо на tpl.
xslt вообще не знаю что это такое:(
полюбому, сталкивался уже с таким
чтоб при наведении показывалось-пропадало  hover в css можно для интересующего пункта добавить
пример:
ul ul{display:none;}
ul li a:hover ul{display:block;}
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: Armor от 25 Марта 2012, 02:48:17
http://umihelp.ru/articles/usel-multilevel-menu/ (http://umihelp.ru/articles/usel-multilevel-menu/)
HardHardy на последний пост.
jQuery подключен в юми по умолчанию, пример:
      $("ul.menu li:eq(1)").css("display", "block");
      $("ul.menu li:eq(1)").click(function(){
         $("ul li ul:first",this).css("display", "block");
      });
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 25 Марта 2012, 02:54:12
а как используя tpl  шаблонизатор и средствами usel сделать так чтобы только активный раздел первого уровня был развернутый?
usel делаете выборку, tpl разносите, а css оформляете. есть много неплохих сайтов с примерами решеий меню на css3, погуглите.
Название: Re:Многоуровневое меню средствами TPL-шаблонизатора
Отправлено: HardHardy от 25 Марта 2012, 02:58:42
http://umihelp.ru/articles/usel-multilevel-menu/ (http://umihelp.ru/articles/usel-multilevel-menu/)
HardHardy на последний пост.
jQuery подключен в юми по умолчанию, пример:
      $("ul.menu li:eq(1)").css("display", "block");
      $("ul.menu li:eq(1)").click(function(){
         $("ul li ul:first",this).css("display", "block");
      });
ну в моем случае задача была другая, ну и ее решение соответственно. думаю это Евгению будет интересно :)