Sāksim MODx Revolution 8. nodarbību iesācējiem. Atgādināšu, ka mēs veidojam vietni MODx Revolution izpētei. Pēdējā nodarbībā mēs apskatījām fragmentu jēdzienu, kas ir PHP koda daļas, kas ļauj mūsu vietnei pievienot funkcionalitāti. Šajā nodarbībā mēs apskatīsim īpašu fragmentu - Wayfinder, un mēs to izmantosim, lai izveidotu dinamisku izvēlni mūsu vietnei.
Kas ir Wayfinder?
Ceļa meklētājs ir fragments, kas parāda nešķirotu saišu sarakstu uz resursiem jūsu vietnes kokā, saraksta izvades veids ir atkarīgs no fragmenta izsaukuma un šī izsaukuma parametriem. Kopumā tas nozīmē, ka, ievietojot Wayfinder zvanu savā veidnē, tas sāk meklēt resursus, kas atbilst tajā norādītajiem parametriem, un atgriež saišu sarakstu uz šiem resursiem nešķirotā saraksta formātā vai jūsu definētajā formātā.
Kāpēc izmantot Wayfinder?
Es parasti izmantoju Wayfinder, lai izveidotu dinamisku vietņu navigāciju, tas ir, izvēlnes. Tā kā lielākajā daļā HTML veidņu izvēlņu izveidei tiek izmantoti nesakārtoti saraksti, Wayfinder ir ideāls rīks šim nolūkam. Veidojot vietni, varat rūpīgi ievietot savus URL navigācijas izvēlnē, tāpat kā to darījāt iepriekš statiskā HTML vietnē. Tajā pašā laikā katru reizi, kad jums ir jāizdzēš vai jāizveido lapa, jums ir jāveic atbilstošas izmaiņas savā izvēlnē, jāmaina URL. Izmantojot Wayfinder fragmentu, lai dinamiski ģenerētu izvēlnes, tiek novērstas šīs galvassāpes, jo tas automātiski nosaka izmaiņas un attiecīgi maina jūsu izvēlni.
Wayfinder ir diezgan elastīgs rīks, kas ļauj noteikt, kādus resursus iekļaut vai izslēgt no izvēlnes, kāda ir izvēlnes veidne, cik dziļa ir jūsu vietnes izvēlne. Jūsu iespēju ierobežojumu nosaka jūsu HTML/CSS kods.
Kā lietot Wayfinder?
Kā jau minējām iepriekšējā nodarbībā, fragmentu izsaukšanas sintakse izskatās šādi: [[!somesnippet]]
Tas ir tikai pamata izsaukums un ar to nepietiek, turklāt mums ir jādefinē daži šī izsaukuma rekvizīti. Wayfinder gadījumā pats minimums, kas jādefinē rekvizītos: kur resursu kokā Wayfinder jāsāk veidot resursu sarakstu. Tādējādi, izsaucot Wayfinder fragmentu, ir jānorāda vismaz viens parametrs - sākotnējais ID. Pamata izsaukums uz Wayfinder fragmentu šajā gadījumā izskatīsies šādi:
Šis zvans liek Wayfinder sākt no koka saknes ( ID 0 nozīmē vietnes sakni) un parāda visus resursus, kas ir publicēti un kuriem izvēles rūtiņā nav atzīmes. Slēpt no izvēlnes.
Ja aplūkojam izmantoto veidni, mēs varam redzēt augšējo izvēlni ar vairākām opcijām un nolaižamajiem sarakstiem.
Apskatīsim veidni un kodu, kas parāda šo izvēlni:
Kā redzat, šis ir ligzdots nesakārtots saraksts. Aizstāsim šo kodu ar pamata Wayfinder zvanu un redzēsim, ko mēs iegūstam. Izdzēsiet iepriekš minēto kodu un ielīmējiet tā vietā:
[[!Wayfinder? &startId=`0` ]]
Ja izmantojat to pašu veidni, ko es, jūsu kods izskatīsies apmēram šādi:
Saglabājiet veidni un apskatiet sākumlapu, tai vajadzētu izskatīties šādi:
Fantastiski! Var redzēt, ka mūsu iepriekšējā izvēlne, kurā bija vairākas iespējas, tagad ir aizstāta ar vienkāršu izvēlni, kurā ir tikai viens vienums - Sākums. Tas mums norāda, ka Wayfinder darbojas, kā paredzēts, un paņem vienu lapu no mūsu vietnes un parāda tās nosaukumu kā izvēlnes vienumu.
Izveidosim vēl pāris resursus. Es pievienošu lapu Par ar 3 pakārtotajām lapām (MODx, Pamācības, Kontaktpersonu un FAQ lapas). Savai vietnei varat izveidot jebkādus resursus vai lapas. Šī uzdevuma mērķis ir izveidot vairākus resursus, lai Wayfinder būtu ko parādīt.
Esmu pabeidzis lapu izveidi, un mana vietnes resursu koks izskatās šādi:
Tagad mums ir vairākas lapas, redzēsim, kā, piezvanot uz Wayfinder, tiks izveidota izvēlne mūsu vietnei:
Labā ziņa ir tā, ka visas mūsu lapas ir parādījušās izvēlnē un, noklikšķinot uz katra izvēlnes vienuma, mēs tiekam novirzīti uz atbilstošo lapu. (Lai pārbaudītu šo elementu, katrai lapai pievienojiet tekstu, piemēram, lapā Par varat pievienot "Šī ir lapa Par", un šis ziņojums parādīsies, kad lapa tiks atvērta. Atcerieties, ka mums ir jādefinē katrai lapai veidne. lapā, bet šobrīd es par to neuztraucos).
Sliktā ziņa ir tā, ka izvēlnes formatējums ir bojāts, taču mēs varam to labot. Ar peles labo pogu noklikšķiniet uz tīmekļa lapas un apskatiet avota kodu (vai izmantojiet šim nolūkam Firebug), jūs to redzēsit tagad Ceļa meklētājsģenerē HTML šādi:
- Mājas
- Par
- MODx CMS
- Kodēšanas bloks
- Emuārs
- Pakalpojumi
- Sazinies ar mums
- Pamācības
- FAQ
Kā redzat, tas izskatās ļoti līdzīgs mūsu sākotnējam statiskajam kodam ar dažiem izņēmumiem. Pirmkārt, ģenerēja Wayfinder
- prece bez klases sf-izvēlne kas tika izmantots mūsu statiskajā kodā. Veidnei ir nepieciešama šī klase, lai tā darbotos ar CSS. Ir arī skaidrs, ka
- vienumiem ir parametrs span, kas attiecas uz saites teksta elementiem sākotnējā statiskajā kodā un nav ģenerētajā Wayfinder kodā. Turklāt mūsu statiskajam HTML kodam ir klase pašreizējās lapas vienums, kas nav attēlots mūsu Wayfinder fragmenta kodā. Visi šie trūkstošie gabali padara mūsu ēdienkarti neizskatīgu.
Kā pielāgot Wayfinder fragmenta izvades stilu
Aplūkojot, kā Wayfinder ģenerē kodu, rodas ļoti dabisks jautājums: "Kā mēs varam pievienot trūkstošās koda daļas, lai mēs vēlamies parādīt izvēlni mums vajadzīgajā formā?" Atbilde ir ļoti vienkārša, mēs izmantojam veidņu gabalus, lai formatētu Wayfinder fragmenta izvadi.
Wayfinder ir elastīgs rīks, un jūs varat izmantot parametrus, lai noteiktu izvades izskatu. Daži vispārīgi parametri ļauj noteikt, kādā līmenī sākt veidot ēdienkarti, kādus vienumus izvēlnē neiekļaut utt. Citi parametri ir veidnes parametri, kas ļauj iestatīt HTML veidnes kodu savai izvēlnei utt. Pēdējo aprakstus var atrast oficiālajā dokumentācijā - http://rtfm.modx.com/display/ADDON/Wayfinder.
Ņemt vērā: Dažiem Wayfinder parametriem ir noklusējuma vērtības.
Tas izskaidro, piemēram, kāpēc Wayfinder ģenerētajā izvēlnē sākuma lapas vienumam ir klases nosaukums " pirmais aktīvs" Šī ir noklusējuma klase, taču mēs varam to ignorēt, definējot savas klases veidņu daļās.
Šajā apmācībā mēs izmantosim vairākas Wayfinder iespējas, taču iesaku jūs tās visas izpētīt un pēc iespējas vairāk praktizēt tās izmantošanu, lai izprastu visas to iespējas. Tā kā Wayfinder noklusējuma iestatījumi ir skaidri dokumentēti oficiālajā vietnē, būtu muļķīgi par tiem runāt šeit. Strādājot ar dažādām izvēlnēm, mēs to izmantosim arvien vairāk.
Lai sāktu darbu pie izvēlnes veidnes, izveidosim vairākas mini veidnes un saglabāsim tās pa daļām. Jūs redzēsit, ka šajos gabalos mēs izmantojam HTML kodu, bet aizstājam dinamiskos elementus pildvielas(vai vietturi kā tos sauc arī), kuras sintakse izskatās šādi: [[+vietturis]]. Mūsu izmantotie vietturi ir specifiski Wayfinder fragmentam, un to definīcija ir acīmredzama no nosaukuma, taču vienmēr varat skatīt MODx dokumentāciju, lai iegūtu pilnīgāku palīdzību.
Tālāk ir norādīti gabali, ko izmantošu, lai izveidotu mūsu veidni:
7in1 izvēlne Ārējā– saturēs mūsu ārējā ul konteinera HTML kodu.
Jūs varat redzēt, ka esmu pievienojis klasi ārējai ul. Alternatīvs veids, kā to izdarīt, ir izmantot vietturi wf.classes un pēc tam pievienot klases nosaukumu pašreizējam ceļa meklētāja izsaukumam, izmantojot parametru ārējā klase. Bet vienkāršības labad izmantosim pirmo metodi, taču abas noderēs...
7in1menuRow– saturēs pirmā līmeņa izvēlnes vienumu HTML kodu
- [[+wf.linktext]][[+wf.wrapper]]
- [[+wf.linktext]][[+wf.wrapper]]
- [[+menutitle]][[+wrapper]]
- [[+menutitle]] ([[+bērni]]) [[+iesaiņojums]]` &countChildren=`1` ]]
Galvenā doma šeit ir tāda, ka es pievienoju tagu uz izvēlnes saites tekstu kā oriģinālajā statiskajā HTML kodā. Es iekļāvu arī vietturi wf.classes, un tas ļaus man definēt pašreizējās lapas klasi, kas ignorēs noklusējuma “aktīvo” klasi.
7in1 izvēlneIekšējā– saturēs iekšējo ul konteineru HTML kodu
- [[+wf.wrapper]]
7in1menuInnerRow– ietvers HTML kodu iekšējā līmeņa vienumu rindām
Tas ir viss, tagad mūsu veidņu gabali ir ievietoti, kā redzat (kārtības labad es tos ievietoju atsevišķā kategorijā):
Tagad mēs varam mainīt Wayfinder zvanu, lai mēs varētu izmantot šīs mini veidnes, lai izvadītu Wayfinder. Ja paskatās uz veidņu parametru sarakstu (būtu lietderīgi, ja jūsu priekšā būtu atvērts http://rtfm.modx.com/display/ADDON/Wayfinder vai izdrukātu to un paturētu ekrāna tuvumā), jūs redzēs, ka es izsaucu savus gabalus līdzīgi attiecīgajiem fragmentu izsaukuma parametriem. Es to darīju ērtības labad. Tas palīdz man sekot līdzi tam, kas notiek, kad sāku veidot savu zvanu. Pievienosim parametrus un izsaucam savus gabalus. Wayfinder zvans tagad izskatīsies šādi:
[[!Wayfinder? &startId=`0` &outerTpl=`7in1menuOuter` &rowTpl=`7in1menuRow` &innerTpl=`7in1menuInner` &innerRowTpl=`7in1InnerRow` &hereClass=`current_page_item` &firstClass]=`
Parametru vērtības tiek ievietotas apostrofos (`), nevis atsevišķās pēdiņās (').
Lieliski, apskatīsim šo izaicinājumu. Varat redzēt, ka mēs izmantojam veidņu opcijas, lai izsauktu mūsu gabalus, lai Wayfinder izvadītu mums nepieciešamo HTML ar pareizajām klasēm. Esmu definējis izsaucamo šeitKlase parametru un piešķīra tam vērtību pašreizējā_lapas_vienums lai tā atbilstu statiskajai HTML veidnei. Jūs varat pamanīt, ka es atstāju parametrus pirmā klase Un pēdējā klase tukšs. Iemesls tam ir tas, ka mana HTML veidne nenosaka klasi pirmajam un pēdējam izvēlnes vienumam, tāpēc, lai izvairītos no pārklāšanās, es tajās pārrakstīju tukšās virknes.
Redzams, ka mūsu ēdienkarte izskatās tieši tā, kā vēlējāmies. Nolaižamajā izvēlnē tiek izmantoti pareizie stili. Ja paskatās uz avota kodu, jūs redzēsit, ka ģenerēts Ceļa meklētājs"om HTML kods ir mainījies līdz nepazīšanai:
Šis kods atbilst mūsu veidnes sākotnējam statiskajam kodam, taču tas tika ģenerēts, zvanot Ceļa meklētājs.
Ir daudzas citas iespējas, kuras varat izmantot kopā ar Ceļa meklētājsēdienkartes veidošanai. Turpmākajās nodarbībās apskatīsim sarežģītas izvēlnes un to, kā tās integrēt programmā Wayfinder. Rezumējot: mūsu vietne tagad ir ieguvusi zināmu formu, un mums ir funkcionāla un dinamiska izvēlne.
Izvēlnes ģenerēšanas fragments. Var aizstāt Wayfinder un nodrošina lielāku elastību parametru norādīšanā.
Piemēram, tas var izveidot ēdienkarti no vairākiem vecākiem vienlaikus, parādot tos gan kopā, gan atsevišķās filiālēs.
Tas nodrošina ievērojamu ātruma pieaugumu tikai pirmajā palaišanas reizē, tad Wayfinder nav daudz sliktāks, pateicoties pareizai kešatmiņai.
Iespējas
Pēc noklusējuma pdoMenu pieņem parastos pdoTools parametrus un dažus savus parametrus:
| Vārds | Noklusējums | Apraksts |
|---|---|---|
| &vecāki | Pašreizējais resurss | Vecāku saraksts, lai meklētu rezultātus, atdalīts ar komatiem. Ja tu ieliec &vecāki=`0`- paraugs nav ierobežots. Ja vecāka ID sākas ar defisi, tas un tā bērni tiek izslēgti no atlases. |
| &līmenis | 0 (neierobežots) | Izveidotās izvēlnes līmenis. |
| &resursi | Rezultātos parādāmo resursu saraksts, atdalot tos ar komatiem. Ja resursa ID sākas ar defisi, šis resurss tiek izslēgts no atlases. | |
| &veidnes | Rezultātu filtrēšanas veidņu saraksts, atdalītas ar komatiem. Ja veidnes ID sākas ar defisi, resursi ar to tiek izslēgti no atlases. | |
| &kur | Papildu atlases parametru masīvs, kas kodēts JSON. | |
| &displejs Sākt | 0 | Iespējot sākuma izvēlnes mezglu rādīšanu. Noder, ja tiek norādīti vairāki "vecāki". |
| &konteksts | Izlases ierobežošana pēc resursa konteksta. | |
| &rādīt Slēpto | 0 | Rādīt izvēlnē paslēptos resursus. |
| &rādītNepublicēts | 0 | Rādīt nepublicētos resursus. |
| &priekšskatījumsNepublicēts | 0 | Iespējojiet nepublicētu resursu rādīšanu, ja lietotājam ir atļauja to darīt. |
| &slēpt apakšizvēlnes | 0 | Slēpt neaktīvos izvēlņu zarus. |
| &atlasiet | Atlasāmo lauku saraksts, atdalīts ar komatiem. Varat norādīt JSON virkni, piemēram, ar masīvu &select=`("modResource":"id,lapas nosaukums,saturs")` | |
| &Kārtot pēc | izvēlnes indekss | Jebkurš kārtojamais resursa lauks, tostarp TV parametrs, ja tas norādīts parametrā &ieskaitot televizorus, Piemēram &sortby=`("tvnosaukums":"ASC","lapas nosaukums":"DESC")`. Varat norādīt JSON virkni ar vairāku lauku masīvu. Ja vēlaties šķirot nejauši, norādiet &sortby=`RAND()` |
| &kārtot | A.S.C. | Šķirošanas virziens: dilstošs vai augošs. Ja parametrus &sortby un &sortdir atstājat tukšus, kārtošana notiks resursu secībā &resursi. |
| &limits | 0 | Izlases rezultātu skaita ierobežošana. |
| &nobīde | 0 | Izlaist rezultātus no sākuma. Jāizmanto kopā ar skaidri norādītu &limits |
| &atzīmējiet Atļaujas | Norādiet, kuras atļaujas lietotājam ir jāpārbauda, piemēram, parādot resursus &checkPermissions=`saraksts`. | |
| &countBērni | 0 | Precīzi saskaitot katras kategorijas pakārtoto resursu skaitu un parādot tos vietturā [[+bērni]]. Veic papildu pieprasījumus datu bāzei, tāpēc pēc noklusējuma tā ir atspējota. |
| &toPlaceholder | Ja fragments nav tukšs, visi dati tiks saglabāti vietturā ar šādu nosaukumu, nevis tiks parādīti ekrānā. | |
| &plPrefikss | wf. | Atklāto vietturu prefikss. |
| &showLog | 0 | Parādiet papildu informāciju par fragmenta darbību. Tikai autorizētiem lietotājiem kontekstā “mgr”. |
| &fastMode | 0 | Ātrs gabalu apstrādes režīms. Visi neapstrādātie tagi (nosacījumi, fragmenti utt.) tiks izgriezti. |
| &kešatmiņa | 0 | Fragmentu rezultātu saglabāšana kešatmiņā. |
| &kešatmiņas laiks | 3600 | Kešatmiņas derīguma laiks, sekundēs. |
| &shēma | -1 | URL veidošanas shēma tiek nodota modX::makeUrl(), tāpēc ir nepieciešamas iespējamās opcijas. Īpašais uri tips aizstāj resursa uri vērtību, nepalaižot funkciju. |
| &izmantojiet WeblinkUrl | 1 | Ģenerējiet saiti, pamatojoties uz resursu klasi. |
| &rowIdPrefikss | Prefikss id="" identifikatora iestatīšanai daļā. | |
| &šeitId | ģenerētās izvēlnes pašreizējā resursa id. Tas ir jānorāda tikai tad, ja pats skripts to nepareizi definē, piemēram, parādot izvēlni no cita fragmenta daļas. | |
| &ieskaitot televizorus | Atlasāmo televizora parametru saraksts, atdalot tos ar komatiem. Piemēram &includeTVs=`darbība, laiks` sniegs vietturi [[+darbība]] un [[+laiks]] . | |
| &sagatavot televizorus | TV parametru saraksts ar failiem no multivides avotiem, kuriem jāģenerē pilni ceļi. Ja instalējat &prepareTVs=`1`, visi televizori, kas norādīti &ieskaitot televizorus. | |
| &apstrādātTV | TV parametru saraksts, kas jāapstrādā un jāparāda atbilstoši to iestatījumiem sistēmas pārvaldniekā. Ja instalējat &processTVs=`1`, visi televizori, kas norādīti &ieskaitot televizorus. Palēnina darbu. | |
| &tvPrefikss | TV parametru prefikss. |
Veidnes opcijas
Šie parametri iestata gabalus, kuros ir veidnes izvēlņu ģenerēšanai.
| Vārds | Apraksts |
|---|---|
| &tplOuter | Visa izvēlnes bloka dizaina daļa. Noklusējums: @INLINE
|
| &tpl | Izvēlnes vienuma dizaina daļa. Ja tas nav norādīts, resursa lauku saturs tiks izdrukāts uz ekrāna. Noklusējums: @INLINE |
| &tplŠeit | Pašreizējā izvēlnes vienuma dizaina daļa. |
| &tplSākt | Saknes vienuma dizaina daļa, ja tā ir iespējota &displejs Sākt. Noklusējums: @INLINE [[+menutitle]][[+iesaiņotājs]] |
| &tplParentRow | Vecāku ar bērniem dizaina daļa, kas neatbilst &tplCategoryFolder nosacījumiem. Piemēram: @INLINE |
| &tplParentRowHere | Pašreizējā dokumenta noformējuma daļa, ja tajā ir pēcteči. |
| &tplParentRowActive | Vecāku un pēcnācēju dizaina gabals aktīvajā izvēlnes filiālē. |
| &tplKategorijaMape | Īpašas kategorijas dizaina gabals. Kategorija tiek uzskatīta par vecāku ar bērniem, kam laukā link_attributes ir tukša veidne vai rel="category". |
| &tplIekšējais | Visa izvēlnes apakšvienību bloka dizaina daļa. Ja tukšs - izmantos &tplOuter. Piemēram: @INLINE |
| &tplInnerRow | Izvēlnes apakšvienības dizaina daļa. Piemēram: @INLINE |
| &tplInnerŠeit | Daļa aktīvās izvēlnes apakšvienuma noformējumam. |
CSS klases opcijas
Šie parametri iestata vietturu [[+classnames]] un [[+classes]] vērtību dažādiem izvēlnes vienumiem. Vietturis [[+klases nosaukumi]] parāda tikai klases nosaukumu bez atribūta class="", pretstatā [[+klases]] vietturim.
Piemēri
Parastā izvēlnes izvade no vietnes saknes uz vienu līmeni:
[]
Izvade, izslēdzot noteiktus vecākus un pārbaudot lietotāja atļaujas:
[]
Tiek parādīta divu vecāku izvēlne vienlaikus, parādot saknes punktus:
[]
Tiek parādīti divi resursu līmeņi, saskaitot ligzdoto:
[]` &tplParentRow=`@INLINE
Iepriekšējās nodarbībās mēs jau esam izveidojuši MODX izvēlni: 1. - un 2. - standarta MODX nolaižamās izvēlnes izvade, izmantojot Bootstrap. Šodien mēs uzzināsim, kā parādīt daudzlīmeņu Bootstrap izvēlnes ar neierobežotu ligzdošanas pakāpi (3 līmeņu izvēlne, 4 līmeņi, 5 līmeņi utt.).
Piemēram, es parādīšu 5 līmeņu Bootstrap izvēlni, bet jūs varat to padarīt par 3 vai 7 līmeņiem, pat 10, mainot vērtību līmenī uz to, kas jums nepieciešams!
Daudzlīmeņu sāknēšanas izvēlnes (ar neierobežotu ligzdošanu) parādīšana MODX, izmantojot PdoMenu.
Daudzlīmeņu izvēlnes izvade būs šāda:
[]>[[+iesaiņotājs]]
Tas nedarbosies ārpus kastes. jo Bootstrap 3 pēc noklusējuma atbalsta tikai 2 ligzdošanas līmeņus, un, lai paplašinātu bootstrap 3 izvēlnes ligzdošanas līmeni, ir jāiekļauj js fails ar šādu saturu.
(function($)( $(document).ready(function())( $("ul.dropdown-menu ").on("klikšķis", funkcija(notikums) ( event.preventDefault(); event.stopPropagation( ) ; $(this).parent().removeClass("open");
Pēc tam sāks atvērties 3., 4. utt. ligzdošanas līmeņi. Principā viss, bet ir viena lieta, šī izvēlne atvērs visus līmeņus uz leju, un, manuprāt, tas nav īpaši pareizi vai skaisti, bet to var labot, izmantojot CSS.
Manā gadījumā bija vajadzīgas 2 CSS koda rindas, lai līmeņi nokristu uz sāniem.
Ul.nolaižamā izvēlne (pa kreisi: 100%; augšā: -8 pikseļi;) li.submenu1.dropdown.open>ul.nolaižamā izvēlne (pa kreisi: 0%; augšā: 100%;)
Jūs varat saņemt nedaudz atšķirīgu (bet identisku) kodu un tā rindu skaits var būt lielāks, ja jums ir vairāki izvēlnes atzari ar apakšizvēlnēm. Nu vēl ir daži sīkumi, kas būs jāpielāgo CSS savai gaumei, mans mērķis ir parādīt pamatus. Kā kodā atrast nepieciešamās CSS klases, kurām jāpiemēro stili, ir parādīts video, bet precīzāk tur ir parādīts viss daudzlīmeņu izvēlnes izveides process.
Šī ir izvēlne manā videoklipā:
Ja jums vajadzētu pagriezt trīsstūrus nolaižamajā izvēlnē (tie norāda uz leju, kad vienumi nokrīt pa kreisi), tas izskatītos šādi.
Pēc tam pievienojiet šādu css kodu:
Li.submenu2.dropdown>a>span.caret ( -moz-transform: pagriezt (-95°); -ms-transform: pagriezt (-95°); -webkit-transform: pagriezt (-95°); -o-transform: rotate(-95deg) transform: rotate(-95deg); - webkit); -pārveidot: pagriezt(-95deg) pārveidot: pagriezt(-95deg); 95 grādi);
Publicēšanas datums: 02/07/2011
Šajā vienkāršajā apmācībā es jums parādīšu, kā pielāgot izvēlni.
Reiz man palūdza izlabot kļūdu ar izvēlni vienā vietnē – daži vienumi spītīgi nevēlējās sakārtoties, bet tā vietā parādījās neparedzētās lapas vietās, virzot kursoru. Kļūda nebija greizā css, kā es sākumā pieņēmu, bet gan greizā Wayfinder izsaukumā.
Kas ir Wayfinder- šis ir fragments, kas tiek izmantots, ja sadaļā/-ās ir jāparāda dokumentu saraksts. Fragmenta rezultātā tiek ģenerēts nenosaukts saraksts. Izmantojot dažādus parametrus, ar šo sarakstu var izdarīt jebko :) Vairāk var lasīt dokumentācijā, vai arī ierakstot Google - “wayfinder modx wiki”.
Svarīgas piezīmes:
1. Par to, kas ir MODx, kā uzstādīt MODx, kā sakārtot dokumentu struktūru, kā no html izveidot veidni, kas ir chunk utt. Šajā nodarbībā es neapskatu iesācēju jautājumus.
2. Vietturi, kurus izmantošu nodarbībā, ir norādīti tādā formātā, kādu Evo versija “saprot”. Kāda ir atšķirība, skatiet piemēru:
Tātad, soli pa solim aplūkosim izvēlnes izveidi.
1. darbība
Nodarbībai es ieskicēju šo izvēlni:
Šeit skaidrības labad esmu piemērojis dažādus stilus dažādiem izvēlnes līmeņiem. Vietnē, kurā es izlaboju kļūdu ar izvēlni, tā bija aptuveni tāda pati - katram izvēlnes līmenim ir savs stils.
Izkārtojums — informācija par izkārtojumu nav iekļauta šīs nodarbības tvērumā, šis ir kods, kuru es saņēmu:
Pēc koda apbrīnošanas mēs paši nosakām, kura mūsu izvēlnē esošā klase par ko ir atbildīga (ja jūs bakstāties svešā kodā, tam jābūt skaidram arī jūsu pašam):
ul class="menu" — visas ēdienkartes klase
li class="top" — augstākā līmeņa izvēlnes vienumu klase
a class="top_link" — klase saitēm augstākā līmeņa vienumos
ul class="sub" — apakšizvēlnes klase
labi, span class="down" augstākā līmeņa vienumu noformēšanai
2. darbība. Izveidojiet trīs dokumentus
Produkti
- Piegāde
- Piegādātāji
Mēs veidojam dokumenta “Produkti” bērnu dokumentus: “Patiesības serums”, “Makropoulos Remedy”, “Universālie līdzekļi”.
3. darbība. Ievietojiet izvēlni atsevišķā daļā
Veidnē vietā, kur jums vajadzētu būt izvēlnei, mēs noņemam visu papildu kodu (pašas izvēlnes html kodu) un tā vietā rakstām
(( izvēlne))Tādējādi mēs ievietojām ēdienkarti atsevišķā gabalā. Tad mēs izveidojam jaunu gabalu un saucam to izvēlne. Pagaidām izveidoto izvēlnes kodu varat iekopēt gabala saturā. Skaidrības labad.
Dodieties uz administratora paneli sadaļā "Vietne" -> "Skatīt" - lai pārbaudītu, vai viss ir kārtībā ar ceļiem uz stila failu un attēliem.
Vai notika? Labi, bet šī vēl nav ēdienkarte. Ieelposim tajā dzīvību ar Wayfinder palīdzību.
4. darbība
Noņemiet visu izvēlnes daļu un tā vietā izsauciet Wayfinder fragmentu.
Pagaidām rakstīsim šādi:
startId parametrs- norāda, no kura dokumenta sākt saraksta veidošanu. Mums ir norādīts 0 — tas nozīmē, ka saraksts tiek veidots no dokumentu koka saknes.
Apskatīsim, kas notika:
Šī ir darba un dzīvā ēdienkarte. Pārdēvēt dokumentus, dzēst, pievienot - izvēlne tiks veidota atbilstoši dokumentu kokam.
5. darbība
5.1. Tagad mēs atgriežam ēdienkartes izskatu normālā stāvoklī
Wayfinder pēc noklusējuma ģenerē vienkāršu kodu () , visas sarakstu un elementu klases tiek izsauktas ar īpašiem parametriem.
Nodarbības sākumā mēs noteicām, kuras CSS klases mūsu ēdienkartē ir atbildīgas par ko. Wayfinder ir nepieciešamie parametri: ārējā klase- klase ēdienkartes konteineram. Salīdzinot ar mūsu izkārtojumu, mēs saņemam šādu Wayfinder zvanu:
[[ Wayfinder? &startId=`0` &level=`2` &outerClass=`menu`]]papildus parametriem ar klasēm mēs norādām ligzdošanas līmenis — &level=`2`.
Mēs atzīmējam trūkumus - nav nodarbību augstākā līmeņa izvēlnes vienumiem, nav tagu un apakšizvēlnes klase.
Visas šīs nepilnības tiek novērstas, pievienojot Wayfinder izsaukumam atbilstošus parametrus.
5.2. Klašu pievienošana augstākā līmeņa vienumiem un tagiem
Šim nolūkam ir mainīgs lielums rindaTpl, kas apraksta izvēlnes vienuma veidni, mēs izveidojam šādu veidni, šim mēs izveidojam gabalu ar nosaukumu vecāks:
Wayfinder zvanā mēs pievienojam &rowTpl=`vecāks` .
Neaizmirstiet pārbaudīt avota kodu - gandrīz viss ir kārtībā, paliek tikai apakšizvēlne.
Lai konfigurētu apakšizvēlni, izmantojiet mainīgo innerRowTpl.
Veidojot gabalu iekšējais:
Pievienojiet mainīgo Wayfinder zvanam innerRowTpl=`iekšējais` un mainīgais, kas norāda apakšizvēlnes konteinera klasi &innerClass=`sub` .
Pēdējais Wayfinder zvans izskatās šādi:
[ ]Tas arī viss, mūsu ēdienkarte ir gatava. Veiksmi!
Lai izveidotu dinamisku izvēlni, mēs izmantosim gatavu fragmentu Ceļa meklētājs. Kā jūs, cerams, atceraties no iepriekšējām nodarbībām, fragments ir PHP koda fragments, ko varam iekļaut savā veidnē. Atšķirība no gabaliem ir tikai kodā un izsaukšanas metodē. Ja gabals tiek izsaukts, izmantojot dubultās cirtainās figūriekavas, tad fragmenti tiek izsaukti, izmantojot tālāk norādīto [!Fragmenta_nosaukums!]- kešatmiņā nesaglabāts zvans vai tamlīdzīgi [[SnippetName]]- kešatmiņā saglabāts zvans. Katra fragmenta kodam jāsākas ar un beigas ?> . Turklāt katram fragmentam var tikt nodotas īpašas parametru vērtības, kuras tas apstrādās. MODx jau ir vairāki gatavi fragmenti, kurus izmantosim turpmāk.
Fragments Ceļa meklētājs kalpo, lai sakārtotu MODx saišu sarakstus. Mūsu vietnes izvēlnē ir šādu saišu saraksts. Vispirms atradīsim koda daļu, kas ir atbildīga par mūsu izvēlnes parādīšanu. Izvēlne ir gabalā GALVENE, te tas ir:
Izgriezīsim šo kodu un tā vietā ierakstīsim:
((IZVĒLNE))
Un mēs ielīmēsim kodu jaunā gabalā IZVĒLNE, gabala aprakstā mēs rakstīsim vietnes izvēlne. Tagad izpētīsim šo kodu.
Mūsu vietnes izvēlne ir vienkāršs, nenumerēts saraksts, kas atrodas konteinerā ar id="templatemo_menu". Izgriezīsim šo sarakstu no konteinera un tā vietā ievietosim mūsu fragmenta izsaukumu:
&startId=`0`- šis ir parametrs ar vērtību 0, kas norāda fragmentam tās mapes ID, kurā atrodas apstrādātie dokumenti. Visi mūsu dokumenti, kurus mēs parādīsim izvēlnē, atrodas saknes mapē, saknes mapes ID ir nulle. Paskatīsimies, kas mums ir.
Mūsu izvēlne darbojas, tikai aktīvais vienums vairs nav iezīmēts baltā krāsā:
Lai saprastu, kāpēc tas notika, mums ir jāaplūko lapas avota kods. Programmā Mozilla Firefox tas tiek darīts šādi: Skatīt >> Lapas pirmkods vai vienkārši nospiežot īsinājumtaustiņu Ctrl+U. Atrodiet kodu mūsu ēdienkartei:
Lūdzu, ņemiet vērā, ka avota kodā bija aktīvais vienums class="pašreizējais", un mūsu fragments tiek automātiski piešķirts aktīvajam vienumam class="active". Mēs arī pamanām, ka avota kodā klase tika lietota tagam
, un tagad uz tagu
Atrodiet failu mapē C:/xampp/htdocs/site/www/assets/templates/ templatemo_style.css un atveriet to, izmantojot Notepad++. Mēs meklējam pašreizējās klases aprakstu šajā failā, tas atrodas 198 rinda:
#templatemo_menu li .current(
polsterējums pa kreisi: 40 pikseļi;
krāsa: #ffffff;
}
aizstāt klasi strāva ieslēgts aktīvs, neaizmirstot to atkārtoti piešķirt atzīmei :
#templatemo_menu li.active a (
polsterējums pa kreisi: 40 pikseļi;
krāsa: #ffffff;
}
Saglabājiet failu. Paskatīsimies, kas notika.
Mūsu ēdienkarte darbojās tieši tā, kā dizaineri bija iecerējuši. Tagad mēs varam pārvietoties pa mūsu vietnes lapām, izmantojot mūsu galveno izvēlni. Kad saknes mapei pievienosit citus dokumentus, tie automātiski parādīsies mūsu izvēlnē. Lai izvēlnē netiktu parādīti nevēlami dokumenti, noņemiet atzīmi no tiem Rādīt izvēlnē. Izmantojot parametru, varat piespiedu kārtā izslēgt nevēlamu vienumu &excludeDocs=`izslēgto dokumentu ID saraksts, atdalīts ar komatiem`.
Lai izvēlnē netiktu rādīti bērnu dokumenti, kurus veidosim nākamajās nodarbībās, fragmenta izsaukumam pievienosim parametru līmenī, kas nosaka līmeņu skaitu izvēlnē, pēc noklusējuma tiks parādīti visi līmeņi, mēs to ierobežosim tikai vienā līmenī:
