Share
jQuery UI 1.8 bevindt zich momenteel in de fase van de release candidate en zal, behoudens de ontdekking van een grote bug of tekortkoming, binnenkort de huidige stabiele release worden van de officiële UI-bibliotheek van jQuery. Dus wat is er veranderd sinds de laatste huidige stabiele release van 1.7.2? Een van de belangrijkste verschillen is natuurlijk dat de bibliotheek nu draait op de nieuwste versie van jQuery zelf - versie 1.4.1, maar er zijn veel andere veranderingen geweest, waaronder de toevoeging van een aantal geweldige nieuwe componenten, die we zullen bekijken over de loop van dit artikel.
De auteur van dit artikel, Dan Wellman, heeft recent jQuery UI 1.7 uitgegeven van Packt Publishing. Het is een fantastisch boek en ik ben verheugd aan te kondigen dat we een handvol exemplaren hebben om willekeurig uit te geven. Laat een opmerking over het artikel achter en u wordt automatisch ingeschreven in de tekening. Kom maandag terug om te kijken of je een winnaar bent!
Deze versie van de bibliotheek brengt een aantal bugfixes voor een aantal belangrijke componenten, waaronder de Datepicker- en Dialoog-widgets en de helpers voor Droppable, Resizable en Selectable-interactie. Geen van de bugs waren show-stoppers, maar toch, het opruimen van de bugs is een cruciaal onderdeel van de voortdurende progressie van de bibliotheek. Een belangrijk punt om op te merken is dat het BeforeClose gebeurtenis van de Dialoog-widget is verouderd en vervangen door BeforeClose zodat het dezelfde naamgevingsconventie volgt als de gebeurtenissen van andere componenten.
Naast bugs in de code zijn ook verschillende styling- en toegankelijkheidsproblemen aangepakt; met name de titeltekst van Dialoog-widgets kan niet meer verdwijnen achter het pictogram Sluiten en de toetsenbord-navigatie van de nieuwe knopwidget is verbeterd. Zie de changelog op http://jqueryui.com/docs/Changelog/1.8rc1 voor een volledige lijst van alle bugfixes die zijn opgenomen in versie 1.8
jQuery UI heeft nu een uniek positioneringssysteem dat kan worden gebruikt wanneer een widget moet worden gepositioneerd ten opzichte van een ander element, zoals een vervolgkeuzemenu of zwevende knopinfo. Met het hulpprogramma Positie kunnen we eenvoudig opgeven, met behulp van een reeks eenvoudige tekenreeksen, welk deel van het gepositioneerde element moet worden vastgesteld op welk deel van het opgegeven doelelement. Dus bijvoorbeeld de "linksboven" punt van één element kan worden vastgesteld op de "rechts onder" van een ander gespecificeerd element.
Het hulpprogramma beschikt ook over een robuust systeem voor botsingdetectie dat voorkomt dat kijkers worden blootgesteld aan onooglijke werkbalken als het geplaatste element te dicht bij de rand van het kijkvenster komt of anders de gepositioneerde plaats niet kan innemen.
De API voor dit hulpprogramma is compact, met slechts 7 configureerbare opties in dit stadium. Dit geeft ons echter alle controle die we nodig hebben en stelt ons in staat om op te geven tot 81 mogelijke combinaties van positionering; opties die we kunnen configureren, omvatten het volgende:
Een van mijn favoriete widgets is terug als een officiële UI-component! Autocomplete was een beta-widget in een vroege 1.6-versie van de bibliotheek en is nu terug na een volledige refactor. Het is gekoppeld aan tekstinvoer op de pagina en levert een lijst met mogelijke keuzes wanneer een bezoeker begint te typen in het tekstveld.
De widget kan zijn gegevens (de overeenkomende items in het suggestiemenu) van verschillende bronnen opnemen, waaronder een standaard JavaScript-array, JSON via een AJAX-aanvraag of een flexibele callback-functie die elke gegevensbron kan implementeren en een aangepast antwoord kan retourneren om weer te geven in het suggestiemenu.
Autocomplete is een zeer configureerbare widget en beschikt over een volledige API met opties, methoden en gebeurtenissen om gebruik van te maken. Het is volledig themabel via SteamRoller en volledig navigeerbaar met het toetsenbord. Al met al brengt dit onderdeel veel functionaliteit naar uw pagina's. Op een later moment kan caching ook een configureerbaar gedrag zijn.
Laten we eens kijken naar de API; het bevat de volgende drie configuratie-opties:
De volgende twee methoden worden weergegeven door Autocomplete:
We kunnen callback-functies ook koppelen aan de volgende aangepaste gebeurtenissen:
Als een speciale bonus bevat het bronbestand voor de widget Autocomplete ook de bèta-menawidget, die nog steeds in ontwikkeling is en moet worden uitgegeven in een latere versie van de bibliotheek. Tot nu toe lijkt het een robuuste en aantrekkelijke toevoeging aan de bibliotheek, en kunnen we een ongeordende lijst omvormen tot een aantrekkelijk drop-down of fly-out menu. Veel functies worden ondersteund, waaronder submenu's, pictogrammen, verdelers en zelfs een drill-down menu met broodkruimel.
Met de knopwidget kunnen we aantrekkelijke en functionele knoppen implementeren die kunnen worden geconfigureerd om zich als een bepaald type knop te gedragen; we kunnen bijvoorbeeld standaard drukknoppen kratten, radio-achtige knoppen waar slechts een enkele knop in een set kan worden geselecteerd, of controlestijlknoppen waar elk nummer in een bepaalde set kan worden geselecteerd. Verschillende soorten knoppen met een eenvoudig vervolgkeuzemenu kunnen ook worden gemaakt.
Het is een zeer flexibele widget en kan worden gebouwd met behulp van een verscheidenheid aan onderliggende elementen, waaronder , en . De knoppen zijn volledig toegankelijk en ARIA-compatibel, waarbij de juiste rollen en statussen worden toegevoegd of verwijderd wanneer nodig. De API is op dit moment relatief eenvoudig, maar biedt alle essentiële functies met drie configureerbare opties en een enkele methode om aan te roepen; de configuratie-opties zijn als volgt:
De gebeurtenis waaraan we kunnen binden om een callback-functie uit te voeren en op interactie te reageren, is de Klik evenement; de inheemse Klik gebeurtenis van de browser wordt gebruikt, tenzij met de radio of checkbox-stijl knoppen, in welk geval de gebeurtenis wordt afgevuurd door de widget, niet het onderliggende element.
Het laatste nieuwe hulpprogramma dat in jQuery UI 1.8 te vinden is, is het hulpprogramma Mouse, dat wordt gebruikt door andere bibliotheekcomponenten om verwante implementaties van hetzelfde gedrag door verschillende widgets beter te distribueren. Dit is geweldig voor ontwikkelaars, omdat het betekent dat als muisinteractie een vereist gedrag van een aangepaste UI-widget is, de logica in dit hulpprogramma kan worden gebruikt zonder het handmatig opnieuw te moeten schrijven. Net als de menu-component moet dit hulpprogramma echter als bèta worden beschouwd en in toekomstige releases aanzienlijk worden herzien.
De API is erg compact; er zijn slechts drie configureerbare opties; er zijn een aantal privé-methoden die intern door de plug-in worden gebruikt, maar niets dat we handmatig moeten inroepen. De configureerbare opties zijn als volgt:
jQuery UI 1.8 wordt een mooie release van de bibliotheek; met een combinatie van zowel bugfixes als nieuwe componenten ziet het eruit als een belangrijke mijlpaal in de routekaart van de bibliotheek. We hebben eerst gekeken naar het nieuwe positioneringssysteem van de bibliotheek dat ons gemakkelijk toegang geeft tot een enorm aantal verschillende was om één element ten opzichte van een ander element te positioneren. We hebben toen gekeken naar de twee nieuwe componenten Autocomplete en Button en zagen de verschillende configuratie-opties, methoden en gebeurtenissen zichtbaar gemaakt door elk van hun API's.
Accentsconagua