Szerző: vancso

Leendő formatervező.
Az FXdesignport alapító tagja.

Blind Effect

Induló fájlok letöltése    |    Végeredmény letöltése

Ezeket az előre elkészített hatásokat a Dreamweaver „TAG INSPECTOR” panelének „Behaviors” lapján található plusz gombra kattintva adhatjuk hozzá oldalunk elemeihez.

Adjunk is hozzá Blind hatást az első előre elkészített divünkhöz. Design nézetben kattintsunk divünk azon részére amelyet kattinthatóvá szeretnénk tenni, például a címszóra, majd a Behaviors panelen válasszuk a plusz gombot és a felugró menüben klikkeljünk az Effects, azaz hatás almenüpontban található Blind hatásra.
A Blind felugró ablak első lépéseként válasszuk ki divünket az ID azonosítója alapján, amelyre alkalmazni szeretnénk a hatást. Utána megadhatjuk a hatás időtartamát ezredmásodpercben, a típusát (bezáródó/ lenyíló), majd pedig a kezdeti és végső állapotainak méretét (százalékban / pixelben).

Ok –ra kattintva bekerülnek a forráskódba a szükséges SpryEffects.js javascript fájl meghívására szolgáló script tagek:

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

Valamint a divhez hozzáadódik egy onclick egérkattintás figyelés, minek köszönhetően a divre történő kattintással indulhat el a Blind hatás. Az indításra más egéreseményt, vagy akár billentyűleütést is választhatunk, a Behaviors panel, onclick-elemére kattintva egy felugró menüből.

Mentéskor egy Spry Assets könyvtár a meghívott SpryEffects.js javascript fájllal is mentésre kerül az oldalunk mappájába.

Amit így elértünk az egy összecsukható menüsor. Lássuk be ez így alapból még elég hasztalan, azonban egy pár soros kiegészítéssel a forráskódban, valamint a CSS stíluslapon már összecsukott állapottal is indulhat a menünk, melynek köszönhetően rengeteg helyet takaríthatunk meg az oldalunkon.

Összecsukott menü:
Ehhez nem kell mást tennünk, mint először is a stíluslapunkon megadjuk a divek kiinduló magasságát. A mellékelt példában a tartalom_container magasságát kell megadni:

.tartalom_container {
	margin-bottom: 0px;
	margin-top: 0px;
	padding-bottom: 0px;
	height:23px;
} 

A tényleges tartalom div magasságát érdemes auto-ra állítani, de ez az alapbeállítás is, így ha nem adunk meg magasságot a tartalom későbbi módosításakor sem érhet minket meglepetés. Persze ettől még az animált végső méretet hozzá kell majd igazítani. Magasság megadásakor arra kell figyelnünk, nehogy túlcsorduljon a szöveg.

Másodszor pedig ne az alap MM_effectBlind függvényt használjuk, hanem bátran írjunk sajátot, akár minden divhez más-más paraméterrel.
Például töröljük ki az alapként beillesztett MM_effectBlind -ot:

<script type="text/javascript">
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
	Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>

Most az átláthatóság és az összetartozás jobb felismerhetősége kedvéért nem a head tag-be írtam a scripteket, ahogy rendszerint kell, hanem az egyes divek után illesztettem be őket.

1 div-re alkalmazva a hatást:

<script type="text/javascript">
		var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});
	</script>

Nézzük meg mit is takar ez a pár sor:

- Először is meghatározásra kerül a script kód típusa, tehát jelzi a böngészők számára, hogy javascript következik:

<script type="text/javascript">

- El is érkeztünk a lényeges részhez. Itt meghatározzuk egy változóban a mozgásunk paramétereit. A változónkat elnevezzük blind1-nek, amely a Spry Effectet hívja meg a kívánt div-nél, tehát most a Tartalom 1div-re kattintáskor. Utána megadásra kerül a hatás hossza, az induló méret, majd a végső méret.

var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});

Végül pedig a divünk header részében az onclick eseménynél cseréljük ki a meghívást az MM_effectBlind-ról az újonnan beírt blind1-re:

<p class="header" onclick="blind1.start();">Tartalom 1</p>

3 div-re alkalmazva a hatást:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spry - Blind effect</title>
<link href="spry_effects_blind_close.css" rel="stylesheet" type="text/css" />

<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
</head>

<body>
<div id="Container">
  <div class="tartalom_container" id="Tartalom 1">
    <p class="header" onclick="blind1.start();">Tartalom 1</p>
    <p class="tartalom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

   <script type="text/javascript">
		var blind1 = new Spry.Effect.Blind('Tartalom 1', {duration: 2000, from: '23px', to: '100px', toggle: true});
	</script>

  <div class="tartalom_container" id="Tartalom 2">
    <p class="header" onclick="blind2.start();">Tartalom 2</p>
    <p class="tartalom"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

   <script type="text/javascript">
 var blind2 = new Spry.Effect.Blind('Tartalom 2', {duration: 500, from: '23px', to: '100px', toggle: true});
</script>

  <div class="tartalom_container" id="Tartalom 3">
    <p class="header" onclick="blind3.start();">Tartalom 3</p>
    <p class="tartalom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ut leo   tortor. Proin tristique, diam et vestibulum iaculis, neque erat   facilisis odio, in imperdiet velit erat nec massa. Fusce eget turpis   lorem, nec ultricies nibh. Nulla facilisi. Suspendisse potenti. Mauris   orci nibh, eleifend sit amet aliquet ultrices, rhoncus ac nisi. In   luctus hendrerit nunc, in pharetra nulla malesuada in. Nulla nisl felis,   tincidunt a tempor ut, fringilla ut metus.</p>
  </div>

  <script type="text/javascript">
 var blind3 = new Spry.Effect.Blind('Tartalom 3', {duration: 200, from: '23px', to: '100px', toggle: true});
</script>

</div>
</body>
</body>
</html>

Végül, de nem utolsó sorban tegyük láthatóvá a fejlécek kattinthatóságát a kurzor kézfejjé változásával, azaz a header CSS stílusához adjuk hozzá a cursor:pointer; tulajdonságot.

Ezeket ismerve már bátran variálhatjuk kedvünk szerint a menük működését.

Az eredmény: