Hei fellesskap!

I dette innlegget vil du lære hva Multiple Formtabs er og hvordan du oppretter en konfigurasjon med et annet sett med data. Og selvfølgelig vil vi lage med deg en glidebryter som vil ha forskjellige typer lysbilder, og på slutten finner du en veldig interessant historie som jeg ikke turte å fortelle noen på lenge (med mindre du selvfølgelig er interessert, men historien er interessant - tro meg). Og så, eksempler på lysbilder:

• Bakgrunnsbilde
• Video i bakgrunnen
• Ensfarget på bakgrunnen

Oppmerksomhet! Denne gangen er det ikke nødvendig å holde barn og gravide borte fra skjermer, for dette er en slags diskriminering basert på alder og kjønn!

Slik blir det

Nok en kunngjøring! Jeg vil ofte referere til den første leksjonen for ikke å gjenta meg selv, så jeg anbefaler på det sterkeste å sjekke ut

For hva?

La oss forestille deg: Du kommer over et prosjekt der det for eksempel på hovedsiden er en glidebryter som har flere typer lysbilder, en har en video i bakgrunnen, en annen har et bilde, og den tredje har for eksempel en solid farge. Du vil ikke lage ett sett med felt (én konfigurasjon) og sånt (beklager vokabularet) alle disse feltene i det og fortelle lederen hvordan han skal leve og være med det. Dette er ikke det seriøs tilnærming!? (håper noen forstår)

Kom deg på jobb

Vi forstår "hvorfor", la oss nå finne ut "hvordan". Hvis du allerede har lest den første leksjonen, må vi gå til MIGX-komponentsiden og lage 3 konfigurasjoner. Forhåndsinstaller ColorPicker fra Jako (men dette er ikke nødvendig):

Alt som ikke er spesifisert av meg, hopp over det!

Konfigurasjon solid

• Tab Innstillinger
  • Navn-fast
  • Legg til ny kategori- Slider
• Tab Formtabs
  • Felter Felter opprette 3 felter
    1. Bakgrunnsfarge:
       • Feltnavn- bgcolor
       • Bildetekst- Velg bakgrunnsfarge
       • Inngang TV-type- ColorPicker (eller den du
         bruk)
    2. Overskrift:
       • Feltnavn-overskrift
       • Bildetekst- Lysbildetittel
    3. Beskrivelse:
       • Feltnavn- beskrivelse
       • Bildetekst- Beskrivelse av lysbildet
       • Inngang TV-type-tekstområde
  • Felt for flere skjemataber- type (Denne verdien vil være navnet på nøkkelen i
    utgangsmatrise. Standard: MIGX_formname)
  • - Med ensfarget på bakgrunnen (Tekst
    gitt konfigurasjon i utvalgslisten)
  • - solid (Verdien av samme type felt
    i arrayet)

videokonfigurasjon

• Tab Innstillinger
  • Navn- video
  • Kategori- Slider
• Tab Formtabs
  • Felter- Lag 1 fane og i feltet Felter Igjen lager vi 3 felt, bare ett av disse feltene er av en annen type.

    Jeg bør presisere her at antall felt og deres typer i forskjellige konfigurasjoner kan variere så mye som fantasien din er begrenset... Og jeg vet at fantasien din er fin?

    1. Video (dvs. fil):
       • Feltnavn- video
       • Bildetekst- Last opp video
       • Inngang TV-type- fil
    2. Overskrift:
       • Feltnavn-overskrift
       • Bildetekst- Lysbildetittel
    3. Beskrivelse:
       • Feltnavn- beskrivelse
       • Bildetekst- Beskrivelse av lysbildet
       • Inngang TV-type-tekstområde
  • Felt for flere skjemataber- type
  • Alternativertekst for flere skjemafaner- Med video i bakgrunnen
  • Multiple Formtabs Options-verdi- video

skyvekonfigurasjon

Som standard vil det ta et bilde og vil være en slags hovedkonfigurasjon.

• Tab Innstillinger
  • Navn- glidebryter
  • Kategori- Slider
  • Erstatter "Legg til element"- Legg til lysbilde
  • Skjematekst
  • Vindutittel- Legg til/rediger lysbilde
