A kiválasztott változat és az aktuális verzió közötti különbségek a következők.
Előző változat mindkét oldalon Előző változat | |||
oktatas:web:jquery:jquery_mobil [2022/02/12 09:49] admin eltávolítva |
— (aktuális) | ||
---|---|---|---|
Sor 1: | Sor 1: | ||
- | [[oktatas:web:jquery|< jQuery]] | ||
- | |||
- | ====== jQuery Mobil ====== | ||
- | |||
- | * **Szerző:** Sallai András | ||
- | * Copyright (c) Sallai András, 2014, 2016 | ||
- | * Licenc: GNU Free Documentation License 1.3 | ||
- | * Web: http://szit.hu | ||
- | |||
- | ===== Bevezetés ===== | ||
- | |||
- | A bevezetést a jQuery Mobile segítségével készítettem el. Az alábbi linkre kattintva érhető el: | ||
- | |||
- | * http://szit.hu/jm/ (jQuery Mobile-al készített, mobilra szánt verzió) | ||
- | |||
- | Vagy itt keretben: | ||
- | |||
- | <html> | ||
- | <iframe sandbox="allow-scripts" src="https://szit.hu/jm/" width="300" height="500"></iframe> | ||
- | </html> | ||
- | |||
- | ===== Alap ===== | ||
- | |||
- | A következőkben egy kétoldalas egyszerű mobilfelületet látunk. | ||
- | |||
- | <code html index.html> | ||
- | <!DOCTYPE html> | ||
- | <html> | ||
- | <head> | ||
- | |||
- | <meta charset="utf-8" /> | ||
- | <title>JQM</title> | ||
- | |||
- | |||
- | <link href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" | ||
- | rel="stylesheet" type="text/css" /> | ||
- | <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> | ||
- | <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> | ||
- | |||
- | </head> | ||
- | <body> | ||
- | | ||
- | | ||
- | <div data-role="page" id="az1"> | ||
- | | ||
- | <div data-role="header"><h1>Fejrész</h1></div> | ||
- | | ||
- | <div role="main" class="ui-content"> | ||
- | A te legjobb oldalad | ||
- | <a href="#az2" data-role="button">Második oldal</a> | ||
- | </div> | ||
- | |||
- | <div data-role="footer">Has</div> | ||
- | |||
- | </div> | ||
- | | ||
- | |||
- | <div data-role="page" id="az2"> | ||
- | | ||
- | <div data-role="header"><h1>Másik oldal fejrész</h1></div> | ||
- | | ||
- | <div role="main" class="ui-content"> | ||
- | A másik weboldal | ||
- | <a href="#az1" data-role="button">Vissza</a> | ||
- | </div> | ||
- | |||
- | <div data-role="footer">Has</div> | ||
- | |||
- | </div> | ||
- | |||
- | |||
- | | ||
- | </body> | ||
- | </html> | ||
- | </code> | ||
- | |||
- | A mobilon megjelenő két oldal valójában egyetlen weblapon van. | ||
- | A két weboldalt egy-egy div elem tartalmazza. Egy oldal kezdete a | ||
- | data-role="page" attribútumú div-el kezdődik. | ||
- | |||
- | |||
- | ===== Linkek ===== | ||
- | |||
- | * http://jquerymobile.com/ | ||
- | * http://w3schools.com/jquerymobile/ | ||