Mainos
Viimeisessä oppitunnissamme tässä jQuery aloittelijoille opetusohjelmasarjan, katsomme lyhyesti jQuery UI - laajimmin käytetty jQuery-laajennus graafisten käyttöliittymien lisäämiseen verkkosovelluksiin. Kuvitteellisista muodoista ja visuaalisista tehosteista vetäviin widgetteihin, kehruulaitteisiin ja valintaikkunoihin - jQuery UI antaa sinulle voiman luoda monipuolisia web-käyttöliittymiä.
Jos et ole jo tehnyt niin, muista lukea sarjan aiemmat artikkelimme:
- Johdanto: Mikä on jQuery ja miksi sinun pitäisi välittää? Verkon tekeminen interaktiiviseksi: Johdatus jQueryynjQuery on asiakaspuolen komentosarjakirjasto, jota lähes kaikki nykyaikaiset verkkosivustot käyttävät - se tekee verkkosivustoista vuorovaikutteisia. Se ei ole ainoa Javascript-kirjasto, mutta se on kehittynein, tuetuin ja eniten käytetty ... Lue lisää
- 1: Valitsimet ja perusteet jQuery-opas - Aloittaminen: Perusteet ja valitsimetViime viikolla puhuin siitä, kuinka tärkeä jQuery on kaikille nykyaikaisille web-kehittäjille ja miksi se on mahtava. Tällä viikolla mielestäni on aika saada kädet likaantumaan jollain koodilla ja oppia kuinka ... Lue lisää
- 2: Menetelmät Johdanto jQueryyn (osa 2): Menetelmät ja toiminnotTämä on osa käynnissä olevaa aloittelijaa jQuery-web-ohjelmasarjoihin. Osa 1 kattoi jQuery-perusteet sen sisällyttämisestä projektiisi ja valitsimiin. Osassa 2 jatkamme ... Lue lisää
- 3: Sivun latauksen ja nimettömien toimintojen odottaminen Johdanto jQueryyn (osa 3): Sivun odottaminen ladattavaksi ja nimettömät toiminnotjQuery on kiistatta välttämätön taito nykyaikaiselle web-kehittäjälle, ja toivon antavan sinulle tämän lyhyen minisarjan avulla tiedon käytön aloittamiseen omissa verkkoprojekteissasi. Sisään... Lue lisää
- 4: Tapahtumat jQuery-opas (osa 4) - Tapahtuman kuuntelijatTänään me ryhdymme siihen loven ja näytämme todella missä jQuery loistaa - tapahtumat. Jos seurasi aiempia opetusohjelmia, sinun pitäisi nyt olla melko hyvä ymmärrys peruskoodista ... Lue lisää
- Virheenkorjaus Chromen kehittäjätyökaluilla Selvitä verkkosivustojen ongelmat Chrome-kehittäjätyökaluilla tai FirebugillaJos olet toistaiseksi seurannut jQuery-oppaani, olet jo saattanut joutua joihinkin koodiongelmiin etkä tiedä kuinka korjata ne. Kun se kohtaa toimimattoman koodibitin, se on erittäin ... Lue lisää
- 5: AJAX jQuery-opas (osa 5): AJAX he kaikki!Kun olemme lähellä jQuery-mini-opetusohjelmasarjamme loppua, on aika tutkia tarkemmin yhtä jQueryn käytetyimmistä ominaisuuksista. AJAX mahdollistaa verkkosivuston kommunikoida ... Lue lisää
Mikä on jQuery UI ja miksi minun pitäisi käyttää sitä?
jQuery UI tarjoaa kaikki komponentit, joita tarvitaan nykyaikaiseen web-sovellukseen, jossa on graafinen käyttöliittymä. Parempien kuvausten vuoksi se on kokoelma widgettejä.
Selaa nopeasti MakeUseOf-sivua saadaksesi nopean kuvan siitä, mitä voit tehdä sillä. Sisällössämme sisältö on oikeastaan vain erillistä divs järjestämättömällä luettelolla toimiakseen hakemistona. Suorita niillä jQuery-välilehdet, ja ne muuttuvat taianomaisesti välilehdiksi. Mahtava! Voit jopa ladata välilehden sisältöä AJAX: n kautta, jos haluat.
Palkitseminen-sivu käyttää myös ”modaalista ponnahdusikkunaa” -valintaikkunaa käyttäjän toiminnan vahvistamiseksi ja viestien palauttamiseksi. Voit kohdistaa käyttäjän huomion valitsemalla valintaikkunan himmentämällä muun sivun sisältöä, kunnes vuorovaikutus on valmis.
Vastauksissivustollamme käytämme yksinkertaista tooltip ominaisuus antaa vihjeitä painikkeista.
jQuery-käyttöliittymä on todella erinomainen lomakkeiden suhteen, ja se tarjoaa pääsyn monille liukusäätimille ja poimijoille. Olen suuri fani päivämäärävalitsin widget itse, että voit ladata tavallisen tekstikenttään, johon käyttäjän on tarkoitus kirjoittaa päivämäärä.
Näyttää monimutkaiselta, eikö niin? Voitko kuvitella koodaavan jotain sellaista puhtaassa JavaScriptissä? Näin teet sen jQuery UI: n avulla:
$ ( "# DateField"). Datepicker ();
En viettää enää aikaa selittää kuinka mahtava se on, koska jQuery UI: n viralliset esittelyt antaa hyvän yleiskuvan kaikista käytettävissä olevista ominaisuuksista sekä yksinkertaiset koodinäytteet. Mene lukemaan se.
JQuery-käyttöliittymän lisääminen
Yksinkertaisin tapa aloittaa jQuery-käyttöliittymä on lisätä seuraavat rivit otsikkoosi - mutta tee Varmista, että nämä lisätään jQuery-pääviitteen jälkeen, koska jQuery-käyttöliittymä vaatii jQueryn ennakkolatauksen. Tarvitset sekä viittauksen laajennusskriptiin että a tyylisivu joka sisältää näiden käyttöliittymäelementtien visuaalisen kuvauksen.