Hva er endret i jQuery UI 1.8 - Plus Free Books!

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.


Gratis kopier av jQuery UI 1.7

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!


1. Bug Zapping

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


2.Positioning

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:

:
Refererer til stillingen på målelementet som elementet blir plassert vil bli fikset til; Metoden aksepterer en enkelt streng bestående av verdien for den horisontale akse (enten Ikke sant, senter, eller venstre) etterfulgt av verdien for den vertikale aksen (enten topp, senter, eller bunn). Det er ingen skille mellom de to verdiene.
bgiframe:
Hvis bgiframe-pluginet er tilgjengelig på siden, vil dette alternativet bruke en iframe shim til det posisjonerte elementet, noe som kan bidra til å forhindre at utvalgte elementer vises over det posisjonerte innholdet i IE6.
kollisjon:
Dette alternativet bestemmer hvordan kollisjoner håndteres; den aksepterer en av følgende strenge: flip, passe eller ingen. Standard er flip, som forårsaker at elementet blir posisjonert for å reversere posisjonen i forhold til målelementet, f.eks. "høyre senter" vil bli "venstre senter".
min:
Refererer til at elementet er plassert; aksepterer samme verdier som .
av:
Godtar en jQuery-velger som angir målelementet.
offset:
Angi et antall piksler for å kompensere for at elementet er plassert på målelementet.
ved hjelp av:
En tilbakeringingsfunksjon kan brukes med dette alternativet, slik at du kan animere posisjoneringen av elementet.

3. Autofullfør

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:

utsette:
Vi kan spesifisere antall millisekunder widgeten skal vente før visning av forslagsmenyen når den besøkende begynner å skrive inn inngangen.
MINLENGTH:
Dette alternativet tar et heltall som refererer til hvor mange tegn som skal skrives inn i innmatingen før forslagsmenyen vises.
kilde:
Vi konfigurerer datakilden ved hjelp av dette alternativet; mulige verdier inkluderer en rekke strenger som representerer elementene som skal vises i forslag-menyen, eller en rekke objekter der hver gjenstand inneholder to egenskaper - den første er etiketten som vises i forslag-menyen, den andre er verdien som vil bli lagt til inngangen hvis et element i forslag-menyen er valgt. Vi kan også levere en enkelt streng som representerer en ekstern ressurs som kan returnere dataene asynkront eller en tilbakeringingsfunksjon som kan be om dataene og returnere den til widgeten i ønsket format.

Følgende to metoder blir eksponert ved Autofullføring:

Lukk:
Brukes til å lukke forslagsmenyen.
Søke:
Utfør et søk på de tilgjengelige dataene og vis forslagene hvis begrepet er tilpasset. Kan ta en forhåndsdefinert verdi som begrepet som sendes inn i metoden som et argument, eller verdien av inngangsfeltet den er knyttet til.

Vi kan også koble tilbakeringingsfunksjoner til følgende tilpassede arrangementer:

endring:
Fired etter et element i forslaget menyen er valgt og menyen er stengt.
Lukk:
Avfyrt når forslagsmenyen er stengt, om et element ble valgt eller ikke. Precedes the endring begivenhet.
fokus:
Fired direkte før fokus er gitt til et element i forslag-menyen.
åpen:
Slått av når dataene er returnert, rett før forslagsmenyen vises.
Søke:
Skaffet direkte før datakilden er søkt. Søket kan bli kansellert ved å returnere falsk fra en tilbakeringingsfunksjon som er bundet til denne hendelsen.
å velge:
Denne hendelsen utløses når et element fra menyen før menyen lukkes.

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.


4. Knapp

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