Share
I den här handledningen kommer vi att använda jQuery UI-reglaget för att skapa en attraktiv och funktionell innehållsreglage. Vi har en behållare, som har en serie element som var och en innehåller olika innehållsblanketter. Det kommer att finnas för många av dessa element att visa på en gång, så vi kan använda reglaget för att flytta de olika innehållsblocken in och ut ur sikte.
jQuery UI är det officiella biblioteket med widgets och verktyg som bygger på jQuery; Det är väldigt lätt att använda, mycket konfigurerbart och robust och extremt lätt att temat. För att följa handledningen behöver du en kopia av den senaste versionen av biblioteket. Den kan laddas ner med hjälp av jQuery UI-nedladdningsbyggaren på http://jqueryui.com/download. Även om vi kan välja någon av de tillgängliga teman rekommenderar vi att du använder standardtemat för jämnhet. jQuery UI innehåller en kopia av den nuvarande versionen av jQuery, så vi behöver inte ladda ner det här separat.
Skapa en ny mapp någonstans användbar och kalla den glider. Inom denna mapp skapar du två nya mappar; en som heter jqueryui och en kallad bilder. Packa ner bibliotekets nedladdade arkiv till mappen jqueryui; i Utforskaren eller Finder borde du sluta med följande mappstruktur:
Låt oss börja på grundsidan och underliggande HTML först; i din textredigerare skapa följande sida:
jQuery UI Slider Några välkända galaktiska nebulae och deras vitala statistik
Omega Nebula
- Avstånd från jorden:
- 5000 - 6000 lightyears
- Diameter:
- 15 Lightyears
- Massa:
- 800 solmassor
- Katalognummer:
- M17 / NGC6618
- Upptäckt i:
- 1764
- Upptäckare:
- Philippe Loys de Chéseaux
Spara detta som slider.html i reglaget. I sidans huvud länkas vi till jQuery UI-stilarket, som innehåller alla de CSS som krävs för var och en av bibliotekets komponenter. Det kan tyckas vara ett slöseri; på vissa sätt är det som vi bara använder en enda komponent, men använder ett 26KB stilark. Men med hjälp av ett verktyg som YUICompressor kan vi lätt krympa det här, och med GZipping kan vi också få ner det ännu längre. Vi länkar också till vårt eget anpassade stilark, som vi kommer att skapa senare.
Vi har inte lagt till någon styling än, men som referens visas följande skärmdump för standardglidreglaget:
På den sida vi har har vi markeringen för innehållet och reglaget. Vi har ett yttre behållarelement som vi fått klassnamnet ui-corner-all. Detta är en av de klasser som riktas mot jQuery UI-stilarket och kommer att ge vår behållare (och de andra elementen vi ger den till) fina avrundade hörn. Det använder CSS3 för att uppnå detta, så inte alla webbläsare stöds, men Firefox, Safari eller Chrome-användare kommer att se dem.
Inne i behållaren har vi ett rubrikelement som beskriver innehållet, följt av ett annat behållarelement (som också har rundade hörn i stödjande webbläsare); När vi kommer att lägga till CSS kommer det här elementet att få en överskridande regel av dolda som kommer att gömma de flesta enskilda innehållsblock och tillåta oss att skjuta dem i bild med hjälp av reglaget. Detta element kommer att fungera som betraktare.
Inom betraktaren har vi ett slutligt behållarelement; Anledningen till detta är för prestanda - när vi justerar den vänstra CSS-egenskapen med jQuery, väljer vi bara och manipulerar ett element i stället för hur många innehållsblock det finns. Vi använder ett annat klassnamn från UI-biblioteket på detta element - Ui-Helper-Clearfix-klassen, som automatiskt rensar flytande element inom vilket element det tillämpas på.
Följande är ett exempel på ett innehållsblock; Jag har bara visat en av dem i kodexemplet ovan för att visa mer skulle vara onödig upprepning. I källfilen finns det sju av dem, men du kan lägga så många in som du vill och skjutreglaget fungerar fortfarande som det ska. Varje innehållsblok innehåller en rubrik, en bild och en definitionslista, som semantiskt är förmodligen det bästa valet för detta exempel, men inte nödvändigtvis nödvändigt i andra implementeringar. Innehållsblocken kan ha ganska mycket vad de behöver, förutsatt att varje behållare är av fast storlek. Du kommer att se varför det här är viktigt, vi kommer att lägga till JavaScript lite senare.
Efter tittarelementet kommer en tom behållare som kommer att omvandlas till skjutreglaget när vi anropar UI-biblioteket. Detta är allt underliggande HTML som vi behöver. Efter detta länkar vi till jQuery och till jQuery UI-källfilerna. Återigen innehåller den här filen alla JavaScript som behövs för att köra hela UI-biblioteket, vilket för denna handledning är mer än vad vi behöver. Det finns enskilda filer för kärnan och varje komponent separat som kan skära ner bibliotekets fotavtryck. Både jQuery och jQuery UI JS-filerna är redan minifierade.
I själva verket behöver vi inte oroa oss för att stilen av skjutreglage widgeten alls; det tema som vi hämtade med biblioteket kommer att göra det för oss. Den CSS vi ska lägga till är ganska mycket rent godtycklig för syftet med denna handledning, att städa upp saker och ge det ett grundläggande minimalt utseende. Så länge det enskilda innehållet blockeras (givet ett klassnamn på objektet) ges en fast bredd och floats åt vänster inom transportörelementet och förutsatt att betraktaren har sitt överflöde inställt på att döljas ska allt fungera som förväntat.
Lägg till följande kod i en ny fil i din textredigerare:
h2 text-align: center; typsnitt: normal 150% Georgia; #sliderContent width: 650px; marginal: auto; vaddering: 0 50px 50px; bakgrundsfärg: #ebebeb; gräns: 1px fast # 898989; .viewer width: 607px; höjd: 343px; marginal: 0 auto 40px; padding: 1px; overflow: hidden; positioner: relativ; gräns: 1px fast # 898989; .Transportör bredd: 610px; höjd: 335px; positioner: relativ; .item bredd: 304px; flyta till vänster; font-family: Tahoma; text-align: center; bakgrundsfärg: #ebebeb; .item h2 font-size: 100%; marginal: 10px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; bredd: 149px; text-align: right; marginal: 0; font-size: 70%; .item dt font-weight: bold; margin-höger: 5px; .item dd text-align: left; .item img border: 1px solid # 898989; bakgrundsfärg: #FFFFFF; padding: 1px;
Spara detta som slider.css i skjutreglaget. Vår sida ska nu se ut så här:
Allt vi behöver göra nu är att lägga till JavaScript som kommer att initiera reglaget och styra våra innehållsblock. Direkt efter att skriptelementet som länkar till jQuery-gränssnittet i slider.html lägg till följande kod:
Det är ett mycket kort, enkelt kodstycke, med mycket lite på gång; låt oss ta en titt på det linje för rad; Inom document.ready short-cut installerade vi först några variabler så att vi kan cache elementen från sidan som vi kommer att manipulera av prestationsskäl. Detta gör att vår kod körs snabbare eftersom vi bara korsar DOM och väljer varje element en gång.
Vi väljer först transportörelementet genom att rikta sitt klassnamn; för att använda en klassväljare är ineffektiv ger vi väljaren ett sammanhang av sliderContent-elementet. Kontexten tillhandahålls med hjälp av en idväljare, så hela DOM behöver inte kryssas. Vi väljer också samlingen av innehållsblock på samma sätt.
När vi har cachat våra väljare kan vi ange längden på transportörelementet; i CSS ställdes det till bredden på två av innehållsblocken, men för att den skulle fungera korrekt måste innehållsrutorna flyta ihop med varandra, så transportören behöver vara tillräckligt bred för att rymma dem alla.
Så att vi inte begränsar hur många innehållsblock som kan sättas in i widgeten kodar vi inte en uppsättning bredd i den; i stället får vi antalet innehållsblock och multiplicerar detta med bredden på varje block. Därför är det viktigt att ställa en fast bredd på blocken. Vi måste använda JavaScripts parseInt-funktion när vi hämtar bredden på blocken eftersom jQuery css-metoden returnerar ett strängvärde i getter-läge.
Därefter skapar vi ett bokstavligt konfigurationsobjekt som kommer att överföras till jQuery UI-reglaget och brukade ställa in några egenskaper för skjutreglaget. Vårt konfigurationsobjekt har två egenskaper, max och bild. Max egenskapens värde är ett heltal som representerar bredden på transportörelementet minus betraktarens bredd. Detta är det maximala värdet som skjutreglaget kan nå.
Värdet på bildegenskapen är en anonym funktion som automatiskt får två argument. det ursprungliga händelseobjektet och ett förberedt objekt som innehåller användbara egenskaper som är relaterade till widgeten. Vi använder inte det första argumentet som vi definierar som e, men vi måste inkludera det för att få tillgång till det andra argumentet, som vi betecknar ui.
Slidehändelsen är en anpassad händelse som exponeras av skjutreglaget API, och den funktion som vi ställer in som dess värde kommer att kallas varje gång en glidinteraktion inträffar. När händelsen är avfyrade, manipulerar vi enkelt transportbandets vänstra stilegenskaper negativt med samma mängd som skjutreglaget flyttas. Vi kan få det värde som skjutreglaget flyttas till med att använda värdetegenskapen för ui-objektet.
Vi ställer gränsvärdet för skjutreglaget till längden på transportörelementet, i det här exemplet blir det 2128px, så det maximala värdet är 2128. Det här är inte i pixlar, som du ser på nästa skärmdump, den glider själv är runt 650px i längd. Men om vi flytta skjutreglaget till ungefär halvvägs längs spåret kommer det angivna värdet i ui-objektet att vara runt 1064, så vi flyttar den vänstra kanten av transportören så många pixlar åt vänster eller höger.
Vi behöver inte oroa oss för att upptäcka vilken riktning skjutreglaget flyttades in i; Om skjutreglaget redan har flyttats till höger, kommer den vänstra CSS-egenskapen om transportören redan har ett negativt värde. När vi minus ett negativt tal från ett negativt tal är resultatet givetvis ett positivt tal så transportören kommer att röra sig tillbaka som det borde. Den färdiga sidan ska nu visas med skjutreglaget:
Du bör upptäcka att det fungerar som förväntat och de olika blocken av innehåll kan flyttas in och ur synvinkel med hjälp av reglaget. Förutom standard drag interaktion, som också är inbyggd i reglaget är det användbara tillägget av en klick interaktion; Om du klickar någonstans på banan flyttas handtaget automatiskt till den positionen och funktionen för återuppringning av bildskärmen exekveras.
I den här handledningen har vi tittat på hur den underliggande HTML som används för skjutreglaget (en enkel tom behållare), standard styling som tillämpas av biblioteket och hur det kan konfigureras och initialiseras med vår kod.
Glidreglaget är ett utmärkt tillägg till alla gränssnitt; det är lätt för oss att sätta upp och enkelt för våra besökare att använda, det är taktilt och interaktivt och kan användas i en mängd olika situationer från att flytta innehållet som i det här exemplet eller som en volymkontroll på en streamingwebapp.
Accentsconagua