• Tab Formtabs
  • Felter- Opprett 1 fane og lag igjen 3 felter i feltfeltet
    1. Bilde:
       • Feltnavn- bilde
       • Bildetekst- Last opp et bilde
       • Inngang TV-type- bilde
       • Spesifiser kilden til filene du trenger, jeg beskrev denne oppgaven i den første leksjonen
    2. Overskrift:
       • Feltnavn-overskrift
       • Bildetekst- Lysbildetittel
    3. Beskrivelse:
       • Feltnavn- beskrivelse
       • Bildetekst- Beskrivelse av lysbildet
       • Inngang TV-type-tekstområde
  • Flere skjemafaner– Det er her magien kommer inn, vi må velge konfigurasjonene som ble opprettet i de foregående trinnene, inkludert den vi lager nå, dvs. velg video, solid og glidebryter

    Konfigurasjoner glidebryteren vil ikke være i listen, fordi den faktisk ikke er opprettet ennå, så du må gå gjennom de resterende trinnene, lagre konfigurasjonen, åpne denne konfigurasjonen igjen for redigering og denne gangen vil den være tilgjengelig i listen glidebryteren

    
    

    En annen presisering: konfigurasjonene vil bli sortert nøyaktig i den rekkefølgen du valgte, dvs. som standard, når du legger til et nytt lysbilde, vil det første i listen bli valgt
    

  • Etikett med flere skjemafaner- Velg type lysbilde (tekst er angitt her
    som brukeren vil se ved siden av listen over lysbildetype)
  • Felt for flere skjemataber- type
  • Alternativertekst for flere skjemafaner- Med et bilde i bakgrunnen
  • Multiple Formtabs Options-verdi- bilde
• Tab Kolonner
  • Felt Kolonner. Legg til to elementer
    1. Overskrift
       • Tab Søyle
         • Overskrift- Overskrift
         • Felt-overskrift
       • Tab Cell Editor
         • Redaktør- this.textEditor
    2. Beskrivelse
       • Tab Søyle
         • Overskrift- Beskrivelse
         • Felt- beskrivelse
       • Tab Cell Editor
         • Redaktør- this.textEditor

Som du allerede har lagt merke til, i de to første konfigurasjonene laget vi ikke såkalte kolonner for utgang i kontrollpanelet, dvs. når du redigerer selve TV-parameteren. Disse kolonnene må opprettes i den siste, dvs. i konfigurasjonen som vil bli angitt i TV og i hvilken i feltet Flere skjemafaner i fanen Formtabs Alle konfigurasjoner vi trenger vil bli oppført, inkludert den samme konfigurasjonen

La oss gå og raskt lage en TV med migx-inngangstypen, i feltet Konfigurasjoner vi skriver navnet på konfigurasjonen vår, dvs. skyveknappen , tilordne de nødvendige malene og åpne ressursen for redigering, eller opprett den. Hvis vi gjorde alt riktig, bør vi se følgende bilde:

Bildet er klikkbart og hvis du allerede har sett gif-en via lenken i begynnelsen av notatet, så er dette det

Vi fyller ut dataene veldig raskt og går videre til å vise lysbildene våre.

Hvordan trekke seg?

Datainndata er bra, men hva med utdata? - Ikke bekymre deg, kamerater, alt blir bra. For utdata har vi igjen 2 gode alternativer, og vi vurderte begge disse alternativene i , dette er en innebygd MIGX-snutt getImageList og allmektig fenomen. La oss se hvordan dataene våre ser ut:

getImageList

La oss kalle kodebiten uten å spesifisere tpl-parameteren for å se rådataene:

[] Array ( => 14 => image => files/avatar.png => Dette er et lysbilde med et bilde => Vel, en kort beskrivelse) [_alt] => 0 [_first] => 1 [_last] = > => 1 = > glidebryter) Array ( => 15 => video => filer/Hjemmet mitt er skammelig.MOV => Og dette er en video => Ja, faktisk! [_alt] => 1 [_first] => [_last] => => 2 => glidebryter) Array ( => 16 => solid => ff0000 => Og her er den røde fargen vakker => jeg liker det! [_alt] => 0 [_first] => [ _last] => 1 => 3 = > glidebryteren)

fenomen

($_modx->resource.slider| fraJSON | print) Array ( => Array ( => 14 => image => files/avatar.png => Dette er et lysbilde med et bilde => Vel, en kort beskrivelse)) => Array ( = > 15 => video => filer/Mitt hjem er skammelig.MOV => Og dette er allerede en video => Ja, virkelig!) => Array ( => 16 => solid => ff0000 => Og her er rødt, en vakker farge => jeg liker!))
Som vi kan se, er det blant annet en nøkkel i arrayene våre type med verdiene som vi spesifiserte da vi opprettet konfigurasjoner.

For å vise glidebryteren vår ved å bruke getImageList, må vi lage 3 biter med navnene på nøkkelverdiene våre type, dvs.: bilde, video og solid. Neste vil du forstå hvorfor.

Eksempler på biter:

// Klumpbilde

// Klump video // Klump solid
Og samtalen skal se slik ut:

Her tar vi verdier fra matrisene til hvert lysbilde, det er derfor vi opprettet tre biter hvis navn sammenfaller med feltverdiene Felt for flere skjemataber

Vel, på fenomen alt ser mye enklere ut:

(var $slider = $_modx->resource.slider| fraJSON) (hvis $slider)

(/hvis)

Sammendrag og lovet historie

Som vi kan se, takler MIGX denne oppgaven, om ikke "utmerket", men i det minste "bra." Jeg gjentar nok en gang at MIGX ikke begrenser deg i antall konfigurasjoner, faner i hver konfigurasjon og antall felt i dem. Og eksemplene, som jeg håper du allerede har forstått, er ganske enkle, slik at du også enkelt kan gjøre deg kjent med denne funksjonaliteten. Og en viktig ting til: når du skriver ut biter, anbefaler jeg på det sterkeste å sjekke om feltene skal fylles ut og alltid ta hensyn til at dataene kan fylles ut eller ikke eller av en eller annen grunn kanskje ikke kommer frem, og derfor bruker phx-filtre for MODX-syntaks eller betingelser i fenom.

Takk alle sammen for oppmerksomheten, jeg vil ønske alle lykke til, men jeg vil ikke, for som de sier: "Lykke ønskes til tapere," så jeg ønsker dere lykke og helse eller noe, men for de som er interessert , resten er historie.

En dag kom slektningene mine for å besøke oss, blant dem min nevø (min søsters sønn) fra et naboland og to av mine nevøer (vi er nesten alle på samme alder). Landsted, solfylte Sentral-Asia, et lite fjell og en elv i nærheten. Samme kveld bestemte vi oss fire for å ta en tur langs denne elven, og til å begynne med var alt rolig, det var ingen grunn til bekymring. Vi hadde det ganske bra, fortalte historier (noen ganger skumle og makabre), spøkte og sånt. Men på et tidspunkt la jeg merke til at en av nevøene mine ble blek, og dette var ikke bare en verbal vending eller pynt, fordi jeg aldri hadde sett en slik frykt og forvirring i ansiktet til en person før og etter denne hendelsen. Uten å ta øynene av, så han i retningen der ryggen min ble snudd, d.v.s. han så ut til å se på noe eller noen bak meg, men ikke rett bak meg og nær, det virket for meg som om han så et sted i det fjerne. Det var skummelt og jeg spurte ham: – Hva skjedde? Og han...

Dette avsnittet må late som om historien i dette notatet har en fortsettelse, men faktisk lurte jeg deg bare litt, i håp om at jeg kunne muntre deg opp litt av den tekniske, kjedelige og lange teksten og humøret ditt ville løfte seg. Og selve historien er ekte og veldig interessant. Nå takker dere alle for oppmerksomheten!

UPD:
Hva om jeg er Bach!?

Hvis noen plutselig vil takke deg med en rubel, så må det være: Sberbank-kort +79609354545

Slider Revolution er en av de mest populære glidebryterne på grunn av dets enorme utvalg av funksjoner og brukervennlighet
fra ThemePunch. Denne glidebryteren har blitt kjøpt 273 441+ ganger og brukes av 2 500 000+ nettsteder over hele verden.

Nedenfor er noen av hovedfordelene med denne glideren, som skiller den betydelig fra gratis og
mest premium analoger:

