JQuery felhasználói felület – JQuery UI

Gondolom, már sokan találkoztak a JQuery által biztosított kényelmes Javascriptes környezettel és a JQuery UI-el – felhasználói felülettel – is. Biztos vagyok abban, hogy sokaknak nem kell bemutatni, hogy mit is tud ez a kis gyűjtemény. Igen, gyűjtemény, mivel magában foglalja azon alap pluginokat, amiket egy interaktív weboldalon az ember fia előszeretettel használ. Megkönnyíti a munkánkat, mivel a legtöbb böngészőre – és ez alatt a régebbi típusokat is értem – optimalizálva van. Az UI által támogatott böngészők az IE 6.0+, Firefox 3+, Safari 3.1+, Opera 9.6+ és a Google Chrome.

Fontos megemlíteni, hogy ezt a kis gyűjteményt sminkelni is lehet. Bár elég sok gyárilag választható smink áll rendelkezésünkre, kis erőfeszítéssel akár teljesen egyedire is szabhatjuk a megjelenést.
A megjelenés apróbb beállításait az UI ThemeRoller alkalmazásával tehetjük meg, mely a http://jqueryui.com/themeroller/ oldalon érhető el.
Teljes smink átalakításhoz bővebb segítséget pedig a http://jqueryui.com/docs/Theming/API oldalon találunk.

De miért is járatom én itt a számat? Első sorban azért, hogy minél többen megismerjék ezt a rendszert és az általa nyújtott kényelmet. Felmerülhet bennünk a kérdés, hogy mégis mire lehet használni?
A kérdés jó, fel is sorolnék pár funkciót, amit akár admin felületen, akár a látogatói felületen alkalmazhatunk.

Mostanában egyre jobban elterjednek a “Tabulált” füles ablakok. Sok helyet spórolhatunk meg velük, viszont a kivitelezése már nem olyan egyszerű és ha szeretnénk elkerülni a bonyolult kódolásokat, az UI a nekünk megfelelő választás lesz. Hogy miért? Mert mindössze egy függvényt kell megadnunk, valamint a megfelelő felépítésű html-t megírni és máris használható.

És akkor egy gyors példa:

És a forrás:

<script>
$(function() {
	$( "#tabs" ).tabs();
});
</script>
 
<div class="demo">
<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>
</div><!-- End demo -->

Látható, hogy egy egyszerű sor megadásával máris egy tetszetős kis “alkalmazást” implementáltunk a weboldalunkra. Nagy előnye az UI-nak, hogy nem szükséges az egész gyűjteményt betölteni az oldalba, hiszen akár külön külön is letölthetjük az alkalmazások, effektek függvényeit.

Következő példánkban gombok és linkek megjelenítését szabhatjuk gyorsan és kényelmesen egyformára.

Forrás:

<script>
$(function() {
	$( "button, input:submit, a", ".demo" ).button();
	$( "a", ".demo" ).click(function() { return false; });
});
</script>
 
<div class="demo">
    <button>A button element</button>
    <input value="A submit button" type="submit">
    <a href="#">An anchor</a>
</div><!-- End demo -->

A JQery UI lelőhelye: http://jqueryui.com/

Lista, a gyűjteményben szereplő alkalmazásokról, effektekről:
Kölcsönhatások
– Mozgatható
– “Dobható” (Droppable)
– Átméretezhető
– Választható
– Rendezhetõ
Alkalmazások
– Harmonika effekt
– Automatikus kiegészítés
– Gomb
– Dátum választó
– Párbeszéd ablak (Dialog)
– Progressbar
– Csúszka
– Lapok (Tabs)
Hatások
– Szín Animáció
– Css Osztály animált váltás
– Css Osztály hozzáadás
– Css Osztály elvétel
– Css Osztály váltás
– Effekt választó
– Animált váltás (Toggle)
– Elrejtése
– Megjelenítés

A továbbiakban egy cikk sorozatot indítok az UI felhasználásáról, ahol lépésről lépésre minden függvényt megvizsgálunk, kipróbálunk és tesztelünk.

