Share
De voortgangsbalk is een van de nieuwste componenten die moet worden toegevoegd aan de uitstekende bibliotheek met UI-widgets en interactie-helpers die bovenop jQuery zijn gebouwd. Het werd geïntroduceerd in de nieuwste versie van de bibliotheek, die op het moment van schrijven 1.7 is.
De voortgangsbalk is momenteel alleen bepaald, wat betekent dat wanneer we het bijwerken, we het expliciet moeten vertellen wat de waarde ervan is, en we moeten van tevoren weten wanneer het proces wordt gebruikt om voltooiingen te meten. Deze widget is momenteel niet de beste keuze voor een proces dat een onbepaalde tijd nodig heeft om te voltooien.
Het is een heel eenvoudige widget met een kleine API die een beperkt aantal eigenschappen en methoden blootlegt, maar het kan nog steeds zeer effectief zijn en is geweldig voor het geven van visuele feedback aan bezoekers over het percentage van een proces dat nog over is voordat het voltooid is.
We hebben een kopie van de huidige versie van de gebruikersinterface van jQuery nodig. Deze is verkrijgbaar bij de downloadbouwer op http://jqueryui.com/download. Zodra we het hebben gedownload, moeten we het uitpakken zodat de bestaande directorystructuur behouden blijft. We zouden een nieuwe map op onze computer moeten maken met de naam jQuery UI en dan binnenin een nieuwe map maken met de naam jqueryui1.7. Het archief moet dan worden uitgepakt naar de map jqueryui1.7.
Het archief bevat alles wat we nodig hebben om te beginnen; verkleinde en niet-gecomprimeerde versies van alle bibliotheekbestanden, enkele themabestanden (het standaardthema is de toepasselijk genaamde vloeiendheid) en zelfs de nieuwste versie van de onderliggende jQuery-bibliotheek.
De voortgangsbalk is afhankelijk van een aantal bestanden om te kunnen functioneren; deze staan hieronder vermeld in de volgorde waarin ze moeten worden toegevoegd aan onze pagina:
De eerste drie bestanden maken deel uit van het uitgebreide CSS-framework en worden gebruikt om de voortgangsbalk zijn eigen uitstraling te geven. We hoeven dit thema niet te volgen in een real-world implementatie; we hebben veel opties voor aanpassingen, waaronder een groot aantal vooraf geconfigureerde thema's die rechtstreeks beschikbaar zijn via Themeroller, een aangepast thema dat we zelf kunnen ontwerpen met Themeroller, of zelfs een aangepast thema dat we handmatig maken door regels te overschrijven die zijn gedefinieerd in de standaard stylesheets. We zullen in deze tutorial echter geen van deze dingen doen, maar we kunnen wel gebruik maken van een aantal van de klassen die door het framework worden geboden.
Zeer weinig onderliggende mark-up is nodig voor deze widget; alles wat we nodig hebben, naast de hierboven genoemde bibliotheekresources, is een eenvoudig containerelement. Maak in je teksteditor de volgende pagina-shell met de vereiste bronnen en het container-element:
jQuery UI Voortgangsbalk
Sla dit op als progressBar.html in de root jQuery UI-map. We plaatsen de stylesheets aan het begin van het bestand en de scripts helemaal aan het einde; dit is vanwege de prestaties, omdat pagina's de inhoud sneller laden wanneer ze niet proberen tegelijkertijd JavaScript te laden. Dit is een goed gedocumenteerde uitvoeringspraktijk die het best wordt nageleefd. We hebben een lege scripttag achtergelaten aan de onderkant van de pagina; laten we daar wat code toevoegen:
Accentsconagua
$ (function () // call progress bar constructor $ ("# container"). progressbar ();); Om de standaard voortgangsbalk te initialiseren, is alles wat we doen de constructormethode, de voortgangsbalk, aanroepen op het containerelement waar de widget in moet worden omgezet. Wanneer u deze pagina in uw browser uitvoert, ziet u dat de voortgangsbalk is gemaakt en automatisch de breedte van de container vult, in dit geval de hoofdtekst van de pagina:
De waarde van de voortgangsbalk wordt standaard op nul gezet. Daarom lijkt deze waarde leeg in het vorige screenshot. Om de voortgangsbalk te vullen, moeten we de eigenschap value instellen; verander de constructorfunctie zodat deze als volgt verschijnt:
// call voortgangsbalk constructor $ ("# container"). progressbar (value: 50); De eigenschap value bepaalt het percentage van de voortgangsbalk dat is gevuld, waardoor de bezoeker een goede visuele feedback krijgt over hoeveel van de taak nog moet worden voltooid. De voortgangsbalk moet nu half gevuld zijn, zoals in de volgende screenshot:
De huidige waarde van de widget ophalen is net zo eenvoudig als het instellen ervan; we kunnen een van de methoden gebruiken om de huidige waarde-eigenschap terug te geven. Voeg na de eerste constructor de volgende code toe:
// stel muisover in voor voortgangsbalk
$ ("# container"). mouseover (function () // geeft de huidige waarde $ ("") .attr (" id "," percentage "). tekst ($ (" # container "). voortgangsbalk (" optie "," waarde ") +"% voltooid ".) appendTo (" body ");) ; // stel mouseout in voor voortgangsbalk $ ("# container"). mouseout (function () // verberg waarde $ ("# percentage"). remove (););
We hebben twee eenvoudige anonieme functies toegevoegd die worden geactiveerd bij de gebeurtenissen mouseover en mouseout die worden afgevuurd door de voortgangsbalk (houd er rekening mee dat dit standaard DOM-gebeurtenissen zijn die niet zijn aangepast voor voortgangsbalkgebeurtenissen). Alles wat we doen in de eerste functie is een nieuwe alinea maken met de huidige waarde van de voortgangsbalk als de innerText en deze toevoegen aan de pagina.
De waarde wordt opgehaald met behulp van de optiemethode. Het argument dat aan de methode wordt doorgegeven, is de naam van de eigenschap die we willen ophalen. De tweede functie verwijdert eenvoudig het bericht opnieuw. Het bericht wordt getoond in de volgende screenshot:
De waarde-eigenschap of -optie is momenteel de enige configureerbare eigenschap van de voortgangsbalk; in dit voorbeeld stellen we het in wanneer de widget wordt geïnitialiseerd door het door te geven als de eigenschap van een configuratieobject. Als u deze eigenschap wilt instellen nadat de widget is geïnitialiseerd, gebruiken we de optiemethode. Om deze methode in de setter-modus te gebruiken, moeten we een tweede parameter doorgeven die de nieuwe waarde specificeert, zoals deze:
progressbar ("option", "value", 75) Je vraagt je misschien af waarom ik 'een tweede parameter' zei wanneer er duidelijk drie argumenten zijn in de bovenstaande coderegel. Hoewel we de optiemethode gebruiken, noemen we dit niet echt rechtstreeks. In plaats daarvan bellen we opnieuw de constructormethode, maar zeggen we dat we de optiemethode willen noemen. De widget roept de methode intern aan en geeft de twee parameters door ("waarde" en 75) die we doorgeven aan de constructor na de methode naam.
De voortgangsbalk geeft een enkele gebeurtenis weer, de wijzigingsgebeurtenis, die ons een mechanisme biedt om in te haken, zodat we kunnen reageren op veranderingen in de waarde ervan. Dit is een aangepaste gebeurtenis, zodat we deze op twee verschillende manieren kunnen detecteren en erop kunnen reageren. We kunnen een anonieme functie definiëren als de waarde van de eigenschap change in een configuratie-object, zoals we deden met de eigenschap value, of we kunnen de bindmethode van jQuery gebruiken om de anonieme functie die moet worden uitgevoerd, op te geven. Een subtiel verschil tussen de twee is dat de code die is opgegeven met de bindmethode als eerste wordt uitgevoerd.
De voortgangsbalk API biedt vijf methoden, die hieronder worden weergegeven:
Al deze methoden worden op precies dezelfde manier gebruikt als de optiemethode die we hebben bekeken; door de constructormethode aan te roepen met de naam van de methode en alle parameters die we willen doorgeven. De meeste hiervan moeten voor zichzelf spreken..
Dit voorbeeld tot nu toe is erg basaal, voor degenen onder u die misschien helemaal geen jQuery UI hebben gebruikt. Laten we de zaken een beetje op een rijtje zetten en iets samenstellen dat lijkt op het soort dingen dat we graag willen doen in een goede uitvoering. Dit voorbeeld zal ook eenvoudig zijn, maar het zou een veel beter idee moeten geven van hoe de widget voor ons gemaakt kan worden. Onze voltooide pagina zal er ongeveer zo uitzien:
Maak een begin met de volgende onderliggende pagina in een nieuw bestand in uw teksteditor:
jQuery UI Voortgangsbalk Registratieformulier
Vooruitgang:
