Zvětším toto a zmenším tamto...
S tím, jak se i rozsáhlejší aplikace přesouvají na web, roste samozřejmě také potřeba přizpůsobovat si prostředí aplikací. Jedním z takových přizpůsobování je změna rozměrů různých prvků. Uživatelsky nejpřirozenější je měnit rozměry myší – prostě se uchopí některá hrana prvku nebo jeho roh a popotáhne se podle potřeby.
Podporu pro tento druh interakcí poskytuje v jQuery UI widget Resizable. Se změnami rozměrů je to podobné jako s posouváním – snadno se aktivují a lze je ovládat podle potřeby. Začněme tím úplně nejjednodušším, prostým umožněním měnit velikost obrázku. HTML bude vypadat takto:
<img src="image.jpg" alt="Obrázek" id="img">
Základní javascriptový kód, který umožní změny rozměrů, je velmi jednoduchý:
$('#img').resizable();
Tento kód použije výchozí nastavení. Rozměry lze měnit prakticky libovolně, ve všech směrech (všechny hrany a rohy), bez omezení poměru stran, od téměř nulové velikosti až prakticky bez horního limitu.
Složitější změny rozměrů
To ale není vždy to „pravé ořechové“, mnohdy chceme ovlivnit, jak se bude změna rozměrů chovat.
Nastavení mezí
Často se hodí nastavit meze „od – do“, protože příliš malý nebo velký prvek by nepřinesl nic pozitivního, naopak by komplikoval další práci. Lze omezit šířku i výšku, nastavit minimum i maximum.
var props = {
minWidth: 50,
maxWidth: 500,
minHeight: 50,
maxHeight: 300
};
$('#img').resizable(props);
Výše uvedený kód nastaví všechny meze, a to prostřednictvím objektu, který se předá metodě připravující widget. Kteroukoli mez lze vynechat (pokud není potřebná) nebo naopak změnit či přidat později:
$('#img').resizable("option", "maxHeight", 200);
Další možností je omezit maximální velikost hranicemi nějakého jiného objektu. Možností je více, tady jsou dva příklady:
$('#img').resizable({ containment: 'parent' });
$('#img').resizable({ containment: '#desktop' });
První příkaz omezí rozměry přímo nadřazeným objektem (rodičem). Podobně lze využít také řetězec „document“. Druhý příkaz využije selektor, který v tomto případě vybere objekt podle identifikátoru, lze ale použít prakticky cokoli. Místo selektoru lze předat jako parametr také instanci třídy Element.
Práce s poměrem stran
Zrovna u obrázků bývá výhodné implementovat změnu rozměrů tak, aby byl dodržen určitý poměr stran (aby se obrázek nedeformoval). Tady jQuery UI umožňuje využít dva mechanismy – dodržení původního poměru nebo explicitně definovaného poměru.
$('#img').resizable({ aspectRatio: true });
$('#img').resizable({ aspectRatio: 16/9 });
Smysl je z kódu snadno pochopitelný. První řádek zajistí dodržování původního poměru stran, druhý řádek pak bude udržovat poměr 16:9.
Tolerance, krok a zpoždění
Další sada parametrů umožňuje ovlivnit, jak se bude reagovat na akce uživatele. Ten může mít někdy v úmyslu udělat něco jiného, než by se stalo ve výchozím nastavení. Například může chtít jen na něco kliknout, místo aby změnil velikost. Nebo může chtít snadno nastavit nějaké prvky stejně velké, což se mu běžně nemusí podařit.
První dva problémy řeší tolerance a zpoždění. Pokud nedojde ke změně rozměru o určený počet pixelů nebo změna nebude trvat určitou dobu (stanovenou v milisekundách), bude se ignorovat.
$('#img').resizable({ distance: 20, delay: 100 });
Pokud nebude rozměr změněn aspoň o 20 pixelů a současně změna nebude trvat nejméně 100 ms, velikost se nezmění. Druhý problém, tedy snazší nastavení nějakého konkrétního rozměru, lze řešit nastavením kroku (mřížky):
$('#img').resizable({ grid: [5, 5] });
V tomto příkladu bude krok v obou osách 5 pixelů. Hodnota se zadává jako dvourozměrné pole.
Změna rozměrů dalších objektů
Někdy se může hodit, aby se s přímo upravovaným objektem měnila i velikost nějakého dalšího (nebo více objektů). Je to jednoduché:
$('#phototmpl').resizable({ alsoResize: 'img.photo' });
Kód zajistí, že při změně daného obrázku se změní také velikost všech obrázků třídy „photo“. Místo selektoru lze použít také instanci tříd jQuery nebo Element.
Reakce na události
Podobně jako jiné interakce, také změna rozměrů generuje různé události, na které lze reagovat. Tento příklad ukazuje hned tři události najednou:
var props = {
start: function(e, ui) {
$('#status-op').text('Změna velikosti');
},
stop: function(e, ui) {
$('#status-op').text('');
},
resize: function(e, ui) {
$('#status-size').text(ui.size.width + ', ' + ui.size.height);
}
};
$('#img').resizable(props);
Při začátku změny rozměru se do operačního stavového pole nastaví, že probíhá změna velikosti, při ukončení se text zase odstraní. Během samotné změny se do velikostního stavového pole zapisují aktuální rozměry.
Widget Resizable toho umí ještě víc, například lze ovlivňovat animaci změny velikosti, upravovat zobrazení grafických prvků uvědomujících uživatele o možnosti změnit velikost objektu, vypnout/zapnout změnu velikosti apod. Podrobnosti najdete v dokumentaci.
Změna pořadí
V příštím dílu se podíváme na interakci, která opět souvisí s přetahováním objektů myší: na změnu pořadí prvků v seznamu nebo mřížce.