• Kraftig visuell editor - tilpass visningen av glidebrytere for å passe behovene til prosjektet ditt gjennom en praktisk meny der
  hver funksjon er på sin plass. Strenge graderinger vil hindre deg i å bli forvirret. Den eneste vanskeligheten i
  Først vil du prøve dem alle.
• Kontroller variasjonen til hvert lysbilde - planlagt visning av blokker på skjermen til en PC, nettbrett og telefon
  vist i den visuelle editoren. Du kan endre størrelse på lysbilder individuelt for hver enhet.
  En adaptiv mal vil ikke tillate at bilder og videoer blir forvrengt eller tar opp mer plass enn nødvendig.
  praktisk visning.
• Arbeide med sosiale nettverk og videohosting - Slider Revolution av femte generasjon lar deg inkludere i glidebryteren
  data fra Instagramm, Facebook, Flickr, Twitter, Vimeo og Youtube. Hvis du planlegger å legge ut videoen på egen hånd
  server, kan du bruke HTML5. Deler av koden skrives automatisk.
• Høy ytelse og optimalisering av lysbilder - plugin fungerer raskt i redigeringsmodus og reduserer
  glidebryterens vekt uten tap av innholdskvalitet. Du trenger ikke å bekymre deg for lange sidelastingstider. Hva er spesielt
  relevant for mobile enheter som ikke er tilgjengelige via WiFi-tilkoblinger.
• Et stort antall spesialeffekter under lysbildeoverganger
• Mange animasjonseffekter ved visning av tekst, videoer og bilder
• Start videoen automatisk når du åpner nettstedet eller manuelt, for å velge mellom, stopp glidebryteren når du ser på videoen,
  spole tilbake osv.
• Stort utvalg av navigasjonsinnstillinger
• Sette inn innleggskunngjøringer med lenker direkte i glidebryteren, mens den er konfigurert for SEO-optimalisering
• Støtte og installasjon av Google Fonts
• Ved å bruke mange lag (bilder, videoer, bildetekster og lenker) i ett lysbilde, kan de være utallige
  overlapper hverandre, og skaper dermed en realistisk video eller en hvilken som helst presentasjon.

Oppmerksomhet! For å kunne laste ned Online premium skyvemaler og bibliotekobjekter, må du kjøpe en egen lisens fra ThemePunch, som på tidspunktet for skriving av denne teksten koster $19, og deretter aktivere den ved å skrive inn kjøpskoden i feltet som er angitt i figuren nedenfor.

Videoanmeldelse av modSliderRevolution

Foreløpig er en glidebryter - karusell - en funksjonalitet som ganske enkelt er nødvendig å ha på et forretningsnettsted, porteføljenettsted eller en hvilken som helst annen ressurs. Sammen med skyveknapper for fullskjermbilder passer horisontale karusellglidebrytere godt inn i ethvert webdesign.

Noen ganger bør glidebryteren oppta en tredjedel av sidesiden. Her brukes karusellglideren med overgangseffekter og responsive oppsett. Netthandelssider bruker en karusellglidebryter for å vise flere bilder i individuelle innlegg eller sider. Skyvekoden kan fritt brukes og modifiseres i henhold til dine behov.

Ved å bruke JQuery i forbindelse med HTML5 og CSS3 kan du gjøre sidene dine mer interessante, gi dem unike effekter og trekke oppmerksomheten til besøkende til et bestemt område av nettstedet.

Slick – moderne karusellskyveplugin

Slick er en fritt tilgjengelig jquery-plugin hvis utviklere hevder at løsningen deres vil tilfredsstille alle skyvekravene dine. Adaptiv skyveknapp - karusell kan fungere i "flis"-modus for mobile enheter, og i "dra og slipp"-modus for skrivebordsversjonen.

Inneholder en "fade"-overgangseffekt, en interessant "sentermodus"-funksjon, lat innlasting av bilder med automatisk rulling. Oppdatert funksjonalitet inkluderer å legge til lysbilder og et lysbildefilter. Alt for å sikre at du konfigurerer plugin-en i henhold til dine krav.

Demomodus | Last ned

Owl Carousel 2.0 – jQuery – plugin for bruk på berøringsenheter

