Átméretezés (resize)

Olyan dobozt tudunk készíteni, melynek a méretét tudjuk változtatni. Példánkban a doboz jobb és alsó szélét megfogva tudjuk állítani a méretet. A doboz alatti rész lejjebb tolódik.

Hátránya, hogy a dobozba írt szöveget nem lehet kijelölni.

A szükséges állományok: ui.resizable.js, resizable.css.

Használata

Készítsünk egy div-et, melynek az id-je legyen example, az osztálya legyen ui-wrapper example. Ezután írhatunk bekezdéseket a dobozba. A dobozban lévő tartalom elhelyezkedése dinamikusan változik a méretváltozással. A dobozt a jobb oldalán, vagy az aljánál megragadva tudod átméretezni.

Forráskód

HTML

A head-ben hívjuk meg a szükséges fájlokat!

<script type="text/javascript" src="js/ui.resizable.js"></script>
<link rel="stylesheet" href="css/resizable.css" type="text/css" media="screen" />

A body-ban a következő kódrész szükséges.

<div id="example" class="ui-wrapper example">
	<p>Ezt a dobozt tudod átméretezni a jobb vagy az alsó szegélyénél fogva.
	A dobozban lévő tartalom helhelyezkedése dinamikusan változik a méretváltozással.</p>
	<p>Hibája, hogy nem tudod kijelölni a dobozban lévő szöveget.</p>
</div>

CSS

#example {
	background: #DDDDDD;
	overflow: hidden;
	height: 100px;
	width: 390px;
}

Példa

Forrás: jQuery.com/Resizables