Share
In deze zelfstudie gebruiken we de schuifregelaar voor jQuery-gebruikersinterface om een aantrekkelijke en functionele inhoudschuifregelaar te maken. We hebben een container met een reeks elementen die elk verschillende inhoudblokken bevatten. Er zullen te veel van deze elementen tegelijk worden weergegeven, dus we kunnen de schuifregelaar gebruiken om de verschillende inhoudsblokken in en uit beeld te verplaatsen.
jQuery UI is de officiële bibliotheek met widgets en hulpprogramma's die bovenop jQuery zijn gebouwd; het is heel gemakkelijk te gebruiken, zeer configureerbaar en robuust, en uiterst eenvoudig te bewerken. Om de tutorial te volgen, heb je een kopie van de nieuwste versie van de bibliotheek nodig; het kan worden gedownload met de jQuery UI-downloadbuilder op http://jqueryui.com/download. Hoewel we een van de beschikbare thema's kunnen kiezen, raad ik aan het standaardthema voor vloeiendheid te gebruiken. jQuery UI bevat een kopie van de huidige versie van jQuery, dus we hoeven dit niet apart te downloaden.
Maak een nieuwe map ergens handig en noem het slider. Maak binnen deze map twee nieuwe mappen; één genaamd jqueryui en één genaamd afbeeldingen. Pak het gedownloade archief van de bibliotheek uit in de jqueryui-map; in Verkenner of Finder zou je de volgende mappenstructuur moeten hebben:
Laten we eerst een begin maken met de basispagina en de onderliggende HTML; in uw teksteditor maakt u de volgende pagina:
jQuery UI-schuifregelaar Sommige bekende galactische nevels en hun vitale statistieken
Omega-nevel
- Afstand vanaf de aarde:
- 5000 - 6000 lichtjaren
- Diameter:
- 15 lichtjaren
- Massa:
- 800 zonnemassa's
- Catalogus nummer:
- M17 / NGC6618
- Ontdekt in:
- 1764
- Ontdekker:
- Philippe Loys de Chéseaux
Sla dit op als slider.html in de schuifregelaarmap. In de kop van de pagina linken we naar het jQuery UI-stylesheet, dat alle CSS bevat die vereist is voor elk van de bibliotheekcomponenten. Het lijkt misschien een verspilling; in sommige opzichten is dit omdat we slechts één component gebruiken, maar een 26KB stylesheet gebruiken. Met behulp van een tool zoals YUICompressor kunnen we dit echter gemakkelijk verkleinen, en met GZipping kunnen we het ook nog verder reduceren. We linken ook naar onze eigen aangepaste stylesheet, die we later zullen maken.
We hebben nog geen styling toegevoegd maar ter referentie laat de volgende screenshot de standaard schuifregelaar-widget zien:
Op de pagina hebben we alleen de mark-up voor de inhoud en de schuifregelaar; we hebben een buitenste containerelement dat we de klassenaam ui-corner-all hebben gegeven. Dit is een van de klassen waarop het jQuery UI-stijlblad is gericht en geeft onze container (en de andere elementen die we eraan geven) mooie afgeronde hoeken. Het gebruikt CSS3 om dit te bereiken, dus niet alle browsers worden ondersteund, maar Firefox-, Safari- of Chrome-gebruikers zullen ze zien.
Binnen de container hebben we een headingelement dat de inhoud beschrijft, gevolgd door een ander containerelement (dat ook afgeronde hoeken heeft in ondersteunende browsers); wanneer we de CSS gaan toevoegen, krijgt dit element een overloopregel van verborgen die de meeste afzonderlijke inhoudsblokken zal verbergen en ons in staat zal stellen ze met de schuifregelaar in beeld te schuiven. Dit element functioneert als de kijker.
Binnen de kijker hebben we een laatste containerelement; de reden hiervoor is voor de prestaties - wanneer we de linkse CSS-eigenschap aanpassen met jQuery, zullen we slechts één element selecteren en manipuleren in plaats van de vele inhoudsblokken die er zijn. We gebruiken een andere klassenaam uit de UI-bibliotheek op dit element - de ui-helper-clearfix-klasse, die automatisch zwevende elementen wist binnen welk element dan ook toegepast op.
Hierna volgt een voorbeeld van een inhoudsblok; Ik heb er slechts één van getoond in het codevoorbeeld hierboven omdat meer tonen onnodige herhalingen zou zijn. In het bronbestand zijn er zeven, maar je kunt er zoveel in doen als je wilt en de slider functioneert nog steeds zoals het hoort. Elk inhoudsblok bevat een kop, een afbeelding en een definitielijst, wat semantisch waarschijnlijk de beste keuze is voor dit voorbeeld, maar niet noodzakelijkerwijs vereist in andere implementaties. De inhoudsblokken kunnen vrijwel alles bevatten wat ze nodig hebben, op voorwaarde dat elke container een vaste grootte heeft; je zult zien waarom dit belangrijk is, we komen het JavaScript iets later toevoegen.
Nadat het viewer-element een lege container heeft gekregen die zal worden getransformeerd in de schuifregelaar-widget zodra we de UI-bibliotheek aanroepen. Dit is allemaal onderliggende HTML die we nodig hebben. Hierna linken we naar jQuery en naar de jQuery UI-bronbestanden; nogmaals, dit bestand bevat al het JavaScript dat nodig is om de hele UI-bibliotheek te gebruiken, wat voor deze tutorial meer is dan we nodig hebben. Er zijn individuele bestanden voor de kern en elke component afzonderlijk die de footprint van de bibliotheek kunnen verminderen. Zowel de JS-bestanden jQuery en jQuery UI zijn al verkleind.
In werkelijkheid hoeven we ons geen zorgen te maken over het stylen van de slider widget zelf; het thema dat we met de bibliotheek hebben gedownload, zal dat voor ons doen. De CSS die we gaan toevoegen, is vrijwel puur willekeurig in het kader van deze tutorial, om dingen op te ruimen en er een minimale minimale uitstraling aan te geven. Zolang de individuele inhoudsblokken (gegeven een klassenaam van item) een vaste breedte krijgen en naar links worden verplaatst binnen het transportbandelement, en op voorwaarde dat de viewer zijn overloop heeft ingesteld op verborgen, zou alles moeten werken zoals verwacht.
Voeg in een nieuw bestand in je teksteditor de volgende code toe:
h2 text-align: center; lettertype: normaal 150% Georgia; #sliderContent width: 650px; margin: auto; opvulling: 0 50px 50px; background-color: #ebebeb; rand: 1px vast # 898989; .viewer width: 607px; Hoogte: 343px; marge: 0 auto 40px; padding: 1px; overloop verborgen; position: relative; rand: 1px vast # 898989; .inhoud-transportband width: 610px; Hoogte: 335px; position: relative; .item width: 304px; float: left; font-family: Tahoma; text-align: center; background-color: #ebebeb; .item h2 font-size: 100%; marge: 10 px 0; .item dl margin: 10px 0; .item dt, .item dd float: left; width: 149px; text-align: right; 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: 1px;
Sla dit op als slider.css in de schuifregelaarmap. Onze pagina zou er nu als volgt uit moeten zien:
Het enige wat we nu moeten doen is het JavaScript toevoegen dat de schuifregelaar initialiseert en onze inhoudsblokken controleert. Direct na het koppelen van het scriptelement aan jQuery UI in slider.html voeg je de volgende code toe:
Het is een zeer kort, eenvoudig codefragment, met heel weinig aan de hand; laten we het regel voor regel bekijken; Binnen de snelkoppeling document.ready zetten we eerst enkele variabelen op zodat we de elementen van de pagina die we om redenen van prestatie zullen manipuleren kunnen cachen; hierdoor loopt onze code sneller omdat we alleen de DOM doorlopen en elk element één keer selecteren.
We selecteren eerst het transportbandelement door zijn klassennaam te targeten; omdat het gebruik van een categorieselector inefficiënt is, geven we de selector een context van het element sliderContent. De context wordt geleverd met behulp van een ID-selector, dus de hele DOM hoeft niet te worden doorlopen. We selecteren ook de verzameling inhoudsblokken op dezelfde manier.
Zodra we onze selectors in het cachegeheugen hebben geplaatst, kunnen we de lengte van het transportbandelement instellen; in de CSS was het ingesteld op de breedte van twee van de inhoudsblokken, maar om goed te kunnen functioneren, moeten de inhoudsvakken naast elkaar zweven, dus moet de lopende band breed genoeg zijn om ze allemaal te kunnen plaatsen.
Zodat we niet beperken hoeveel inhoudsblokken in de widget kunnen worden gestopt, we niet een vaste breedte hierin coderen; in plaats daarvan krijgen we het aantal inhoudsblokken en vermenigvuldigen dit met de breedte van elk blok. Dit is waarom het belangrijk is om een vaste breedte op de blokken in te stellen. We moeten de parseInt-functie van JavaScript gebruiken als we de breedte van de blokken ophalen, omdat de jCuery-methode css een tekenreekswaarde retourneert in de gettermodus.
Vervolgens maken we een letterlijk configuratieobject dat wordt doorgegeven aan de jQuery UI-schuifmethode en wordt gebruikt om enkele eigenschappen van de schuifregelaar-widget in te stellen. Ons configuratieobject heeft twee eigenschappen, max en dia. De waarde van de max-eigenschap is een geheel getal dat de breedte van het transportelement vertegenwoordigt minus de breedte van de viewer. Dit is de maximale waarde die de schuifknop kan bereiken.
De waarde van de eigenschap slide is een anonieme functie die automatisch twee argumenten ontvangt; het oorspronkelijke gebeurtenisobject en een voorbereid object met nuttige eigenschappen met betrekking tot de widget. We gebruiken helemaal niet het eerste argument, dat we definiëren als e, maar we moeten het opnemen om toegang te krijgen tot het tweede argument, dat we ui.
De dia-gebeurtenis is een aangepaste gebeurtenis die wordt weergegeven door de API van de schuifregelaar, en de functie die we als waarde hebben ingesteld, wordt elke keer dat een dia-interactie plaatsvindt genoemd. Wanneer de gebeurtenis wordt afgevuurd, manipuleren we eenvoudig de eigenschap left style van ons transportelement negatief evenveel als de schuifregelaar wordt verplaatst. We kunnen de waarde krijgen waarnaar de schuifregelaar wordt verplaatst met behulp van de eigenschap value van het ui-object.
We hebben de maximale waarde van de schuifregelaar ingesteld op de lengte van het transportbandelement, in dit voorbeeld is dit 2128 px, dus de maximale waarde is 2128. Dit is niet in pixels, zoals u zult zien in de volgende schermafbeelding, de de schuif zelf is ongeveer 650 px lang. Maar als we de schuifregelaar ongeveer halverwege de baan verplaatsen, zal de waarde gerapporteerd in het ui-object ongeveer 1064 zijn, dus verplaatsen we de linkerrand van de transportband zoveel pixels naar links of rechts.
We hoeven ons geen zorgen te maken over het detecteren in welke richting de schuif is verplaatst; als de schuifhandgreep al naar rechts is verplaatst, heeft de linker CSS-eigenschap als de transportband al een negatieve waarde heeft. Wanneer we een negatief getal van een negatief getal minus hebben, is het resultaat natuurlijk een positief getal, dus de transportband zal teruggaan zoals het hoort. De voltooide pagina zou nu moeten verschijnen met de schuifregelaar:
Je zou moeten constateren dat het werkt zoals verwacht en dat de verschillende inhoudsblokken met behulp van de schuifregelaar in en uit beeld kunnen worden verplaatst. Naast de standaard sleepinteractie, is de ingebouwde toevoeging aan de schuifregelaar ook de nuttige toevoeging van een klikinteractie; als er ergens op de track wordt geklikt, wordt de hendel automatisch naar die positie verplaatst en wordt de callback-functie uitgevoerd.
In deze zelfstudie hebben we gekeken naar hoe de onderliggende HTML-code voor de schuifregelaar (een eenvoudige lege container), de standaardstijl die door de bibliotheek wordt toegepast en hoe deze kan worden geconfigureerd en geïnitialiseerd met onze code.
De schuifregelaar is een geweldige aanvulling op elke interface; het is gemakkelijk voor ons om in te stellen en gemakkelijk te gebruiken voor onze bezoekers, het is tactiel en interactief en kan in verschillende situaties worden gebruikt, van het verplaatsen van inhoud zoals in dit voorbeeld, of als, zeg, een volumecontrole op een streaming web-app.
Accentsconagua