Denne plugin har et stort sett med funksjoner, egnet for både nybegynnere og erfarne utviklere. Dette er en oppdatert versjon av karusellglideren. Hans forgjenger hadde samme navn.

Skyveknappen har noen innebygde plugins for å forbedre den generelle funksjonaliteten. Animasjon, videoavspilling, skyveautomatikk, lat lasting, automatisk høydejustering – dette er hovedfunksjonene til Owl Carousel 2.0.

Dra og slipp-støtte er inkludert for mer praktisk bruk av plugin på mobile enheter.
Programtillegget er perfekt for å vise store bilder selv på små skjermer på mobile enheter.

Eksempler | Last ned

jQuery-plugin Silver Track

En ganske liten, men funksjonsrik jquery-plugin som lar deg plassere en glidebryter på en side - en karusell, som har en liten kjerne og ikke bruker mye nettstedsressurser. Plugin-en kan brukes til å vise vertikale og horisontale glidere, med animasjon og lage sett med bilder fra galleriet.

Eksempler | Last ned

AnoSlide – Ultrakompakt responsiv jQuery-glidebryter

Ultrakompakt jQuery-glidebryter - karusell, hvis funksjonalitet er mye større enn en vanlig skyveknapp. Disse inkluderer forhåndsvisning av enkeltbilder, karusellvisning med flere bilder og tittelbasert skyvevisning.

Eksempler | Last ned

Uglekarusell – Jquery-glidebryter – karusell

Uglekarusell er en glidebryter som støtter berøringsskjermer og dra-og-slipp-teknologi, enkelt integrert i HTML-kode. Plugin-en er en av de beste glidebryterne som lar deg lage vakre karuseller uten noe spesielt forberedt markering.

Eksempler | Last ned

3D-galleri - karusell

Bruker 3D-overganger basert på CSS-stiler og litt Javascript-kode.

Eksempler | Last ned

3D-karusell med TweenMax.js og jQuery

Storslått 3D-karusell. Det ser ut til at dette fortsatt er en betaversjon, fordi jeg oppdaget et par problemer med den akkurat nå. Hvis du er interessert i å teste og lage dine egne glidere, vil denne karusellen være til stor hjelp.

Eksempler | Last ned

Karusell med bootstrap

Responsiv glidebryter - karusell ved hjelp av bootstrap-teknologi kun for din nye nettside.

Eksempler | Last ned

Moving Box-karusellglidebryter basert på Bootstrap-rammeverket

Mest populær på portefølje- og forretningsnettsteder. Denne typen glidebryter - karusell - finnes ofte på nettsteder av alle typer.

Eksempler | Last ned

Tiny Circleslider

Denne lille skyveknappen er klar til å fungere på enheter med hvilken som helst skjermoppløsning. Skyveknappen kan fungere i både sirkulær og karusellmodus. Tiny circle presenteres som et alternativ til andre glidere av denne typen. Det er innebygd støtte for IOS- og Android-operativsystemer.

I sirkulær modus ser glidebryteren ganske interessant ut. Utmerket støtte for dra og slipp-metoden og et automatisk rullesystem for lysbilder.

Eksempler | Last ned

Innholdsglidebryter for tommelen

En kraftig, adaptiv, karusellglidebryter er perfekt for et moderne nettsted. Fungerer riktig på alle enheter. Har horisontal og vertikal modus. Størrelsen er minimert til bare 1 KB. Den ultrakompakte plugin-modulen har også utmerkede jevne overganger.

Eksempler | Last ned

Wow – glidebryter – karusell

Inneholder mer enn 50 effekter, som kan hjelpe deg med å lage en original glidebryter for nettstedet ditt.

Eksempler | Last ned

Responsiv jQuery-innholdsglidebryter bxSlider

Endre størrelsen på nettleservinduet for å se hvordan glidebryteren tilpasser seg. Bxslider kommer med mer enn 50 tilpasningsalternativer og viser frem funksjonene med forskjellige overgangseffekter.

Eksempler | Last ned

jKarusell

jCarousel er en jQuery-plugin som hjelper deg med å organisere visningen av bildene dine. Du kan enkelt lage egendefinerte bildekaruseller fra basen vist i eksempelet. Skyveknappen er adaptiv og optimalisert for arbeid på mobile plattformer.

