Многостепенно MODX меню с помощта на Bootstrap. Промяна на горното меню Промяна на реда на елементите от менюто
В предишни уроци вече създадохме MODX меню: 1-ви - и 2-ри - Изход на стандартно MODX падащо меню с помощта на Bootstrap. Днес ще научим как да показваме многостепенни Bootstrap менюта с неограничена степен на влагане (3-степенно меню, 4-степенно, 5-степенно и т.н.).
Например, ще покажа 5-степенно меню Bootstrap, но можете да го направите 3-степенно или 7-степенно, дори 10, като промените стойността нивона това, което ви трябва!
Показване на многостепенно меню Bootstrap (с неограничено влагане) в MODX с помощта на PdoMenu.
Резултатът от многостепенното меню ще бъде така:
[]>[[+обвивка]]` &tplInner=`@INLINE
` &tplParentRow=`@INLINEНяма да работи от кутията. тъй като Bootstrap 3 по подразбиране поддържа само 2 нива на вмъкване и за да разширите нивото на вмъкване на менюто на bootstrap 3, трябва да включите js файл със следното съдържание.
(function($)( $(document).ready(function())( $("ul.dropdown-menu ").on("click", function(event) ( event.preventDefault(); event.stopPropagation( ) ; $(this).parent().removeClass("open"); $(this).parent().toggleClass("open" ));
След това ще започнат да се отварят 3-ти, 4-ти и т.н. нива на гнездене. По принцип всичко, но има едно нещо, това меню ще се отваря на всички нива и това според мен не е особено правилно или красиво, но може да се коригира с CSS помощ.
В моя случай бяха необходими 2 реда CSS код, за да накарат нивата да паднат настрани.
Ul.dropdown-menu (отляво: 100%; отгоре: -8px;) li.submenu1.dropdown.open>ul.dropdown-menu (отляво: 0%; отгоре: 100%;)
Може да получите малко по-различен (но идентичен) код и броят на редовете му да е по-голям, ако имате няколко клона на менюто с подменюта. Е, все още има някои малки неща, които ще трябва да коригирате CSS според вашия вкус, моята цел е да покажа основите. Как да намерите необходимите CSS класове в кода, към който трябва да приложите стилове, е показано във видеото, но за да бъдем по-точни, там е показан целият процес на създаване на многостепенно меню.
Това е менюто в моето видео:
Ако трябва да завъртите триъгълниците в падащо меню (те сочат надолу, когато елементите излязат отляво), ще изглежда така.
След това добавете следния css код:
Li.submenu2.dropdown>a>span.caret ( -moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); -webkit-transform: rotate(-95deg); -o-transform: rotate(-95deg); transform: rotate(-95deg); li.submenu3.dropdown>a>span.caret (-moz-transform: rotate(-95deg); -ms-transform: rotate(-95deg); - webkit -трансформация: завъртане (-95 градуса); -трансформация: завъртане (-95 градуса); 95 градуса);
Дата на публикуване: 07.02.2011 г
В този лесен урок ще ви покажа как да персонализирате менюто.
Веднъж ме помолиха да поправя грешка с меню на един уебсайт - някои елементи упорито не искаха да се подредят, а вместо това се появиха на неочаквани места на страницата при задържане на курсора. Грешката не беше в крив css, както първоначално предположих, а в криво извикване на Wayfinder.
Какво е Wayfinder- това е фрагмент, който се използва, когато трябва да покажете списък с документи в раздел/и. В резултат на фрагмента се генерира неномериран списък. Използвайки различни параметри, можете да правите всичко с този списък :) Можете да прочетете повече в документацията или като напишете в Google - “wayfinder modx wiki”.
Важни бележки:
1. За това какво е MODx, как да инсталирате MODx, как да организирате структурата на документите, как да направите шаблон от html, какво е chunk и т.н. Не разглеждам въпроси от начинаещи в този урок.
2. Заместителите, които ще използвам в урока, са посочени във формата, който Evo версията „разбира“. Каква е разликата, вижте примера:
Така че, нека разгледаме създаването на меню стъпка по стъпка.
Стъпка 1
За урока скицирах това меню:
Тук, за по-голяма яснота, приложих различни стилове към различните нива на менюто. В сайта, където поправих грешката с менюто, беше приблизително същото - всяко ниво на менюто има свой собствен стил.
Оформление - подробностите за оформлението не са включени в обхвата на този урок, това е кодът, който получих:
След като се възхищаваме на кода, ние сами определяме кой клас в нашето меню отговаря за какво (ако се ровите в кода на някой друг, трябва да е ясно във вашия собствен):
ul class="menu" - клас на цялото меню
li class="top" - клас елементи от менюто от най-високо ниво
a class="top_link" - клас за връзки в елементи от най-високо ниво
ul class="sub" - клас за подменюто
добре, span class="down" за проектиране на елементи от най-високо ниво
Стъпка 2. Създайте три документа
Продукти
- Доставка
- Доставчици
Създаваме дъщерни документи за документа „Продукти“: „Серум на истината“, „Макропулос лекарство“, „Универсални средства“.
Стъпка 3. Поставете менюто в отделна част
В шаблона, на мястото, където трябва да имате меню, премахнете всички ненужни кодове (the html кодменю), вместо това пишем
(( меню))Така поставяме менюто в отделна част. След това създаваме нов блок и го извикваме меню. Засега можете да копирате кода на менюто, който сте създали, в съдържанието на парчето. За яснота.
Отидете в административния панел в “Сайт” -> “Преглед” - за да проверите дали всичко е наред с пътищата към стиловия файл и снимките.
проработи ли Добре, но това все още не е меню. Нека му вдъхнем живот с помощта на Wayfinder.
Стъпка 4
Премахнете цялото съдържание на частта от менюто и вместо това извикайте фрагмента на Wayfinder.
Засега нека го напишем така:
параметър startId- показва от кой документ да започне формирането на списъка. Посочено е 0 - това означава, че списъкът се формира от корена на дървото на документа.
Да видим какво се случи:
Това е работещо и живо меню. Преименуване на документи, изтриване, добавяне - менюто ще се формира в съответствие с дървото на документа.
Стъпка 5
5.1. Сега връщаме външния вид на менюто към нормалното
Wayfinder по подразбиране генерира прост код (), всички класове списъци и елементи се определят чрез специални параметри при извикване.
В началото на урока определихме кои CSS класове в нашето меню отговарят за какво. Wayfinder има параметрите, от които се нуждаем: външен клас- клас за контейнера на менюто. Сравнявайки с нашето оформление, получаваме следното извикване на Wayfinder:
[[ Wayfinder? &startId=`0` &level=`2` &outerClass=`меню`]]в допълнение към параметрите с класове, ние посочваме ниво на влагане - &level=`2`.
Отбелязваме недостатъците - няма класове за елементи от менюто от най-високо ниво, няма тагове и клас за подменюто.
Всички тези недостатъци се коригират чрез добавяне на съответните параметри към повикването на Wayfinder.
5.2. Добавяне на класове към елементи и тагове от най-високо ниво
Има променлива за това редTpl, който описва шаблон за елемент от менюто, ние правим такъв шаблон, за това създаваме парче, наречено родител:
В повикването на Wayfinder добавяме &rowTpl=`родител` .
Не забравяйте да проверите изходен код- почти всичко е наред, остана само подменю.
За да конфигурирате подменюто, използвайте променливата innerRowTpl.
Създаване на парче вътрешен:
Добавете променлива към извикването на Wayfinder innerRowTpl=`вътрешен`и променлива, която указва класа за контейнера на подменюто &innerClass=`под` .
Последното обаждане на Wayfinder изглежда така:
[ ]Това е всичко, нашето меню е готово. Успех!
Wayfinderслужи за организиране на списъци с връзки за MODX. Благодарение на поддръжката на шаблони, той ви позволява да показвате списъци във всяка желана форма:
- Меню под формата на списък, таблица, изображения, с икони и др.
- Статични менюта
- Меню с различни ефекти (падащо меню, падащо меню и др.)
- Карта на сайта
&rowTpl=`rowTpl`
&outerTpl=`външенTpl`
&hereClass=`активен`
&rowClass=`eNav_li`]]
Параметри на фрагмента:
&startId- id родителска страница, ако зададете 0 ще бъде от корена на сайта. Стойността по подразбиране е идентификаторът на активната страница
&displayStart - покажи документ със startId в заглавието на менюто, по подразбиране невярно
&ниво- дълбочина на вмъкване, по подразбиране 0 - всички нива
&лимит- ограничаване на броя страници в изхода (по подразбиране 0 - без ограничения)
&ignoreHidden- игнорирайте отметката на страницата "Покажи в менюто", т.е. ако зададете 1, ще покаже всички страници. По подразбиране е 0. Показват се само онези страници, които имат отметка в квадратчето „Покажи в менюто“.
&ph - името на заместителя, който замества директно отпечатаните резултати. По подразбиране е 0.
&debug- режим на отстраняване на грешки (по подразбиране 0)
&скриване на подменютата - разгънете само активното подменю (по подразбиране 0)
&премахниНовиредове- премахва знака за прекъсване на реда по време на извеждане (по подразбиране 0)
&textOfLinks- за името на връзката към менюто. Възможни опции:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . По подразбиране menutitle
&titleOfLinks- за заглавието на връзката към менюто:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. По подразбиранезаглавие на страницата
&rowIdPrefix- задава id (rowIdPrefix + docId) за всеки елемент. По подразбиране 0
&includeDocs- ID на документи, разделени със запетаи, които ще бъдат включени в менюто (не е посочено по подразбиране)
&excludeDocs - id на документи, разделени със запетаи, които ще бъдат изключени от менюто (по подразбиране 0)
&контексти- контекст за генериране на менюта. По подразбиране е текущо.
&startIdContext - Идентификатор на контекста, от който са взети документите за генериране на резултата.
&config - Външен PHP файл, за да съхраните конфигурацията на Wayfinder (пример: ядро/компоненти/wayfinder/configs).
&схема - Формат за генериране на URL адреси. Възможни стойности (въз основа на извикването на API makeURL):
1: (по подразбиране) URL адрес спрямо site_url;
0: вижте http;
1: вижте https;
пълен: абсолютен URL адрес, започващ с site_url;
abs: абсолютен URL, започващ с base_url;
http: абсолютен URL, принуден в http схемата;
https: абсолютен URL, принуден в схемата https.
&сортирай по - Полето, по което се извършва сортирането. (по подразбиране menuindex)
Опции:
ID, menutitle, pagetitle, introtext, menuindex, публикувано, hidemenu, родител, isfolder, описание, псевдоним, дълго заглавие, тип, шаблон&sordOrder- Ред на сортиране."ASC" или "DESC". ASC по подразбиране
&къде - JSON стил на филтриране на параметри (Съответства къде в MySQL). Например, когато трябва да скриете блог или новина от добавката Статии: &where=`[("class_key:!=": "Article")]`
Примери:
само изходни папки: & where = `isfolder = 1
&тукId - Определете текущия идентификатор, който да използвате във фрагмента. Използвайте стойността [[*id]], ако шаблонът е указан с помощта на параметъра hereTpl и activeRowParentTpl не е приложен правилно в елемента от менюто. По подразбиране е текущият идентификатор.
Трябва да се посочи само ако самият скрипт го дефинира неправилно, например, когато показва меню от част от друг фрагмент.
&тукTpl - Шаблонът hereTpl се използва, когато текущият елемент се показва в менюто.
Възможни заместители:
[[+wf.classes]] - място за указване на CSS класа, който да се използва (включва class=" ")
[[+wf.classnames]] - съдържа само името на CSS класа (не включва class=" ")
[[+wf.link]] - адрес (href) за връзката
[[+wf.title]] - текст за заглавието на линка
[[+wf.linktext]] - текст на заглавието на връзката
[[+wf.wrapper]] - място за показване на подменю
[[+wf.id]] - изход на уникален идентификатор (id)
[[+wf.attributes]] - показва допълнителни атрибути на връзката
[[+wf.docid]] - идентификатор на документ за текущия елемент
[[+wf.subitemcount]] - брой елементи в папката
[[+wf.description]] - показва стойностите на полето за описание
[[+wf.introtext]] - показва стойностите на полето за интротекст
Примерен шаблон:
Опции на шаблона
Тези параметри определят частите, които съдържат моделите, които ще генерират изхода на Wayfinder.
IN текуща версия Wayfinder за MODX Revolution, можете да получите достъп до персонализираните си телевизори с помощта на контейнери за префикс wf. , например [[+my_TV]]
Към момента на писане ще бъдат върнати само оригиналните телевизионни стойности - те няма да бъдат форматирани. Например, ако вашият телевизор е изображение - типичното използване на такъв телевизор във вашия шаблон би било да върне пълния пълен етикетизображение, но вътре в шаблона Wayfinder - ще бъде върнат само пътят до изображението.
Ако искате да работите с телевизия, можете да го направите, като извикате фрагмент в шаблона на реда на Wayfinder (&rowTpl. Например вашето телевизионно изображение се извиква иконаи обикновено шаблонът използва код като този за изход:
... 
Но тъй като това няма да ви позволи да обработвате телевизия, трябва да го замените с:
... 
И сега във фрагмента processTV поставяме следния PHP код:
getObject("modResource", $myId); връща $doc->getTVValue($myTV);
В резултат на това се връща напълно обработено телевизионно изображение.
&външенTpl
Името на частта, съдържаща шаблона на външния контейнер.
Налични заместители:
- wf.classes - показва класове, взети от набора параметри на Wayfinder (включително атрибута class="")
- wf.classnames - показва имена на класове (без class="")
- wf.wrapper - изход на вътрешно съдържание (ред).
Параметърът &innerTpl съдържа същия набор от контейнери като &outerTpl.
&rowTpl
Името на частта, съдържаща шаблона за елементите на реда на менюто.
Налични заместители:
- wf.classes - клас изход (включително class="") атрибут
- wf.classnames - изход на съответните класове (без class="")
- wf.link - стойност на атрибута href="" за връзката към менюто
- wf.title - име на заглавния текст за връзката от полето, указано в параметъра &titleOfLinks
- wf.linktext - текст за активната връзка, указана в полето, подадено в параметъра &textOfLinks
- wf.wrapper - показва вътрешно съдържание, като подменю
- wf.id - показва уникалния идентификатор на атрибута. Трябва да укажете параметъра &rowIdPrefix, за да може този контейнер да получи стойност. Стойността е префикс + docId.
- wf.attributes - показва връзката към атрибутите за текущия елемент
- wf.docid - идентификатор на документа на текущия елемент
- wf.description - описание за текущия елемент
- wf.level - текущо ниво на влагане
Пример за употреба:
Друг вариант:
Примери
Първо ниво
[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`външенTpl`
&hereClass=`активен`
&rowClass=`eNav_li`]]
Код на парче OuterTpl
[[+wf.wrapper]]
Код на парче RowTpl
[[+wf.wrapper]]
Второ ниво (в този пример елементите от менюто и подменюто бяха визуално на едно и също ниво
[[!Wayfinder? &startId=`0` &ниво=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`активен`]]
Частичен код outerTplFooterMenu
[[+wf.wrapper]]
rowTplFooterMenu код на парче
[[+wf.title]]
[[+wf.wrapper]]
код на парче innerTplFooterMenu
[[+wf.wrapper]]
код на парче innerRowTplFooterMenu
[[+wf.title]]
Поздрави, скъпи читатели. В последния урок напълнихме сайта с малко съдържание (), сега е време показва всичко в менютотака че потребителите да могат да навигират до тях.
Създайте динамика меню в MODXще използваме фрагмент PdoMenuот опаковката pdoTools. Преди да започнете, моля, прочетете основната документация.
pdoMenu Документация
Опции
Опции на шаблона
Опции за CSS клас
Официални примери
Можете да прочетете официалната документация тук. Сега нека да разгледаме най-типичните извиквания на менюто.
Обадете се на PdoMenu
Вариант 1. На мястото на това статично меню извикайте фрагмента pdoMenu, за това в дървото на ресурсите, в раздела „ Елементи” в секцията с фрагменти разгънете нишката pdoTools, след което щракнете върху pdoMenuляв бутон на мишката (не пускайте бутона) и плъзнете този фрагмент до мястото, където искате да отворите менюто, след което в прозореца, който се отваря, попълнете необходимите параметри и щракнете върху „ Запазване«.
Вариант 2. Ние просто пишем обаждането ръчно.
Типични примери
Редовно едностепенно меню
Например, имаме най-често срещаното меню със следната HTML маркировка.
Резултатът е следният код за извикване на менюто:
- &parents=`0` - списък с родители (в моя случай не ограничавам избора, тъй като така или иначе ще показвам само определени страници);
- &level=`1` — ниво на вложеност (в случая няма такова);
- &resources=`2,3,4,5` — списък с ресурси, които трябва да бъдат показани в менюто;
- &firstClass=`0` — клас за първия елемент от менюто (не кой);
- &lastClass=`0` — клас на последния елемент от менюто (не кой);
- &outerClass=`top-menu` — клас обвивка на менюто (заместен в ul);
- &hereClass=`current-menu-item` — клас за активния елемент от менюто (заместен в li);
- &rowClass=`menu-item` — клас на един ред от менюто (заместен в li).
Персонализирано начално меню на две нива
Статичният html код изглежда така:
Неговият изходен код ще бъде като този:
Също така в следващия урок ще дам още няколко изхода на падащи менюта, базирани на bootstrap (и това е за тези, които не са уловили същността. Е, тогава ще го направим.
На пръв поглед всичко изглежда сложно, но не е така, прочетете документацията по-подробно, задавайте въпроси в коментарите, определено ще помогна.
За създаване на динамично меню ще използваме готов фрагмент Wayfinder.Фрагментът, както се надяваме да си спомняте от предишните уроци, е част от Php код, който можем да включим в нашия шаблон. Разликата от парчетата е само в кода и метода на извикване. Ако извикаме парче с двойни фигурни скоби, тогава фрагментите се извикват, като се използва следното [!Snippet_name!]- некеширано повикване или подобно [[SnippetName]]- кеширано повикване. Кодът за всеки фрагмент трябва да започва с и край ?> . Освен това на всеки фрагмент могат да бъдат предадени специални стойности на параметри, които той ще обработи. MODx вече има няколко готови фрагмента, които ще използваме в бъдеще.
фрагмент Wayfinderслужи за организиране на списъци с връзки за MODx. Менюто на нашия сайт е списък с такива връзки. Нека първо намерим част от кода, отговорен за показването на нашето меню. Менюто е на парче ЗАГЛАВКА, ето го:
Нека изрежем този код и вместо това да напишем:
((МЕНЮ))
И ще поставим кода в нова част МЕНЮ, в описанието на чанка ще пишем Меню на сайта. Сега нека проучим този код.
Менюто на нашия сайт е прост, неномериран списък, разположен в контейнер с id="templatemo_menu". Нека изрежем този списък от контейнера и вместо това да вмъкнем извикване към нашия фрагмент:
&startId=`0`е параметър със стойност 0, който указва на фрагмента ID на папката, в която се намират обработваните документи. Всички наши документи, които ще покажем в менюто, се намират в главната папка, ID на главната папка е нула. Да видим какво имаме.
Нашето меню работи, само активният елемент вече не е маркиран в бяло:
За да разберем защо това се случи, трябва да погледнем изходния код на страницата. В Mozilla Firefox това се прави по следния начин: Преглед >> Изходният код на страницатаили просто чрез натискане на клавишната комбинация Ctrl+U. Намерете кода за нашето меню:
Моля, обърнете внимание, че в изходния код активният елемент имаше клас="текущ"и нашият фрагмент автоматично се присвоява на активния елемент клас="активен". Забелязваме също, че в изходния код класът е приложен към тага
, а сега към етикета
Намерете файла в папката C:/xampp/htdocs/site/www/assets/templates/ templatemo_style.cssи го отворете с помощта на Notepad++. Търсим описание на текущия клас в този файл, той се намира в 198 линия:
#templatemo_menu li .current(
padding-left: 40px;
цвят: #ffffff;
}
замени класа токна активен, като не забравяте да го присвоите отново на етикета :
#templatemo_menu li.active a (
padding-left: 40px;
цвят: #ffffff;
}
Запазете файла. Да видим какво е станало.
Менюто ни работи точно както са го замислили дизайнерите. Сега можем да навигираме през страниците на нашия сайт, използвайки нашето главно меню. Когато добавите други документи в основната папка, те автоматично ще се появят в нашето меню. За да предотвратите показването на нежелани документи в менюто, трябва да премахнете отметката от тях Показване в менюто. Можете принудително да изключите нежелан елемент с помощта на параметъра &excludeDocs=`списък с идентификатори на изключени документи, разделени със запетаи`.
За да попречим на менюто да показва дъщерни документи, които ще създадем в следващите уроци, нека добавим параметър към извикването на фрагмент ниво, което определя броя на нивата в менюто, по подразбиране ще се показват всички нива, ние ще го ограничим само до едно ниво:
-
17 април 2015 гТелефонът иска парола, когато е включен -
17 април 2015 гОткъде се обадиха - как да разбера? -
17 април 2015 гКак да изтегля браузъра Amigo безплатно?
