Share
jQuery UI 1.8 är för närvarande på frisläppande kandidatstadiet och, förutom att upptäcka en större bugg eller fel, kommer snart att bli den nuvarande stabila versionen av jQuerys officiella UI-bibliotek. Så vad har förändrats sedan den senaste nuvarande stabila versionen av 1.7.2? En av de stora skillnaderna är givetvis att biblioteket nu körs på den senaste versionen av jQuery själv - version 1.4.1, men det har varit många andra förändringar, inklusive tillägg av några bra nya komponenter, som vi ser över förloppet av denna artikel.
Författaren till den här artikeln, Dan Wellman, släppte nyligen jQuery UI 1.7, från Packt Publishing. Det är en fantastisk läsning, och jag är glad att kunna meddela att vi har en handfull kopior för att slumpmässigt ge ut. Lämna bara en kommentar om artikeln, så kommer du automatiskt in på ritningen. Kolla tillbaka på måndag för att ta reda på om du är en vinnare!
Den här utgåvan av biblioteket ger flera buggfixar för vissa nyckelkomponenter, inklusive Datepicker och Dialog widgets och Droppable, Resizable och Selectable interaction helpers. Ingen av buggarna var show-stoppare, men ändå rensa bort buggarna är en kritisk del av bibliotekets pågående utveckling. En viktig punkt att notera är att beforeclose händelsen i dialogrutan har avlägsnats och ersatts med beforeClose så att det följer samma namnkonvention som händelserna för andra komponenter.
Förutom buggar i koden har även flera styling- och tillgänglighetsfrågor tagits upp. i synnerhet kan titeltexten för dialog widgets inte längre försvinna bakom den stängda ikonen och tangentbordets navigationsbarhet för den nya knappen widget har förbättrats. För en komplett lista över alla buggfixar som ingår i version 1.8, se changelog på http://jqueryui.com/docs/Changelog/1.8rc1
jQuery UI har nu ett unikt positionssystem som det kan användas när en widget behöver placeras i förhållande till ett annat element, till exempel med en rullgardinsmeny eller ett flytande verktygstips. Position-verktyget gör att vi enkelt kan specificera, med hjälp av en serie enkla strängar, vilken del av det placerade elementet ska sättas till vilken del av det angivna målelementet. Så till exempel, "övre vänstra" punkt på ett element kan sättas till "nere till höger" av ett annat specificerat element.
Verktyget har också ett robust kollisionsdetekteringssystem som förhindrar att tittarna på sidan exponeras för fula verktygsfält om elementet som är placerat blir för nära kanten på visningsporten eller inte annars kan uppta sin position.
API för det här verktyget är kompakt, med bara 7 konfigurerbara alternativ för tillfället. Detta ger oss all kontroll vi behöver dock och tillåter oss att specificera upp till 81 möjliga kombinationer av positionering; alternativ som vi kan konfigurera inkluderar följande:
En av mina favorit widgets har återvänt som en officiell användargränssnittskomponent! Autocomplete var en beta-widget i en tidig 1,6-version av biblioteket och är nu tillbaka efter en komplett refactor. Den är kopplad till textinmatningar på sidan och ger en lista över möjliga val när en besökare börjar skriva i textfältet.
Widgeten kan ta sin data (matchande objekt i förslaget menyn) från en mängd olika källor, inklusive en standard JavaScript-grupp, JSON via en AJAX-förfrågan eller en flexibel återuppringningsfunktion som kan implementera en datakälla och returnera ett anpassat svar för visning i förslag menyn.
Autocomplete är en mycket konfigurerbar widget och har ett fullständigt API med alternativ, metoder och händelser som kan utnyttjas. Det är helt temaboende via SteamRoller och helt navigationsbart tangentbord. Sammantaget ger denna komponent mycket funktionalitet till dina sidor. Vid en viss framtid kan punktcaching också vara ett konfigurerbart beteende.
Låt oss ta en titt på dess API; den innehåller följande tre konfigurationsalternativ:
Följande två metoder exponeras av Autofullständig:
Vi kan även koppla återuppringningsfunktioner till följande anpassade händelser:
Som en speciell bonus innehåller källfilen för Autocomplete-widgeten även beta-meny-widgeten, som fortfarande är under utveckling och beräknas släppas i en senare version av biblioteket. Hittills ser det ut som ett robust och attraktivt tillägg till biblioteket, och låter oss omforma en oorderad lista till en attraktiv rullgardinsmeny. Många funktioner stöds, inklusive undermenyer, ikoner, delare och till och med en nedrullningsmeny med breadcrumb.
Med knappen Widget kan vi implementera attraktiva och funktionella knappar som kan konfigureras för att fungera som en viss typ av knapp. till exempel kan vi kasta standardknapparna, knappar i radstil där endast en enda knapp i en uppsättning kan väljas, eller knapparna i kontrollpanel där valfritt nummer i en viss uppsättning kan väljas. Flera typer av knappar som innehåller en enkel rullgardinsmeny kan också skapas.
Det är en mycket flexibel widget och kan byggas med en mängd olika underliggande element, inklusive , och . Knapparna är fullt tillgängliga och ARIA-kompatibla, lägger till eller tar bort lämpliga roller och tillstånd när det behövs. API: n är relativt enkelt vid denna tidpunkt, men täcker alla väsentliga saker med tre konfigurerbara alternativ och en enda metod för att åberopa; Konfigurationsalternativen är följande:
Den händelse som vi kan binda till för att utföra en återuppringningsfunktion och reagera på interaktion är klick händelse; den infödda klick Webbläsarens händelse används om inte med knapparna i radio eller kryssrutan, i vilket fall händelsen avfyras av widgeten, inte det underliggande elementet.
Det sista nya verktyget som finns i jQuery UI 1.8 är Mouse-verktyget, som används av andra bibliotekskomponenter för att bättre kunna distribuera relaterade implementeringar av samma beteende med olika widgets. Det här är bra för utvecklare eftersom det betyder att om mus interaktion är ett nödvändigt beteende hos en anpassad gränssnitt-widget, kan logiken i det här verktyget användas utan att behöva skriva om det manuellt. Liksom menykomponenten, men detta verktyg bör betraktas som beta och utsättas för betydande revision i framtida utgåvor.
API: n är mycket kompakt; det finns bara tre konfigurerbara alternativ; Det finns en rad privata metoder som används internt av plugin, men inget vi behöver manuellt åberopa. De konfigurerbara alternativen är följande:
jQuery UI 1.8 formar upp till en bra utgåva av biblioteket; med en kombination av både buggfixar och nya komponenter ser det ut som en viktig milstolpe i bibliotekets färdplan. Vi tittade först på bibliotekets nya positioneringssystem vilket ger oss enkel åtkomst till ett stort antal olika var att placera ett element i förhållande till ett annat element. Sedan tittade vi på de två nya komponenterna Autocomplete and Button och såg de olika konfigurationsalternativen, metoderna och händelserna som exponeras av var och en av deras API.
Accentsconagua