Kontrolka button w jQuery UI

Ogólny trend rozwoju interfejsów aplikacji spycha je coraz bardziej w kierunku webowym. Zmieniają się dzięki temu developerzy i sposób postrzegania aplikacji. Lekkość aplikacji zaczyna być w cenie. Krowiaste applety Javy, przerośnięte Flashe zaczynają powoli ustępować lżejszym rozwiązaniom. Jednym z nich jest jQuery UI.

Czym jest jQuery UI

jQuery UI to mini-framework dla aplikacji po stronie klienta. Powstał on przy projekcie jQuery, a zespoły tych projektów są dość mocno zintegrowane – świadczy o tym m.in About jQuery, wspólna dokumentacja oraz tempo rozwoju. Zespół UI jest dodatkowo zrzeszony w Filament Group, pod szyldem którego publikuje całkiem często dość ciekawe artykuły bądź to opisując UI, Aria, bądź uzupełniając kontrolki o nowe i jednocześnie je omawiając. Na ich stronie nie znalazłem RSS’a, ale o nowościach zawsze wspominają na swoim Twitterowym profilu filamentgroup – którego kanał RSS sobie zasubskrybowałem w moim Google Readerze – rozwiązanie spisuje się dobrze

Za pomocą jQuery UI możemy przygotować graficzny interfejs naszej aplikacji webowej. Mamy do dyspozycji bibliotekę funkcji rozszerzających standardowe efekty o nowe, własne kontrolki, tematy graficzne (które możemy rozszerzać o własne) wraz z rewelacyjnie narysowanymi ikonkami, dostosowanymi do każdego z tematów. Żeby zobaczyć jak to wszystko wygląda w różnych standardowych tematach graficznych – przykładowy podgląd ThemeRoller.

Standardowa baza kontrolek (widget’ów) jest niewielka – kontrolka daty, okno dialogowe, progress bar, taby. Dodatkowych można się doszukać na SVN’ie w labsach albo poprzez wspomnianą wyżej stronę filamentgroup.

Wprowadzenie do jQuery UI w Twitterowym stylu

Do html’a naszej aplikacji załaczamy CSS z wybranego tematu jQuery UI oraz skrypty jQuery i jQuery UI – przykładowo:

<link href="theme/start/jquery-ui.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>

Mamy teraz dostępną całą paletę styli i narzędzi jQuery UI. Zarówno jedno jak i drugie jest bardzo łatwo rozszerzalne.

Jak to rozbudować?

Stworzymy sobie przycisk (ang. button) – przyda się nam omówiona w poprzednim wpisie biblioteka do generowania dynamicznego CSS. Tak mniej więcej wygląda początkowy szkielet aplikacji:

$(document).ready(function() {

    var self = this;
    self.css = new CSS('dynamic');
    //include('button.js');

});

Jak wszyscy wiemy, w JavaScript nie ma include. Można zrobić tak aby był, ale o tym napiszę niebawem. Póki co w jego miejsce możemy wstawić kod właściwej kontrolki.

// ui.button

self.css.replace('.cx-button',{
	'outline':'0',
	'margin':'0 4px 0 0',
	'padding':'.4em 1em',
	'text-decoration':'none !important',
	'cursor':'pointer',
	'position':'relative',
	'text-align':'center',
	'zoom':'1'
});
// remove extra button width in IE
self.css.replace('a.cx-button',{
	'float':'left'
});

(function($) {

$.widget('ui.button', {
	_init: function() {
		this.element
			.addClass('cx-button ui-state-default ui-corner-all')
			.hover(function() {
				if (! $(this).hasClass('ui-state-disabled')) {
					$(this).addClass('ui-state-hover');
				}
			},function() {
				$(this).removeClass('ui-state-hover');
			})
			.mousedown(function() {
				if (! $(this).hasClass('ui-state-disabled')) {
					$(this).addClass('ui-state-active');
				}
			})
			.mouseup(function() {
				$(this).removeClass('ui-state-active');
			})
			.disableTextSelect();
	},
	disabled: function() {
		this.element.addClass('ui-state-disabled');
	},
	enabled: function() {
		this.element.removeClass('ui-state-disabled');
	},
	destroy: function() {
		this.element
			.removeClass('cx-button ui-state-default ui-corner-all ui-state-hover ui-state-active ui-state-disabled')
			.unbind('mouseenter mouseleave');
	}
});

})(jQuery);

Takie właśnie przyciski zostały przeze mnie użyte na przykładowej stronie flatforma.appspot.com – należy najpierw przekliknąć się w accordeonie po lewej, a wtedy pojawią się przyciski, które dodają nowe zakładki. Dla leniwych zrzut ekranu:

Zachęcam do analizy przedstawionego w tym tekscie kodu – można go uznać za bazowy szkielet do tworzenia kontrolek.