jQuery UI 1.8 er for øyeblikket på utgivelseskandidatstadiet og, uten at det oppdages en stor feil eller feil, vil snart bli den nåværende stabile utgivelsen av jQuerys offisielle UI-bibliotek. Så hva har endret seg siden siste nåværende stabile utgivelsen av 1.7.2? En av de store forskjellene er selvfølgelig at biblioteket nå kjører på den nyeste versjonen av jQuery selv - versjon 1.4.1, men det har vært mange andre endringer, inkludert tillegg av noen flotte nye komponenter, som vi ser på over løpet av denne artikkelen.
Forfatteren av denne artikkelen, Dan Wellman, lanserte nylig jQuery UI 1.7, fra Packt Publishing. Det er en fantastisk lese, og jeg er glad for å kunngjøre at vi har en håndfull eksemplarer for å tilfeldig gi ut. Bare legg igjen en kommentar om artikkelen, og du blir automatisk tatt inn på tegningen. Sjekk tilbake på mandag for å finne ut om du er en vinner!
Denne utgivelsen av biblioteket gir flere feilrettinger for noen av de viktigste komponentene, inkludert Datepicker og Dialog widgets og Droppable, Resizable og Selectable interaction helpers. Ingen av feilene var show-stoppere, men likevel er det viktig å fjerne bugsene i bibliotekets pågående utvikling. Et viktig poeng å merke seg er at beforeclose Hendelsen til Dialog-widgeten er blitt utdatert og erstattet med beforeClose slik at den følger samme navngivningskonvensjon som hendelsene til andre komponenter.
I tillegg til feil i koden, har også flere stilings- og tilgjengelighetsproblemer blitt adressert; Navnlig tekstteksten til Dialog widgets kan ikke lenger forsvinne bak det nærliggende ikonet, og tastaturnavigering av den nye knappen-widgeten er forbedret. For en komplett liste over alle feilrettinger som følger med versjon 1.8, se changelog på http://jqueryui.com/docs/Changelog/1.8rc1
jQuery UI har nå et unikt posisjoneringssystem som det kan brukes når en widget må plasseres i forhold til et annet element, for eksempel med en rullegardinmeny eller et flytende verktøytips. Posisjonsverktøyet lar oss enkelt angi, ved hjelp av en rekke enkle strenger, hvilken del av det posisjonerte elementet som skal festes til hvilken del av det angitte målelementet. Så for eksempel, "øverst til venstre" punkt på ett element kan festes til "Nede til høyre" av et annet spesifisert element.
Verktøyet har også et robust kollisjonsdetekteringssystem som forhindrer seere på siden å bli utsatt for stygge verktøylinjer hvis elementet som blir plassert blir for nær kanten av visningsporten, eller kan ellers ikke okkudere sitt posisjonerte sted.
API for dette verktøyet er kompakt, med bare 7 konfigurerbare alternativer på dette stadiet. Dette gir oss all kontroll vi trenger, og lar oss spesifisere opp til 81 mulige kombinasjoner av posisjonering; Alternativer vi kan konfigurere inkluderer følgende:
En av mine favoritt widgets har returnert som en offisiell brukergrensesnitt! Autofullføring var en beta-widget i en tidlig 1,6-versjon av biblioteket og er nå tilbake etter en komplett refactor. Den er knyttet til tekstinnganger på siden og gir en liste over mulige valg når en besøkende begynner å skrive i tekstfeltet.
Widgeten kan ta sine data (de matchende elementene i forslag-menyen) fra en rekke kilder, inkludert et standard JavaScript-system, JSON via en AJAX-forespørsel eller en fleksibel tilbakeringingsfunksjon som kan implementere en datakilde og returnere en tilpasset respons for visning i forslag menyen.
Autofullføring er en svært konfigurerbar widget og har en full API for alternativer, metoder og hendelser som skal benyttes. Det er helt temmelig via SteamRoller og fullt navigasjonsspiller. Alt i alt gir denne komponenten mye funksjonalitet til sidene dine. I noen fremtidig punktkryptering kan også være en konfigurerbar oppførsel.
La oss se på API-en; den inneholder følgende tre konfigurasjonsalternativer:
Følgende to metoder blir eksponert ved Autofullføring:
Vi kan også koble tilbakeringingsfunksjoner til følgende tilpassede arrangementer:
Som en spesiell bonus inneholder kildefilen for Autocomplete-widgeten også beta-meny-widgeten, som fremdeles er under utbygging, og som skal utgis i en senere versjon av biblioteket. Så langt ser det ut som et robust og attraktivt tillegg til biblioteket, og lar oss omforme en uordnet liste til en attraktiv rullegardinmeny eller fly-out-meny. Mange funksjoner støttes, inkludert undermenyer, ikoner, dividers og til og med en drill-down meny med breadcrumb.
Knappen Widget lar oss implementere attraktive og funksjonelle knapper som kan konfigureres til å oppføre seg som en bestemt type knapp; Vi kan for eksempel kaste standard trykknapper, knapper i radiostil, der bare en enkelt knapp i et sett kan velges, eller knappene i kontrollpanelet hvor et hvilket som helst nummer i et bestemt sett kan velges. Flere typer knapper som inneholder en enkel rullegardinmeny, kan også opprettes.
Det er en veldig fleksibel widget og kan bygges ved hjelp av en rekke underliggende elementer, inkludert , og . Knappene er fullt tilgjengelige og ARIA-kompatible, legger til eller fjerner de aktuelle rollene og tilstandene når det er nødvendig. APIen er relativt enkel på dette punktet, men dekker alle essensielle med tre konfigurerbare alternativer og en enkelt metode for å påkalle; konfigurasjonsalternativene er som følger:
Hendelsen som vi kan binde seg til for å utføre en tilbakeringingsfunksjon og reagere på samhandling er klikk begivenhet; den innfødte klikk Begivenheten til nettleseren brukes, med mindre radioen eller avkrysningsboks-stilknappene, i hvilket tilfelle hendelsen blir avfyrt av widgeten, ikke det underliggende elementet.
Det siste nye verktøyet som finnes i jQuery UI 1.8, er Mouse-verktøyet, som brukes av andre bibliotekskomponenter for bedre å kunne distribuere relaterte implementeringer av samme oppførsel av forskjellige widgets. Dette er flott for utviklere, fordi det betyr at hvis musekommunikasjon er en nødvendig oppførsel av en tilpasset brukergrensesnitt, kan logikken i dette verktøyet brukes uten å måtte omskrive den manuelt. Som menykomponenten bør dette verktøyet betraktes som beta og gjenstand for betydelig revisjon i fremtidige utgivelser.
APIen er veldig kompakt; det er bare tre konfigurerbare alternativer; Det finnes en rekke private metoder som brukes internt av plugin, men ingenting vi trenger å manuelt påkalle. De konfigurerbare alternativene er som følger:
jQuery UI 1.8 er utforming for å være en fin utgivelse av biblioteket; Med en kombinasjon av både feilrettinger og nye komponenter ser det ut som en viktig milepæl i bibliotekets veikart. Vi så først på bibliotekets nye posisjoneringssystem som gir oss lett tilgang til et stort antall forskjellige var av posisjonering ett element i forhold til et annet element. Vi så på de to nye komponentene Autofullfør og Knapp og så de forskjellige konfigurasjonsalternativene, metodene og hendelsene som ble utsatt for hver av deres APIer.