Tym razem chciałbym przedstawić trochę zapisków o bibliotece jQuery UI (pierwsza część). HTML dawniej nie lubiałem z uwagi na brak większości popularnych bardziej złożonych kontrolek, które by się dało łatwo stylować i konfigurować. Również dzisiaj w samym czystym HTML5 też jeszcze takich komponentów raczej nie ma (choć pojawia się trochę nowych kontrolek rysowanych przez przeglądarki do nowych typów <input>, progress, listę z danymi, itd.). Ale jak spojrzałem na widgety oferowane przez jQuery UI, to muszę przyznać jestem pod wrażeniem, z jednej strony prostoty, z drugiej strony łatwości używania, konfigurowania, stylowania, obsługą themes! To jest to! W tym temacie mam nie tylko skojarzenia z XAML (np. Silverlight, Windows 8) ale i z WinJS (Windows 8), tak więc nie mogło obejść się bez komentarzy z mojej strony.
- css/ui-lightness/jquery-ui-x.y.z.custom.css
- js/jquery-a.b.c.min.js
- js/jquery-ui-x.y.z.custom.min.js
Kontrolki !!! (widgets)
Accordion, Tabs, Dialog, …
<div id=”accordion”>
<div>
<h3>header 1</h3>
<div>content 1</div>
</div>
<div>
<h3>header 2</h3>
<div>content 2</div>
</div>
<div>
<h3>header 3</h3>
<div>content 3</div>
</div>
</div>
$(“#accordion”).accordion({ header: “h3”}); //aktywacja kontrolki accordion na danym <div>
Aby osadzić kontrolkę operujemy na wskazanym <div>, który powinien zawierać w sobie odpowiednią strukturę. Jest to bardzo intuicyjne. W WinJS jest podobnie, ale tam zdaje się nie tworzyło się rozbudowanych w środku <div>, a parametry mogą być przekazywane w sposób deklaratywny za pomocą dedykowanego atrybutu.
Stylowanie kontrolek - obsługa themes
ThemeRoller - ustawianie parametrów i podgląd, galeria, download
dostajemy folder z nazwą themy, w którym zawarta jest tak samo nazwany plik CSS + folder z grafiką
Stylowanie i szablonowanie kontrolek od zawsze jeden z największych dobrodziejstw XAML. Tutaj stylowanie polega na podmianie odpowiednich stylów CSS. Podobnie zrealizowano to w WinJS, choć tam zdaje się rozszerzono selektory dla CSS i można też stylować także prymitywne kontrolki np. kolor krzyżyka w polu tekstowym. A jak jest z szablonami?
Opcje, zdarzenia
$(‘#dialog’).dialog({
beforeClose: function() {
alert(‘Before Close’);
return false; //blokuje zamknięcie okna
},
autoOpen: false,
with: 500,
modal: true,
buttons: {
“Ok”: function() {
$(this).dialog(“close”);
},
“Cancel”: function() {
$(this).dialog(“close”);
}
}
});
Zdarzenia można też obsługiwać przez bind()
Zdarzenia jako parametry w obiekcie konfiguracyjnym lub funkcję bind() z podstawowego jquery. Bardzo prosta i intuicyjna obsługa. Okno dialogowe z logiką można zdefiniować w jednym obiekcie.
Metody - o nazwie kontrolki z pierwszym parametrem będącym nazwą komendy
.dialog(“open”);
.dialog(“close”);
.dialog(“disable”);
.dialog(“enable”);
.dialog(“option”, options)
Metody są ok, choć zastanawia mnie czemu wybrano przekazywanie ich jako string. Zawsze można popełnić tutaj literówkę.
UI Widgets
1. Dialog
<div id=”dialog” title=”Title”>
<p>Message</p>
</div>
$(function() {
$(“#dialog).dialog({ autoOpen: false });
$(“#button”).click(function() {
$(“#dialog).dialog(“open”);
});
});
Opcje: modal, resizable, draggable - logiczne, position: “top”, itd.
Kontrolka powstała, by obejść systemowe okno komunikatu wywoływane funkcją alert. Swego w jednym projekcie robiliśmy coś takiego w jednym projekcie odpowiednio stylując ChildWindow w Silverlight. Windows 8 też ma swoje nowe okno dialogowe.
2. Progressbar
<div id=”progress”></div>
$(‘#progress’).progressbar({ value: 40 });
CSS:
.ui-progressbar {
height: 10px;
}
.ui-progressbar-value {
background-image: url(“xxx.gif”);
}
var value = 100;
function countdown() {
value-- ;
$(“#progress”).progressbar(“option”, “value”, value);
$(“#countdown”).text(value);
if (value > 0) {
setTimeout(countdown, 100);
}
else {
$(“#countdown”).text(“finished”);
$(“#progress”).hide();
}
}
W HTML5 mamy już <progress>. Po co jquery ma własny do tego komponent? Ale pamiętajmy, że jQuery było wcześniej, poza tym daje łatwe stylowanie. W Windows 8 w HTML5 zdaje się dla pasków postępu jest używany właśnie standardowy <progress> odpowiednio ostylowany. Czy kontrolki rysowane przez przeglądarki można dowolnie stylować?
3.Slider
<div id=”slider”></div>
$(“#slider”).slider({ min:0, max:100, value:100, slide: function (event, ui) {
$(“#label”).css({ opacity: ui.value/100});
} });
W HTML5 jest zdaje się <meter>, ale pojawiają się tu podobne pytania jak wcześniej przy tego typu duplikacjach. WinJS też ma zdaje się swoją kontrolkę.
4.Tabs
<div id=”tabs”>
<ul>
<li><a href=”#tab1”>tab1</a></li>
<li><a href=”#tab2”>tab2</a></li>
<li><a href=”#tab3”>tab3</a></li>
<li><a href=”page.htm”>tab4</a></li>
</ul>
<div id=”tab1”>
<p>content1</p>
</div1>
<div id=”tab2”>
<p>content2</p>
</div1>
<div id=”tab3”>
<p>content3</p>
</div1>
</div>
$(“#tabs).tabs();
Kontrolka z tabami zawsze bardziej kojarzyła mi się z aplikacjami desktopowymi, choć w webowych też nawet dość często można ją spotkać. Bardzo fajny komponent, nic dodać, nic ująć. WinJS kierując się filozofią Metro nie oferuje takiej kontrolki. W Silverlight desktopowym taki komponent oczywiście też jest.
5. Accordion
$(‘#accordion’).accordion();
Opcje
- autoHeight: bool - automatyczna wysokość zakładek,
- collapsable: bool - zamykanie wszystkich zakładek
Zdarzenia
- change
Metody
- accordion(“activate”, false);
- accordion(“activate”, 1); //aktywacja drugiej zakładki (po załadowaniu)
- accordion(“activate”, “#b”); //aktywacja sekcji o podanym id (po załadowaniu)
Pierwsze skojarzenie dla mnie - taka kontrolka jest w Silverlight Toolkit. Tutaj może prostsza, ale robi wrażenie.
6. Autocomplete
<div>
<label for=”search”>Search</label>
<input id=”search” type=”text” />
</div>
var items = [“item 1”, “item 2”, “item 3”, …];
$(“#search”).autocomplete( {
source: items //lub adres zdalny np. “productsjson.ashx”,
minLength: 2, //minimalna liczba znaków potrzebna do wpisania
delay: 1500 //czas w ms dla rozpoczęcia requestu
});
Gdy mamy { value: “value1”, label: “label1” } w podpowiedziach wyświetlane są wartości label, po wybraniu wyświetla się wartość value
Taka kontrolka jest w Silverlight i muszę przyznać, że obsługa kontrolki jQuery jest jakby nawet bardziej prosta i intuicyjna.
7. Button //stylowany button o wyglądzie niezależnym od rodzaju elementu
<div id=”buttons”>
<button>button</button>
<input type=”submit” value=”save”/>
<a href=”#”>link</a>
</div>
$(“#buttons”).children()
.button({icons: {primary: “icon1”, secondary: “icon2”}})
.click(function (){
alert($(this).val());
});
W theme jQuery zasoby z obrazkami o postaci:
.ui-icon { …, background-image: url(images/ui-icon.png); }
stosowane są też CSS Sprites
<div id=”radios”>
<input type=”radio” id=”option1” name=”option”/><label for=”option1”>Option1</label>
<input type=”radio” id=”option2” name=”option”/><label for=”option2”>Option2</label>
<input type=”radio” id=”option2” name=”option”/><label for=”option2”>Option2</label>
</div>
<div id=”checks”>
<input type=”checkbox” id=”option1” name=”option”/><label for=”option1”>Option1</label>
<input type=”checkbox” id=”option2” name=”option”/><label for=”option2”>Option2</label>
<input type=”checkbox” id=”option2” name=”option”/><label for=”option2”>Option2</label>
</div>
$(“#radios”).buttonset(); //przypina stylowane “normalne” przyciski zachowujące się jak radio
$(“#checks”).buttonset(); //analogicznie z zachowaniem check
Stylowany button, tego chyba zawsze brakowało. HTML dostarcza kilka kontrolek, ale czy np. przycisk przeglądarki można dowolnie stylować?
8. DatePicker
<div>
<input type=”text” id=”dateselection” />
</div>
$(“#dateselection”).datepicker(“setDate”, new Date(2012, 5, 15));
Lokalizacja: development-bundle/ui/i18n/jquery.ui.datepicker-xx.js - skrypty ustawiające odpowiednie opcje np. nazwy dni, przycisków, format daty
Opcje
- showAnim: “bounce”,
- numberOfMonths
- showWeek //numer tygodnia z lewej
- changeMonth
- changeYear
- showButtonPanel //dolny panel
- minDate
- maxDate
Pole <input> dla daty i czasu wprowadza HTML5, nie określając jak te kontrolki mają wyglądać. Wszystko więc w rękach producentów przeglądarek. JQuery oferuje własny komponent. WinJS w Windows 8 używa systemowej kontrolki.
Wigdety w jQuery UI robią wrażenie. Mogłoby ich być jeszcze więcej np. DataGrid. Cały czas pojawia mi się też pytanie o natywne kontrolki z HTML5, które czasami się dublują.
Posty
Brak komentarzy:
Prześlij komentarz