Share
I denne opplæringen skal vi bruke jQuery UI slider widget for å lage en attraktiv og funksjonell innhold glidebryter. Vi har en container, som har en rekke elementer som hver inneholder forskjellige innholdsblokker. Det blir for mange av disse elementene å vise samtidig, så vi kan bruke glidebryteren til å flytte de forskjellige innholdsblokkene inn og ut av visningen.
jQuery UI er det offisielle biblioteket med widgets og verktøy bygget på toppen av jQuery; det er veldig enkelt å bruke, svært konfigurerbart og robust, og ekstremt lett å tema. For å følge opplæringen trenger du en kopi av den nyeste versjonen av biblioteket; den kan lastes ned ved hjelp av jQuery UI nedlastningsbyggeren på http://jqueryui.com/download. Selv om vi kan velge noen av temaene som er tilgjengelige, vil jeg anbefale å bruke standardtema for glatthet. jQuery brukergrensesnitt inneholder en kopi av gjeldende versjon av jQuery, slik at vi ikke trenger å laste ned dette separat.
Opprett en ny mappe et sted hendig og kaller det glidebryteren. I denne mappen opprett du to nye mapper; en som heter jqueryui og en kalt bilder. Pak det nedlastede arkivet til biblioteket til jqueryui-mappen; i Explorer eller Finder, bør du ende opp med følgende mappestruktur:
La oss starte på grunnsiden og underliggende HTML først; i din tekstredigerer opprett følgende side:
jQuery UI Slider Noen kjente galaktiske nebulae og deres vitale statistikk
Omega Nebula
- Avstand fra jorden:
- 5000 - 6000 lightyears
- Diameter:
- 15 Lightyears
- Masse:
- 800 solmasser
- Katalognummer:
- M17 / NGC6618
- Oppdaget i:
- 1764
- Discoverer:
- Philippe Loys de Chéseaux
Lagre dette som slider.html i skyvemappen. I hodet på siden kobler vi til stilarket for jQuery UI, som inneholder alt CSS som kreves for hver av bibliotekets komponenter. Det kan virke som en sløsing; På noen måter er det som vi bare bruker en enkelt komponent, men bruker et 26KB stilark. Men ved hjelp av et verktøy som YUICompressor, kan vi enkelt krympe dette, og med GZipping også kan vi få det ned enda lenger. Vi kobler også til vårt eget tilpassede stilark, som vi lager senere.
Vi har ikke lagt til noen styling ennå, men som referanse viser følgende skjermbilde standard glidebredds widget:
På siden er alt som vi har, markeringen for innholdet og glidebryteren; Vi har et ytre beholderelement som vi har gitt klassenavnet ui-corner-all. Dette er en av klassene som er målrettet mot jQuery UI-stilarket og vil gi vår beholder (og de andre elementene vi gir den til) fine avrundede hjørner. Det bruker CSS3 for å oppnå dette, slik at ikke alle nettlesere støttes, men Firefox, Safari eller Chrome-brukere vil se dem.
Innenfor containeren har vi et overskriftselement som beskriver innholdet, etterfulgt av et annet beholderelement (som også har avrundede hjørner i støttende nettlesere); Når vi kommer til å legge til CSS, vil dette elementet bli gitt en overfylt regel av skjult som vil gjemme de fleste av de enkelte innholdsblokkene og la oss få glide dem inn i visningen ved å bruke glidebryteren. Dette elementet vil fungere som seeren.
Innenfor betrakteren har vi et siste beholderelement; Årsaken til dette er for ytelse - når vi justerer den venstre CSS-egenskapen med jQuery, velger vi bare og manipulerer ett element i stedet for hvor mange innholdsblokker det er. Vi bruker et annet klassenavn fra UI-biblioteket på dette elementet - ui-helper-clearfix-klassen, som automatisk fjerner flytende elementer innenfor hvilket element det brukes til.
Følgende er et eksempel på en innholdsblokk; Jeg har bare vist en av dem i kodeeksemplet ovenfor fordi å vise mer ville være unødvendig gjentakelse. I kildefilen er det sju av dem, men du kan sette så mange inn som du vil, og skyvekontrollen vil fortsatt fungere som den skal. Hver innholdsblokk inneholder en overskrift, et bilde og en definisjonsliste, som semantisk er trolig det beste valget for dette eksempelet, men ikke nødvendigvis nødvendig i andre implementeringer. Innholdsblokkene kan fungere stort sett uansett hva de trenger, forutsatt at hver container har en fast størrelse; Du vil se hvorfor dette er viktig, vi kommer til å legge til JavaScript litt senere.
Etter at seerelementet kommer en tom beholder som blir forvandlet til skyvegrensesnittet når vi påkaller UI-biblioteket. Dette er all underliggende HTML som vi trenger. Etter dette kobler vi til jQuery og til jQuery UI kildefiler; igjen, inneholder denne filen alt JavaScript som trengs for å kjøre hele brukergrensesnittet, som for denne opplæringen er mer enn vi trenger. Det er individuelle filer for kjernen og hver komponent separat som kan kutte ned fotsporet på biblioteket. Både jQuery og jQuery UI JS-filene er allerede minifisert.
I sannhet trenger vi ikke å bekymre oss for å stylere skyveknappens widget i det hele tatt; temaet som vi lastet ned med biblioteket, vil gjøre det for oss. CSS vi skal legge til er ganske mye rent vilkårlig for formålet med denne opplæringen, å rydde opp ting og gi det et grunnleggende minimalt utseende. Så lenge det individuelle innholdet blokkerer (gitt et klassenavn til objektet), får en fast bredde og blir drevet til venstre innenfor transportbåndet, og forutsatt at seeren har sin overløp satt til skjult, skal alt virke som forventet.
I en ny fil i teksteditoren legger du til følgende kode:
h2 text-align: center; font: normal 150% Georgia; #sliderContent width: 650px; margin: auto; polstring: 0 50px 50px; background-color: #ebebeb; border: 1px solid # 898989; .viewer width: 607px; høyde: 343px; margin: 0 auto 40px; padding: 1 px; flow: hidden; stilling: i forhold; border: 1px solid # 898989; .Transportbånd bredde: 610px; høyde: 335px; stilling: i forhold; .item bredde: 304px; float: venstre; font-family: Tahoma; tekst-Justering: center; background-color: #ebebeb; .item h2 font-size: 100%; margin: 10px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; bredde: 149px; tekst-Justering: høyre; margin: 0; font-size: 70%; .item dt font-weight: bold; margin-right: 5px; .item dd text-align: left; .item img border: 1px solid # 898989; background-color: # ffffff; padding: 1 px;
Lagre dette som slider.css i skyvemappen. Vår side skal nå se slik ut:
Alt vi trenger å gjøre nå, er å legge til JavaScript som vil initialisere skyvekontrollen og kontrollere våre innholdsblokker. Rett etter at skriptelementet som kobler til jQuery-brukergrensesnittet i slider.html, legg til følgende kode:
Det er en veldig kort, enkel kodebit, med svært lite skjer; la oss ta en titt på det linje for linje; Innenfor dokumentet.avkortet klipper vi først opp noen få variabler, slik at vi kan cache elementene fra siden som vi vil manipulere av ytelsesårsaker; Dette gjør at koden vår går raskere fordi vi bare krysser DOM og velger hvert element en gang.
Vi velger først transportbåndet ved å målrette mot klassenavnet; Fordi bruk av en klasseväljare er ineffektiv, gir vi selgeren en kontekst av sliderContent-elementet. Konteksten er gitt ved hjelp av en idvelger, så hele DOM trenger ikke å bli krysset. Vi velger også samlingen av innholdsblokker på samme måte.
Når vi har cachet våre selektorer, kan vi sette lengden på transportørelementet; i CSS ble det satt til bredden på to av innholdsblokkene, men for at den skulle fungere riktig, må innholdsrommene flyte sammen hverandre, så transportøren må være bred nok til å imøtekomme dem alle.
Slik at vi ikke begrenser hvor mange innholdsblokker som kan settes inn i widgeten, kodes det ikke hardt inn en bredde i den; I stedet får vi antall innholdsblokker, og multipliserer dette ved bredden av hver blokk. Derfor er det viktig å sette en fast bredde på blokkene. Vi må bruke JavaScript's parseInt-funksjon når vi henter bredden på blokkene fordi jQuery css-metoden returnerer en strengverdi i getter-modus.
Deretter oppretter vi et bokstavelig konfigurasjonsobjekt som vil bli sendt inn i jQuery UI-skyve-metoden og brukes til å angi noen egenskaper av skyve-widgeten. Vårt konfigurasjonsobjekt har to egenskaper, maks og lysbilde. Den maksimale egenskapens verdi er et heltall som representerer bredden på transportørelementet minus bredden av betrakteren. Dette vil være den maksimale verdien som skyvehåndtaket kan nå.
Verdien av lysbildegenskapen er en anonym funksjon som automatisk mottar to argumenter; det opprinnelige hendelsesobjektet og et forberedt objekt som inneholder nyttige egenskaper knyttet til widgeten. Vi bruker ikke det første argumentet som vi definerer som e, men vi må inkludere det for å få tilgang til det andre argumentet, som vi betegner ui.
Lysbildehendelsen er en tilpasset hendelse utsatt av skyve-API, og funksjonen vi angir som dens verdi, vil bli kalt hver gang et lysbildeinteraksjon oppstår. Når hendelsen blir avfyrt, manipulerer vi bare den venstre stilegenskapen til transportbåndet vårt negativt med samme beløp som skyvekontrollen flyttes. Vi kan få verdien som skyvekontrollen er flyttet til, ved å bruke verdien av egenskapen til ui-objektet.
Vi setter glidebryterens maksimale verdi til lengden på transportørelementet, i dette eksempelet blir det 2128px, så maksimalverdien er 2128. Dette er ikke i piksler, som du vil se i neste skjermbilde, den skyvekontrollen selv er rundt 650px i lengde. Men hvis vi beveger skyveknappen til omtrent halvveis langs sporet, vil verdien som rapporteres i ui-objektet være rundt 1064, slik at vi beveger den venstre kanten av transportbåndet så mange piksler til venstre eller høyre.
Vi trenger ikke å bekymre oss for å oppdage hvilken retning skyvekontrollen ble flyttet inn; Hvis skyvehåndtaket allerede er flyttet til høyre, vil venstre CSS-egenskap hvis transportøren allerede har en negativ verdi. Når vi minus et negativt tall fra et negativt tall, er utfallet selvsagt et positivt tall, slik at transportøren vil bevege seg tilbake som det skal. Den ferdige siden skal nå vises med glidebryteren:
Du bør oppdage at det fungerer som forventet, og de ulike blokkene av innhold kan flyttes inn og ut av visningen ved hjelp av skyveutvidelsen. I tillegg til standarddreaksinteraksjonen, som også er innebygd i glidebryteren, er det nyttige tillegget til et klikkinteraksjon; Hvis du klikker hvor som helst på sporet, blir håndtaket automatisk flyttet til den posisjonen og funksjonen for tilbakestilling av lysbilde blir utført.
I denne opplæringen har vi sett på hvordan den underliggende HTML som brukes til skyveknappen (en enkel tom beholder), standard styling brukt av biblioteket, og hvordan den kan konfigureres og initialiseres med vår kode.
Skyvekontrollen er et flott tillegg til ethvert grensesnitt; det er enkelt for oss å sette opp og enkelt for våre besøkende å bruke, det er taktilt og interaktivt og kan brukes i en rekke situasjoner fra å flytte innhold rundt som i dette eksempelet, eller som en volumkontroll på en streaming web app.
Accentsconagua