Eksempler | Last ned

Scrollbox - jQuery-plugin

Scrollbox er en kompakt plugin for å lage en glidebryter - en karusell eller en tekstgjennomgang. Viktige funksjoner inkluderer vertikale og horisontale rulleeffekter med pause ved museover.

Eksempler | Last ned

dbpasKarusell

En enkel karusellglider. Hvis du trenger en rask plugin, er denne 100 % egnet. Leveres med kun de grunnleggende funksjonene som kreves for at glidebryteren skal fungere.

Eksempler | Last ned

Flexisel: Responsive JQuery Slider Plugin - Karusell

Skaperne av Flexisel ble inspirert av den gamle skolens plugin jCarousel, og laget en kopi av den med sikte på riktig bruk av glidebryteren på mobil- og nettbrett.

Flexisels responsive layout, når den kjøres på mobile enheter, er forskjellig fra en layout i nettleservindustørrelse. Flexisel er perfekt tilpasset for å fungere på skjermer, både lav og høy oppløsning.

Eksempler | Last ned

Elastislide – adaptiv skyveknapp – karusell

Elastislide tilpasser seg perfekt til størrelsen på enhetens skjerm. Du kan angi minimum antall bilder som skal vises med en bestemt oppløsning. Fungerer godt som en karusellglidebryter med bildegallerier, ved hjelp av en fast omslag sammen med en vertikal rulleeffekt.

Eksempel | Last ned

FlexSlider 2

Freeware skyveknapp fra Woothemes. Det regnes med rette som en av de beste adaptive glidebryterne. Programtillegget inneholder flere maler og vil være nyttig for både nybegynnere og eksperter.

Eksempel | Last ned

Fantastisk karusell

Fantastisk karusell – responsiv bildeglidebryter ved hjelp av jQuery. Støtter mange innholdsstyringssystemer som WordPress, Drupal og Joomla. Støtter også Android og IOS og stasjonære operativsystemer uten kompatibilitetsproblemer. Innebygde fantastiske karusellmaler lar deg bruke glidebryteren i vertikale, horisontale og sirkulære moduser.

Eksempler | Last ned

En leksjon der vi skal se på formålet med MODX Revo MIGX-tillegget.

La oss se på å jobbe med MIGX ved å bruke et eksempel, hvis resultat vil være muligheten til å legge til bilder til ressurser i en praktisk form. Vi vil vise bilder knyttet til ressursen på siden ved hjelp av en Bootstrap 3-karusell (glidebryter).

Hva er MIGX?

MIGX er en komponent for MODX Revolution som legger til malvariabler (TV-parametere) en ny inngangstype med samme navn (migx) og praktiske verktøy for å jobbe med den. MIGX lar deg lagre en hel tabell med data i én TV-variabel. Dette betyr at med MIGX og ett ekstra felt (TV), kan du knytte et komplekst sett med data til hver ressurs. JSON-formatet brukes til å lagre data i MIGX TV-variabelen.

Navnet MIGX står for M ulti jeg temaer G ridtv (Multi-Element Grid TV) for MOD X.

For å hente komplekse dataelementer fra et ekstra TV-felt med type MIGX, kan du bruke getImageList-snippet. Denne kodebiten kommer med MIGX-pakken.

MIGX installasjon

MIGX-installasjonsprosessen begynner med å åpne "Package Management"-siden i MODX Revolution-administrasjonspanelet (Application -> Installer) og klikke på "Last ned Add-ons"-knappen der. På siden som åpnes, i "Søk"-feltet, skriv inn navnet på pakken (MIGX) og trykk på Enter-tasten. Deretter velger du ønsket tillegg fra resultatene som presenteres og klikker på "Last ned" -knappen. Vi går tilbake til forrige side og fullfører installasjonsprosessen ved å bruke "Installer"-knappen.

Under installasjonsprosessen må du bestemme plasseringen av MIGX-komponenten i hovedadmin-menyen. Valget her er gjort fra 2 alternativer. Det første alternativet (Top Nav) innebærer å plassere en lenke til komponenten som hovedmenyelement, og det andre (Extras/Components) – i «Applikasjoner»-elementet.

