jQueryMobile şi localStorage (I)


Am avut curiozitatea de a vedea dacă se poate folosi localStorage pentru o webaplicaţie transformată în aplicaţie de mobil. Ei bine, se poate. Nu a fost doar curiozitatea ci chiar am avut nevoie pentru o webaplicaţie la care i-am făcut o pagină de setări. Opţiunile se salvează, aşa că atunci când omul redeschide aplicaţia Android îşi va regăsi configuraţia dorită de el. Cool! Spre ilustrare vă propun ceva simplu: o aplicaţie cu două pagini – prima afişează datele, care pot fi introduse din a doua pagină.

imagine

Amintesc că un ABC despre jQuery Mobile am făcut, mai exact vă invit să citiţi jQuery Mobile: de la pagină la pagini dacă reprezintă o problemă structura unei pagini (pentru strict o pagină vedeţi aici). Bazele fiind puse, mai rămâne de văzut pe moment cum definim formularul. Răspunsul stă în liniile de la 46 la 73. Documentaţia oficială despre formulare în jQuery Mobile se găseşte aici. După cum observaţi, nu este foarte greu ca să ai un formular chiar aspectuos. În fine, dincolo de partea HTML am pus doar câteva linii de JavaScript, pe care le explic puţin. În primul rând în jQuery Mobile punctul de plecare nu este $(document).ready() ci $(document).on(‘pageinit’) – detalii aici. În rest liniile de la 12 ce fac e să intercepteze trimiterea formularului, afişând un scurt mesaj şi dând false ca să nu se continue spre pagina de altfel inexistentă de submitere. Dezvoltăm codul într-un alt articol. Ce e mai jos se poate vedea online aici.

<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>Date despre tine</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript">
        $(document).on('pageinit',function(){
            $("#formular").submit(function(){
                alert("Trimis!");
                return false;
            });
        });
    </script>    
</head> 
<body> 
<!-- Pagina de inceput -->
<div data-role="page" id="afisare">
	<div data-role="header" data-theme="b">
		<h1>Afişare</h1>
	</div><!-- /header -->
	<div data-role="content" data-theme="d">
		<h2>Salut!</h2>
		<p>Despre tine ştiu următoarele...</p>
	</div><!-- /content -->
	<div data-role="footer" data-theme="b">
        <div data-role="navbar">
    		<ul>
    		  <li><a href="#afisare" data-icon="home">Start</a></li>
              <li><a href="#formular" data-icon="gear">Configurare</a></li>
    		</ul>
        </div>
	</div><!-- /footer -->
</div><!-- /pagina start -->

<!-- Pagina cu formularul -->
<div data-role="page" id="formular" data-theme="a">
	<div data-role="header" data-theme="b">
		<h1>Formular</h1>
	</div><!-- /header -->
	<div data-role="content" data-theme="d">	
		<h2>Despre tine</h2>
		<form action="#" mmethod="post" id="formular">
        <div data-role="fieldcontain">
            <label for="nume">Nume prenume:</label>
            <input type="text" name="nume" id="nume" value=""  />
		</div>
        <div data-role="fieldcontain">
            <fieldset data-role="controlgroup" data-type="horizontal">
                <legend>De sex:</legend>
                <input type="radio" name="sex" id="masculin" value="masculin" checked="checked" />
                <label for="masculin">masculin</label>
                <input type="radio" name="sex" id="feminin" value="feminin" />
                <label for="feminin">feminin</label>
            </fieldset>
        </div>
		<div data-role="fieldcontain">
            <label for="oras" class="select">Născut în:</label>
            <select name="oras" id="oras">
                <option value="Bucureşti">Bucureşti</option>
                <option value="Iaşi">Iaşi</option>
                <option value="Cluj">Cluj</option>
                <option value="Timişoara">Timişoara</option>
            </select>
        </div>
        <fieldset class="ui-grid-a">
            <div class="ui-block-a"><button type="submit" data-theme="a">Anulare</button></div>
            <div class="ui-block-b"><button type="submit" data-theme="b">Trimitere</button></div>
	    </fieldset>
        </form>	
	</div><!-- /content -->
	<div data-role="footer" data-theme="b">
        <div data-role="navbar">
    		<ul>
    		  <li><a href="#afisare" data-icon="home">Start</a></li>
              <li><a href="#formular" data-icon="gear">Configurare</a></li>
    		</ul>
        </div>
	</div><!-- /footer -->
</div><!-- /pagina formular -->
</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *