[[oktatas:bemutató|< Bemutató]]

====== Jmpress.js ======

  * **Szerző:** Sallai András
  * Copyright (c) 2013, Sallai András
  * Szerkesztve: 2013, 2014
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== Bevezetés =====

A jmpress.js a jQuery alapú bemutató készítő keretrendszer.
Egy dián belül képes az egyes szövegrészek külön-külön beúsztatására is.
Beállíthatók billentyűkódok. 



===== Indulás =====

Elkészítjük a gyökérelemet:

<code html>
<div id="jmpress">

</div>
</code>


Hozzáadjuk a scriptek meghívását:
<code html>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jmpress.js"></script>
<script>
$("#jmpress").jmpress();
</script>
</code>

Az utolsó script elemek között hívjuk meg a jmpress-t, a jmpress azonosítójú elemre. 
Az elem azonosítója, természetesen más is lehet.


===== Diák =====

<code html>
<div id="jmpress">
    <div id="dia1" class="step">Dia 1</div>
    <div id="dia2" class="step">Dia 2</div>
</div>
</code>

===== Egy dia lehetséges beállításai =====

<code html>
<div id="dia1" class="step" 
        data-x="3500" data-y="-850" 
        data-rotate="270" data-scale="6">
    Dia 1
</div>
</code>


^  Attribútum  ^  Leírás  ^
| data-x | Derékszögű koordináta: x pozíció |
| data-y | Derékszögű koordináta: y pozíció |
| data-z | Derékszögű koordináta: z pozíció |
| data-r | Sarok koordináta rendszer: rádiusz |
| data-phi | Sarok koordináta rendszer: szög (indulás felülről az óra járásával megegyezően).  |
| data-scale | Az elemke aránya (scale-y, scale-y, scale-z is). |
| data-rotate | A forgatás foka. |
| data-rotate-x | Forgatás szöge x tengely körül. |
| data-rotate-y | Forgatás szöge y tengely körül. |
| data-rotate-z | Forgatás szöveg z tengely körül. |
| data-delegate | Aktivitás egy másik szelektorhoz rendelése. |
| data-src | Dinamikus tartalom betöltése. |
| data-exclude | Ne használd a következő lépést, de követheted az parancs irányát |
| data-next | A következő lépés szelektora |
| data-prev | Az előző lépés szelektora |
| data-template | Apply a template, which must be defined before init jmpress. |
| data-jmpress | Egyéni animáció alkalmazása |


===== Link =====
  * http://jmpressjs.github.io/jmpress.js (Weboldal)
  * http://jmpressjs.github.io/docs/ (Dokumentáció)