1. 

   Írta: Keveqiah
   "Életrajzi információ" ? Hmm, az hosszú lenne. Legyen elég annyi, hogy weboldalak fejlesztésével foglalatoskodom. Ahogy időm engedi, webdesign, fejlesztés, sminkelés (Drupal, Wordpess), fotó buherálás és egyéb nyalánkságok.

   
   

1. Rimelek - 2011. feb. 06. 15:08
   Tényleg jó cucc. Bár az autocomplete funkciója ajax-al összeegyeztetve kissé bugos volt nekem. Kénytelen voltam megírni magam, felhasználva a jquery-ui témáját, mert az viszont tetszett.
   
   
2. Keveqiah - 2011. feb. 06. 15:20
   Régóta nézegetem már én is, de a gyakorlatban még egy részét sem használtam, viszont sokaknak hasznos lehet és az utóbbi időben nekem is könnyebb lett volna a dolgom, ha használom egyes részeit.
   A hozzászólásodból kiszűrve, az autocomplete-t fogom elsőként kivesézni, hátha sokaknak megkönnyítjük az életét vele. :)
   
   
3. Rimelek - 2011. feb. 06. 21:07
   Nagyon szép témák vannak hozzá. És nagyon hasznosak is a funkciók. De az autocomplete még “new” címkével van ellátva a doksiban is. Gondolom ezért sem olyan tökéletes. És majd tovább fejlesztik. De pl a dokisban sem írnak le mindent. Ugyebár az ajaxos verzió is úgy működik, hogy xml fájlból ( vagy json forrásból ) tud olvasni. De csak egyszer. Utána az inputba pötyögéskor nem küld új kéréseket. Persze be lehet tenni az egészet egy $.ajax() -ba, de annak is X karakter leütése után kell lefutnia. Az autocomplete szintén figyel egy eseményt. A kettőt összeegyeztetni nem volt egyszerű és akkor is hibás lett. Bizonyára lett volna megoldás, de ha valami ilyen komplikált, akkor én inkább saját megoldást írok :) Azért várom az erről szóló posztodat akkor. Hátha megoldod. De amit én írtam még gyorsabb is lett jóval, mint a jquery ui-s megoldás. Szóval egyelőre nekem megfelel. Ettől persze még remek találmány az ui.
   
   
4. Rimelek - 2011. feb. 06. 21:19
   Jajj, kimaradt a “doksi sem ír le mindent” rész utáni megjegyzésem eredeti verziója.Szóval hogy egyben lekér mindent a szerverről és abból válogat javascripttel.Így szerverről hiába kérsz le valamit több mező szerint adatbázisból, ha a megjelenítendő értékben nem szerepel a beírt részlet, nem fogja kiírni. Csak ha source opciónak callback függvényt adsz meg és abban a response(data) -t meghívod, ahol a data az összes lekért adat. De erre nem tértek ki a doksiban, csak az “accent folding” tutorial alatt találtam egy sokkal bonyolultabb megoldást és azt leegyszerűsítve jutottam erre.
   
   
5. mAghraba - 2011. okt. 15. 20:25
   Naccerű! :)De hol a cikksorozat??Túrom a netet egy világos, tiszta és teljes magyar nyelvű, a jQuery-t gyakorlati oldalról bemutató cikksorozat után, de neincs. Mindenki csak ígéri..:(Nálad lesz, vagy ez az egyetlen prósza volt csak?
   
   
6. Keveqiah - 2011. okt. 16. 18:09
   Lesz lesz.. csak mint a főoldalon is olvasható, sajnálatos módon magánéleti problémák miatt az oldal szerkesztését felfüggesztetem. De ettől függetlenül nincs semmi elhanyagolva, éppen csak a gondolataimat kell rendezni és lesznek új cikkek, leírások. :) (Van is már néhány félész verzió, csak át kéne nézni őket.)
   
   

Szólj hozzá