Resultat av installasjon av MIGX-tillegget:

MIGX - Lage en Bootstrap Carousel

Som et eksempel, la oss se på å bruke MIGX-komponenten til å lage en Bootstrap-karusell. Før vi går videre til å lage et element, la oss bestemme listen over hovedfelt som er nødvendige for å danne hvert karuselllysbilde.

• Denne listen vil bestå av følgende felt:
• tittel - tittel (tittel) på lysbildet (bilde);
• bilde – bilde;

Oppretting av et MIGX-element som består av feltene ovenfor, utføres på "MIGX"-fanen på "MIGX Management"-siden. MIGX Management-siden åpnes fra MIGX-elementet i lederens hovedmeny eller fra rullegardinlisten Applications, avhengig av hvordan plasseringen er konfigurert.

Opprette et nytt MIGX-element

Prosessen med å utvikle et nytt MIGX-element utføres ved å bruke knappen "Legg til element". Etter å ha klikket på denne knappen, åpnes et modalt vindu "MIGX", som består av mange faner. For de fleste oppgaver er det nok å bruke kun de tre første: Innstillinger (Grunnleggende parametere), Formtabs (fane for å lage en struktur) og Kolonner (fane for å utvikle en tabell som sluttbrukeren skal administrere dataene med).

På fanen "Innstillinger" skriver du inn navnet på elementet (for eksempel bilder) og påskriften som skal erstatte teksten "Legg til element".

På "Formtabs"-fanen opprettes felt. Med andre ord definerer den strukturen som sluttbrukere skal bruke for å legge inn dataene sine. For å legge til felt til MIGX, må du klikke på "Legg til element"-knappen og i dialogboksen som åpnes, skriv inn navnet på settet (Caption) og fyll ut felttabellen.

Innføring av poster i MODX Revolution MIGX-tabellen gjøres ved å bruke knappen som ligger rett etter "Felter"-overskriften.

La oss legge til følgende 3 poster i felttabellen:

• Feltnavn – tittel, bildetekst – tittel, beskrivelse – beskrivelse av bildet.
• Feltnavn – bilde, Bildetekst – Bilde, Input TV Type – bilde.
• Feltnavn – beskrivelse, Bildetekst – Beskrivelse.

Det siste trinnet er å legge inn data i fanen "Kolonner". Denne kategorien definerer navnet på tabellkolonnene (utseende), ved hjelp av hvilke brukeren ser og legger inn data i den tilsvarende ekstra MIGX TV-variabelen til ressursen (i dette tilfellet TV-variabelen definert av bilder MIGX-elementet).

La oss legge inn følgende informasjon i kolonner-tabellen:

• Overskrift – tittel, felt (feltnavn) – tittel, kolonnebredde (kolonnebredde) – 100.
• Header – Bildefil, Felt – bilde, Renderer – this.renderImage.
• Overskrift – Beskrivelse, Felt – beskrivelse, Kolonnebredde – 200.

Å legge til poster i tabellen gjøres ved å bruke knappen "Legg til element".

Opprette et MIGX TV-felt med bildekonfigurasjon

Etter å ha opprettet MIGX element (konfigurasjon) bilder, vil vi fortsette med å lage et ekstra felt (TV) med MIGX input type og bilde konfigurasjon.

Oppretting av et ekstra felt i administrasjonspanelet gjøres i venstre panel i "Elementer"-fanen. For å gjøre dette, overfor påskriften "Tilleggsfelt", klikk på plusstegnet og skriv inn følgende data på siden som åpnes:

• På fanen "Generell informasjon", i "Navn"-feltet, er verdien bilder (navnet på tilleggsfeltet);
• På «Input Options»-fanen, i «Input Type»-rullegardinlisten, velg migx, og skriv inn verdibildene i «Configuration»-feltet.
• På "Tilgjengelig for maler"-fanen velger du de malene som (eller rettere sagt, for ressurser som har disse malene installert) dette feltet vil være tilgjengelig for.

Legge inn data i feltet TV MIGX-bilder

La oss åpne en hvilken som helst ressurs som har MIGX TV-bildefeltet tilgjengelig og legge inn for eksempel følgende data i det:

