Share
Caruselul de pe panoul eroului pe care o vom face în această parte a tutorialului va folosi animații culisante pentru a se deplasa între panouri și va fi de stil infinit astfel încât să se miște pentru totdeauna înainte sau înapoi prin fiecare panou. Nu va trece prin fiecare panou și apoi va reveni la început, va continua să circule pe panouri pe o durată nedeterminată într-o direcție, în funcție de folosirea legăturii anterioare sau următoare.
Mai întâi de toate trebuie să analizăm câți panouri de conținut există în panoul eroului și să creați un model de navigare pentru ele. Desigur, în acest moment știm exact câte panouri există pentru că le-am creat în back-end, dar dacă vreodată vrem să adăugăm mai multe panouri sau dacă îi dăm locul pe altcineva pentru a le menține și adaugă mai multe panouri , nu vrem ca funcția să se rupă, așa că, în loc să presupunem că vor fi doar trei panouri, le vom număra și vom adăuga link-uri către fiecare.
Creaza un nou .js dosar, sunați-l hero.js și salvați-l în script-uri pliant. Începeți prin adăugarea la acesta a următorului cod:
Accentsconagua
(funcția ($) var baseEl = $ ("# hero"), slider = baseEl.find ("# slider"), numPanels = baseEl.find #), width (), curPanel = 1, templateArr = [], functii = ; slider.width (panelWidth * numPanels); $ .each (baseEl.find var tempObj = , num = i + 1; tempObj.id = "panel-" + num; tempObj.href = "#"; tempObj.title = + num TemplateArr.push (tempObj);)); baseEl.find ("# linkTemplate"). tmpl (templateArr) .insertBefore ("# next"); baseEl.find ("# panel-1" a ") addClass (" pe ");) (jQuery); Nu uitați să adăugați un link la noul fișier script, precum și pluginul tmpl, în fișierul nostru BasePage.master fișier după link-ul către jQuery în sine:
Scriptul se află într-o funcție anonimă care este executată imediat și alias $ caracter pentru compatibilitatea cu jQuery noConflict () metodă. Începem prin stabilirea unei serii de variabile; primele două cache selectorii pentru câteva elemente pe care le vom folosi frecvent pe parcursul scriptului. Rețineți că obiectul jQuery pe care îl creăm la selectarea modelului exterior #erou containerul este singurul obiect jQuery pe care îl creăm în întregul scenariu.
De asemenea, numărăm numărul de panouri și păstrăm lățimea #viewer container și inițializează un contor de panouri care va ține evidența panoului activ. De asemenea, creăm o matrice goală pentru a stoca legăturile de navigare în gata pentru template, precum și un obiect gol care va fi folosit pentru a stoca câteva funcții mai târziu.
Apoi stabilim lățimea #slider element astfel încât să poată găzdui toate panourile stivuite orizontal.
După aceasta, creăm o legătură de navigare pentru fiecare panou. Facem asta folosind jQuery's fiecare() metodă; pentru fiecare panou vom crea un nou obiect gol, apoi vom popula obiectul cu un id pentru link, și a href, titlu și un text. Fiecare obiect este apoi împins în matricea pe care am inițializat-o acum un minut.
Aplicăm apoi șablonul folosind tmpl () , specificând matricea acum populată ca date care se aplică șablonului și #Următor → link ca element pentru a introduce fiecare link nou înainte. În cele din urmă, aplicăm numele clasei pe prima legătură numerică din panoul eroului, ca atunci când se încarcă pagina, primul panou va fi vizibil.
De asemenea, trebuie să adăugăm marcajul de creare la pagina principală pentru pagina de pornire. Adăugați următorul cod direct după #Următor → link în HomePage.master:
În acest moment se poate adăuga un mic stil suplimentar pentru panoul eroului; în partea de jos a site.css adăugați următorul cod:
#hero border: 2px solid # 969696; margin-top: 20px; -moz-border-radius: 4px; border-radius: 4px; Poziția: relativă; overflow: ascuns; fundal-culoare: #eee #viewer width: 960px; height: 220px; overflow: ascuns; Poziția: relativă; #slider poziție: absolută; top: 0; stânga: 0; .panel width: 920px; padding: 10px 20px; plutește la stânga; #ui margine: 0 0 10px; padding: 0; text-align: center; #ui li afișare: inline; marja de-dreapta: 15px; list-style-type: none; #ui a font-weight: bold; text-decoration: none; culoare: # 535353; schiță: nici una; #ui a: mutați, #ui a.on border-bottom: 1px solid # 535353;
Aceasta este cea mai mare parte o temă de bază, astfel încât panoul eroului are aceeași piele de bază ca și restul site-ului, deși o parte din stil este necesară dintr-o perspectivă funcțională. #viewer ar trebui setat la lăţime și înălţime a unui singur panou de conținut și ar trebui să aibă revărsare proprietate setat la ascuns astfel încât numai un singur panou de conținut la un moment dat este vizibil. #slider elementul ar trebui să fie poziționat absolut astfel încât să fie liber să se miște în interiorul #viewer.
Linkurile utilizate pentru a naviga între diferite panouri se află într-o listă neordonată; fiecare listă-element este setat să afișeze in linie astfel încât acestea să poată fi centrate în interiorul
Tot ce trebuie să facem acum este să adăugăm funcționalitatea care face ca noile linkuri de navigare să funcționeze. Trebuie să folosim mai multe funcții diferite pentru a realiza acest lucru; adăugați mai întâi codul următor pentru #prev și #Următor → link-uri către gol funcții obiect declarat cu variabilele noastre la începutul codului:
prev: functie () baseEl.find ("on") removeClass ("on"); dacă (curPanel === 1) baseEl.find ("panoul".) eq (numPanels - 1) .prependTo (cursor); slider.css ("stânga", -panelWidth) .animate (left: "+ =" + panelWidth + "px", funcția () baseEl.find ("pe"); baseEl.find ("panou"); eq (0) .appendTo (cursor); slider.css ("stânga"; ; altceva slider.animate (left: "+ =" + panelWidth + "px", funcția () baseEl.find ("# ui a"). ; curPanel--;); , urmatoarea: function () baseEl.find ("on") removeClass ("on"); dacă (curPanel === numPanels) baseEl.find ("panoul") eq (0) .appendTo (cursor); slider.css ("left", - (panelWidth * (numPanels - 2))) animate (left: "- =" + panelWidth + "px" ) .eq (1) .addClass ("pe"); baseEl.find ("panou"). ); altceva slider.animate (left: "- =" + panelWidth + "px", funcția () baseEl.find ("# ui a"). ; curPanel ++;); Aceste două funcții sunt foarte asemănătoare, cu doar câteva diferențe subtile. Ne vom uita la prev funcționează mai întâi în detaliu și apoi analizați diferențele din Următor →. Primul lucru pe care îl facem este să eliminăm pe din elementul care o are în prezent. Apoi, verificăm dacă primul panou este în prezent vizibil prin verificarea curPanel variabil.
Dacă primul panou este vizibil, selectăm primul panou și îl deplasăm la sfârșitul lui #slider și corectați stilul CSS din stânga al elementului #slider astfel încât primul panou este încă vizibil. Pentru a corecta poziționarea #slider elementul pe care îl mutăm doar minus o lățime a panoului spre stânga. Apoi animăm din primul panou înapoi spre ultimul panou.
Odată ce animația este completă, adăugăm pe clasați la linia de navigare pentru ultimul panou, mutați primul panou înapoi în locația sa originală în #slider element și corectați din nou stânga poziția #slider astfel încât ultimul panou este încă vizibil. Elaborarea poziției stângi este puțin mai complexă în acest moment; trebuie să mutăm #slider element lățimea glisorului în total minus lățimea unui panou la stânga, prin urmare, de ce aceasta este o cifră minus. În cele din urmă, actualizăm curPanel variabilă până la ultimul panou.
Dacă primul panou nu este vizibil, animăm pur și simplu panoul anterior și apoi îl actualizăm pe pentru linia de navigație și pentru curPanel pentru a stoca noul id de panou. Acesta este tot ce trebuie să facem atunci când #prev se face clic pe linkul de navigare.
Așa cum am spus, #Următor → comportamentul este foarte similar, în esență facem aceleași lucruri, dar de data aceasta trebuie să verificăm dacă ultimul panou este în prezent vizibil în locul primului panou. Când suntem pe ultimul panou, mutăm ultimul panou la începutul lui #slider element și să corecteze stânga Poziție prin deplasarea #slider lăţime din #slider minus lățimea a 2 panouri la stânga. Apoi animăm primul panou înainte de a muta ultimul panou înapoi la poziția sa corectă la sfârșitul ferestrei #slider element.
Dacă nu suntem pe ultimul panou atunci când #Următor → faceți clic pe link-ul pe care îl purtăm, pur și simplu animăm la următorul panou. Indiferent dacă suntem pe ultimul panou sau nu, mutăm și el pe clasați la link-ul de navigare relevant și actualizați-ne curPanel variabilă de urmărire. Rețineți că atunci când ajustăm stânga poziția #slider după mutarea fie a primului, fie a ultimului panou, schimbarea este instantanee și astfel nu se poate observa. Aceasta face ca caruselul să pară infinit.
Cele două funcții pe care tocmai le-am adăugat sunt pur și simplu stocate într-un obiect; ei nu vor face nimic pe cont propriu. Ultimul bit de funcționalitate pe care trebuie să-l adăugăm este o modalitate de a apela aceste funcții și un anumit comportament pentru linkurile numerice de navigare care au fost adăugate dinamic. Putem face toate acestea cu ajutorul următorului instrument de gestionare a clicurilor:
(), dacă ((!) ()) (dacă este cazul). | this.id === "următor") funcția [this.id] .call (); altceva var target = parseInt (this.id.split ("-") [1]), animString = > curPanel) "- =" + ((țintă - curPanel) * panelWidth) + "px": "+" , funcția () baseEl.find ("on") .Class ("on"); baseEl.find ("# ui a"). );); Instrumentul de preluare a clicurilor este atașat la elemente din legăturile de navigare, dar trebuie să oprim browserul urmând linkul din interiorul fiecărui element de listă folosind preventDefault () metoda obiectului evenimentului.
Începem să verificăm faptul că panoul eroului nu este deja animat, deoarece acest lucru ar determina ruperea lui #prev sau #Următor → link-urile au fost executate prea repede. Atunci verificăm dacă id din linkul de navigare care a fost clic este egal cu precedentul sau următorul. Dacă este, suntem numiți relevanți prev sau Următor → funcția în obiectul funcțiilor noastre folosind JavaScript apel() funcţie.
În cazul în care id nu este prev sau Următor → știm că una dintre legăturile numerice a fost folosită în schimb. În acest caz, vom obține mai întâi id numărul elementului din listă pe care a fost făcut clic și apoi folosiți acest element pentru a anima numărul corect de pixeli în direcția corectă pentru a muta #slider astfel încât panoul relevant să fie vizibil.
Pentru a determina distanța și direcția, verificăm mai întâi dacă numărul panoului țintă este mare decât numărul panoului curent. Dacă este, animăm #slider element în stânga. Pentru a determina distanța în pixeli pentru a muta, scădem numărul curent al panoului de la numărul panoului țintă și înmulțim rezultatul cu lățimea unui panou.
Dacă numărul panoului țintă este mai mic decât numărul panoului curent, în schimb scădem numărul panoului țintă din panoul curent și înmulțim această cifră cu lățimea unui panou.
Odată ce avem direcția și distanța salvată în animString Variabilele pot apoi să efectueze animația prin deplasarea #slider folosind elementul animString. Odată ce animația este completă, actualizăm pe clasa elementului de navigație relevant și setați curPanel la numărul de panouri țintă.
Acesta este tot ce trebuie să facem; ar trebui să avem acum un site Web Umbraco cu conținut complet gestionat și un carusel atractiv. Dacă sunt adăugate mai multe noduri de panou din back-end, caruselul se va actualiza automat pentru a se potrivi cu noile panouri și ar trebui să continue să funcționeze fără probleme.
Acest lucru ne duce acum la sfârșitul seriei Umbraco. Sper că până acum puteți vedea frumusețea și puterea CMS Umbraco și sunt la fel de dedicați ca un urmaș ca mine. Să revedem pe scurt punctele cheie din fiecare parte a seriei.
Am aflat că am creat tipuri de documente pentru a defini diferitele tipuri de noduri pe care le putem crea în back-end. Aceste tipuri de documente specifică modul în care sunt structurate diferitele noduri și diferitele câmpuri care trebuie editate și gestionate în funcție de conținut. Fiecare nod se referă, de obicei, aproximativ la o pagină a site-ului web, dar în cele din urmă ele pot reprezenta orice piesă de date gestionate de conținut.
Fiecare tip de document este, de obicei, asociat unui șablon care definește codul HTML și elementele sau macrocomenzile Umbraco care pot fi folosite pentru a reda pagina. Șabloanele sunt pur și simplu. Paginile principale sunt de obicei imbricate în Umbraco pentru a maximiza reutilizarea codului. Nu toate tipurile de documente trebuie asociate cu un șablon, așa cum am văzut cu panourile noastre de eroi.
Șabloanele pot face referire la conținutul editabil adăugat în back-end utilizând Umbraco: Obiecte pentru a afișa conținutul gestionat. XSLT (sau Razor în versiuni mai noi ale Umbraco) poate fi folosit pentru a itera peste un set de noduri și pentru a genera elemente dinamice, cum ar fi meniurile de navigare pentru site sau hub-uri precum pagina noastră de știri. XSLT (sau Razor) poate fi adăugat, de asemenea, direct în șabloane pentru prelucrarea simplă a datelor.
Fișierele cu cod în spate nu sunt utilizate pentru niciuna dintre paginile standard ale site-ului, dar dacă trebuie să le folosim, putem introduce standardul .Net usercontrols în șabloanele noastre așa cum am văzut atunci când creăm formularul nostru de contact.
Deși șabloanele site-urilor pre-construite pot fi instalate, Umbraco face extrem de ușor să construiască de la zero un site Web cu conținut complet gestionat.
Totul despre CMS este complet personalizabil. Am acoperit elementele de bază pe parcursul acestei serii, dar există mult mai multe pentru CMS decât ceea ce am privit până acum.