Sender TV MIGX-feltdata til siden

Vi vil vise data på siden ved å bruke getImageList-kodebiten, som følger med MIGX-tillegget.

Start av implementering. For å gjøre dette, åpne malen som er installert for denne ressursen og sett inn følgende kode på ønsket sted:

[[*longtitle:empty=`[[*sidetittel]]`]]

Koden ovenfor består av HTML-oppmerking og 2 kall til getImageList-kodebiten. Den første viser karusellindikatorer, og den andre viser lysbilder som inneholder bilder. Disse kodebitene har 2 parametere. Parameteren tvname er ment å spesifisere navnet på TV-variabelen med MIGX-data som må vises på siden. Og tpl-parameteren er definert for å spesifisere en mal (chunk) som hver linje med data fra MIGX TV-bildefeltet vil bli generert med.

Innhold i tplCarouselIndicator-delen:

Innhold i tplCarouselItem-delen:

Resultat av å vise karusellen på siden:

Vi har allerede laget vår første nettside på MODx, men jeg vil fortsette serien med MODx leksjoner. Jeg beklager den lille forsinkelsen, jeg lovet at jeg skulle legge ut innholdet i filene som ble korrigert i løpet av leksjonsserien, jeg vil gjøre dette i løpet av de neste 2-3 dagene.

I dagens leksjon vil vi snakke om et interessant verktøy for nettstedet, nemlig en bannerglidebryter, nøyaktig den samme er på min hovedside på nettstedet. La oss se på eksemplet med nettstedet mitt.

Opprette en MODx Evo-glidebryter

Det første vi må gjøre er å lage en ny del, la oss kalle den for eksempel ( (SLIDER)), med beskrivelsen "Slider for hovedsiden" og følgende innhold:

Du kan bruke en glidebryter fra en hvilken som helst annen mal, opprettelsen vil ikke være annerledes. Som du kan se, er HTML-koden til glidebryteren en vanlig unummerert liste.

Det gjenstår å legge til skyvevisningsstiler, ellers vil glidebryteren vår på nettstedet vises som en vanlig liste:

Kopier stilene i malen min. skyvestilene ble plassert i en egen fil featured-slider.css. Du må kopiere den til malmappen med stiler og legge til følgende kode i hovedstilene (layout.css-filen):

@import url("featured_slide.css");

Vel, for at glidebryteren vår skal bli dynamisk, må vi koble til jQuery-bibliotekene som er ansvarlige for driften. Åpne hovedsidemalen og finn disse skriptene:

Alt er klart, åpne hovedsidemalen og skriv anropet til den opprettede delen ((SLIDER)) på stedet vi trenger, lagre og oppdater hovedsiden vår. Skyveknappen din skal fungere - bare ikke glem å spesifisere banene for skyvebannerne i delen.

Jeg begrenset meg til denne avgjørelsen, siden jeg ikke trenger å endre bildene på glidebryteren ofte, jeg tenkte til og med på å erstatte den med et annet design, men jeg har ikke funnet ut hva ennå. Men hva med for eksempel eiere av nettbutikker hvis bannere endres nesten hver uke? Ikke bekymre deg, det er ikke så ille!

Det var med god grunn at jeg gjorde oppmerksom på bannerkoden og nevnte at dette kun er en unummerert liste, noe som betyr at vi kan erstatte denne listen med et kall til Ditto-snuttet og sende en mal for listen vår for den.

Implementering av MODx Evo-glidebryteren ved å bruke Ditto-kodebiten

La oss se på det steg for steg:

I parameteren foreldres snippet spesifiserer vi containerressursidentifikatoren for bannerne våre.

Nå, for å teste, opprette flere underordnede ressurser, tilordne bannermalen vår til ressursene og tilordne TV - BannerImg-parameteren til hver mal, ikke glem å fylle ut ressursfeltene - Tittel, detaljert tittel.

Dette avslutter leksjonen vår, hvis noe ikke fungerte for deg, legg igjen kommentarer, jeg vil prøve å hjelpe. På denne enkle måten kan du ta hvilken som helst mal og kutte ut skyvekoden, stilene og skriptene fra den for å implementere en skyveknapp på MODx Evo.