jquery

JQuery Mobile – Liste

Lezione #id-jqmobile-2013-0009#

JQuery Mobile mette a disposizione degli attributi pensati apposta per gli elenchi non ordinati (ul) e ordinati (ol).

Vediamo la sintassi di base:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">

	<ul data-role="listview">
   		<li>Acura</li>
    		<li>Audi</li>
    		<li>BMW</li>
    		<li>Cadillac</li>
    		<li>Ferrari</li>
	</ul>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Agli elenchi non ordinati assegnamo l’attributo: ul data-role=”listview”

Agli elenchi ordinati assegnamo l’attributo: ol data-role=”listview”

Altri attributi:

data-inset=”true” -> true o false -> attiva e disattiva i bordi arrotondati

data-filter=”true” data-filter-placeholder=”Search fruits…” -> true o false -> nasconde gli elementi – li – in tempo reale durante la ricerca

data-filter=”true” data-filter-reveal=”true” data-filter-placeholder=”Search fruits…” -> true o false -> mostra gli elementi – li – in tempo reale durante la ricerca

data-role=”list-divider” -> aggiunge un divisorio

data-autodividers=”true” -> aggiunge un divisorio colorato

span class=”ui-li-count”>12 -> aggiunge un contatore (Count bubbles)

data-icon=”gear” -> aggiunge un’unicona standard

Per aggiungere icona personalizzata 16×16

<li><a href="#"><img src="../../_assets/img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>

Per aggiungere una miniatura 80×80 px

    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>

Bottoni con separazione, notare che lo split può avere un tema differente dal resto dell’elemento.

<ul data-role="listview" data-split-icon="gear" data-split-theme="d">

Un listato di esempio con altre variazioni sul tema:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
<p>Elenco non ordinato</p>	
<ul data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ul>

<p>Elenco ordinato</p>	
<ol data-role="listview">
    <li>Acura</li>
    <li>Audi</li>
    <li>BMW</li>
    <li>Cadillac</li>
    <li>Ferrari</li>
</ol>

<p>Linked</p>
<ul data-role="listview">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Inset</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Filter</p>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

<p>Filter Reveal</p>
<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search fruits..." data-inset="true">
    <li><a href="#">Apple</a></li>
    <li><a href="#">Banana</a></li>
    <li><a href="#">Cherry</a></li>
    <li><a href="#">Cranberry</a></li>
    <li><a href="#">Grape</a></li>
    <li><a href="#">Orange</a></li>
</ul>

<p>Divider</p>
<ul data-role="listview" data-inset="true" data-divider-theme="d">
    <li data-role="list-divider">Mail</li>
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Outbox</a></li>
    <li data-role="list-divider">Contacts</li>
    <li><a href="#">Friends</a></li>
    <li><a href="#">Work</a></li>
</ul>

<p>Autodividers</p>
<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
    <li><a href="index.html">Adam Kinkaid</a></li>
    <li><a href="index.html">Alex Wickerham</a></li>
    <li><a href="index.html">Avery Johnson</a></li>
    <li><a href="index.html">Bob Cabot</a></li>
    <li><a href="index.html">Caleb Booth</a></li>
    <li><a href="index.html">Christopher Adams</a></li>
    <li><a href="index.html">Culver James</a></li>
</ul>

<p>Count Bubbles</p>
<ul data-role="listview" data-count-theme="c" data-inset="true">
    <li><a href="#">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="#">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="#">Drafts <span class="ui-li-count">4</span></a></li>
    <li><a href="#">Sent <span class="ui-li-count">328</span></a></li>
    <li><a href="#">Trash <span class="ui-li-count">62</span></a></li>
</ul>

<p>Icons 16x16</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#"><img src="img/gf.png" alt="France" class="ui-li-icon ui-corner-none">France</a></li>
    <li><a href="#"><img src="img/de.png" alt="Germany" class="ui-li-icon">Germany</a></li>
</ul>

<p>Thumbnails automatic resize 80x80 px</p>
<ul data-role="listview" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Content</h2>
        <p>Content</p></a>
    </li>
</ul>

<p>Split Buttons</p>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="true">
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Broken Bells</h2>
        <p>Broken Bells</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Warning</h2>
        <p>Hot Chip</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
    <li><a href="#">
        <img src="img/firefox-logo.png">
        <h2>Wolfgang Amadeus Phoenix</h2>
        <p>Phoenix</p></a>
        <a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
    </li>
</ul>
<div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
    <h3>Purchase Album?</h3>
    <p>Your download will begin immediately on your mobile device when you purchase.</p>
    <a href="index.html" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
    <a href="index.html" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
</div>

<p>Formatted content</p>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
    <li><a href="index.html">
        <h2>Stephen Weber</h2>
        <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
        <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
        <p class="ui-li-aside"><strong>6:24</strong>PM</p>
    </a></li>
    <li><a href="index.html">
        <h2>jQuery Team</h2>
        <p><strong>Boston Conference Planning</strong></p>
        <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
        <p class="ui-li-aside"><strong>9:18</strong>AM</p>
    </a></li>
    <li data-role="list-divider">Thursday, October 7, 2010 <span class="ui-li-count">1</span></li>
    <li><a href="index.html">
        <h2>Avery Walker</h2>
        <p><strong>Re: Dinner Tonight</strong></p>
        <p>Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait! </p>
        <p class="ui-li-aside"><strong>4:48</strong>PM</p>
    </a></li>
</ul>

<p>Themes</p>
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="b">
    <li data-role="list-divider">Divider</li>
    <li><a href="index.html" data-theme="e">Inbox <span class="ui-li-count">12</span></a></li>
    <li><a href="index.html">Outbox <span class="ui-li-count">0</span></a></li>
    <li><a href="index.html">Sent <span class="ui-li-count">328</span></a></li>
</ul>

<p>No white icon sprite</p>
<ul data-role="listview" data-inset="true" class="ui-icon-alt">
    <li><a href="#">Acura</a></li>
    <li><a href="#">Audi</a></li>
    <li><a href="#">BMW</a></li>
    <li><a href="#">Cadillac</a></li>
    <li><a href="#">Ferrari</a></li>
</ul>

<p>Forms</p>
<form>
    <ul data-role="listview" data-inset="true">
        <li data-role="fieldcontain">
            <label for="name2">Text Input:</label>
            <input type="text" name="name2" id="name2" value="" data-clear-btn="true">
        </li>
        <li data-role="fieldcontain">
            <label for="textarea2">Textarea:</label>
        <textarea cols="40" rows="8" name="textarea2" id="textarea2"></textarea>
        </li>
        <li data-role="fieldcontain">
            <label for="flip2">Flip switch:</label>
            <select name="flip2" id="flip2" data-role="slider">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select>
        </li>
        <li data-role="fieldcontain">
            <label for="slider2">Slider:</label>
            <input type="range" name="slider2" id="slider2" value="0" min="0" max="100" data-highlight="true">
        </li>
        <li data-role="fieldcontain">
            <label for="select-choice-1" class="select">Choose shipping method:</label>
            <select name="select-choice-1" id="select-choice-1">
                <option value="standard">Standard: 7 day</option>
                <option value="rush">Rush: 3 days</option>
                <option value="express">Express: next day</option>
                <option value="overnight">Overnight</option>
            </select>
        </li>
        <li class="ui-body ui-body-b">
            <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </fieldset>
        </li>
    </ul>
</form>


	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile – Liste
Read More

JQuery Mobile Corso OnLine – Form Elements

Lezione #id-jqmobile-2013-0010#

JQuery mobile ci permette di arricchire di nuove funzioni tutti gli elementi tipici di un form.

ATTENZIONE: gli id che identificano gli elementi dei form devono essere univoci, non solo all’interno della pagina, ma in tutto il sito. Questo è necessario perchè JQuery Mobile permette di inserire contemporaneamente più pagine all’interno dello stesso DOM. La navigazione AJAX viene gestita in modo differente rispetto ad HTML5 standard.

Qui sotto un pò di codice raccolto dal sito ufficiale già pronto da copiare ed incollare :)

Vedi il codice in azione! >

Ecco il listato della pagina linkata sopra:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
	

<label for="textinput-2">Text Input:</label>
<input name="textinput-2" id="textinput-2" placeholder="Text input" value="" type="text">

<label for="search-2">Search Input:</label>
<input name="search-2" id="search-2" value="" type="search">

<label for="textarea-2">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-2" id="textarea-2">Textarea</textarea>

<label for="select-native-2">Native select:</label>
<select name="select-native-2" id="select-native-2">
    <option value="small">One</option>
    <option value="medium">Two</option>
    <option value="large">Three</option>
</select>

<label for="select-multiple-2">Custom multiple select:</label>
<select multiple="multiple" data-native-menu="false" name="select-multiple-2" id="select-multiple-2">
    <option value="">Choices:</option>
    <option value="small">One</option>
    <option value="medium">Two</option>
    <option value="large">Three</option>
</select>

<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, buttons:</legend>
    <button data-icon="home" data-iconpos="right">One</button>
    <input data-icon="back" data-iconpos="right" value="Two" type="button">
    <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, buttons:</legend>
    <button data-icon="home" data-iconpos="right">One</button>
    <input data-icon="back" data-iconpos="right" value="Two" type="button">
    <a href="#" data-role="button" data-icon="grid" data-iconpos="right">Three</a>
</fieldset>

<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, select:</legend>
    <label for="select-v-2a">Select A</label>
    <select name="select-v-2a" id="select-v-2a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-v-2b">Select B</label>
    <select name="select-v-2b" id="select-v-2b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-v-2c">Select C</label>
    <select name="select-v-2c" id="select-v-2c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, select:</legend>
    <label for="select-h-2a">Select A</label>
    <select name="select-h-2a" id="select-h-2a">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-2b">Select B</label>
    <select name="select-h-2b" id="select-h-2b">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
    <label for="select-h-2c">Select C</label>
    <select name="select-h-2c" id="select-h-2c">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, mixed:</legend>
    <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Link</a>
    <button data-icon="grid" data-iconpos="notext">Button</button>
    <label for="select-v-2e">Select</label>
    <select name="select-v-2e" id="select-v-2e">
        <option value="#">One</option>
        <option value="#">Two</option>
        <option value="#">Three</option>
    </select>
</fieldset>
<p>Slider:</p>
<label for="slider-2">Slider:</label>
<input name="slider-2" id="slider-2" value="50" min="0" max="100" data-highlight="true" type="range">

<div data-role="rangeslider">
    <label for="range-1a">Rangeslider:</label>
    <input name="range-1a" id="range-1a" min="0" max="100" value="40" type="range">
    <label for="range-1b">Rangeslider:</label>
    <input name="range-1b" id="range-1b" min="0" max="100" value="80" type="range">
</div>

<label for="flip-2">Flip toggle:</label>
<select name="flip-2" id="flip-2" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

<fieldset data-role="controlgroup">
    <legend>Single checkbox:</legend>
    <label for="checkbox-2">I agree</label>
    <input name="checkbox-2" id="checkbox-2" type="checkbox">
</fieldset>

<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, checkbox:</legend>
    <input name="checkbox-v-2a" id="checkbox-v-2a" type="checkbox">
    <label for="checkbox-v-2a">One</label>
    <input name="checkbox-v-2b" id="checkbox-v-2b" type="checkbox">
    <label for="checkbox-v-2b">Two</label>
    <input name="checkbox-v-2c" id="checkbox-v-2c" type="checkbox">
    <label for="checkbox-v-2c">Three</label>
</fieldset>

<fieldset data-role="controlgroup">
    <legend>Vertical controlgroup, radio:</legend>
    <input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
    <label for="radio-choice-v-2a">One</label>
    <input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
    <label for="radio-choice-v-2b">Two</label>
    <input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
    <label for="radio-choice-v-2c">Three</label>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, checkbox:</legend>
    <input name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
    <label for="checkbox-h-2a">One</label>
    <input name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
    <label for="checkbox-h-2b">Two</label>
    <input name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
    <label for="checkbox-h-2c">Three</label>
</fieldset>

<fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Horizontal controlgroup, radio:</legend>
    <input name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked" type="radio">
    <label for="radio-choice-h-2a">One</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2b" value="off" type="radio">
    <label for="radio-choice-h-2b">Two</label>
    <input name="radio-choice-h-2" id="radio-choice-h-2c" value="other" type="radio">
    <label for="radio-choice-h-2c">Three</label>
</fieldset>

<label for="submit-2">Send:</label>
<button type="submit" id="submit-2">Submit</button>

	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
	
</div><!-- /page -->

</body>

</html>

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso OnLine – Form Elements
Read More

Corso Base OnLine JQuery Mobile – Fissare header e footer

Lezione #id-jqmobile-2013-0015#

JQuery Mobile ci permette di fissare header e footer della nostra pagina con l’attributo data-position=”fixed”.

Vediamo il codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>

<div data-role="page" id="one">

	<div data-role="header" data-position="fixed">
		<h1>Page Header FIXED</h1>
	</div><!-- /header -->

	<div data-role="content">
<p>
Lorem ipsum dolor sit amet....
</p>		
	</div><!-- /content -->

	<div data-role="footer" data-position="fixed">
		<h4>Page Footer FIXED</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su Corso Base OnLine JQuery Mobile – Fissare header e footer
Read More

JQuery Mobile OnLine – Finestre di dialogo

Lezione #id-jqmobile-2013-0002#

JQuery Mobile permette di aprire una nuova pagina HTML come fosse una finestra di dialogo.

Vediamo il seguente codice:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>

<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#two" data-rel="dialog" data-transition="flip">two</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->

<div data-role="page" id="two">

	<div data-role="header">
		<h1>Page Two</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#one">Back to page one</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

<a href="#two" data-rel="dialog" data-transition="flip">two</a>

Al tag HTML – href – possiamo assegnare gli attributi:
data-rel=”dialog” -> apri il link come una finestra di dialogo

data-transition=”flip” per una transizione che capovolge
data-transition=”pop” per una transizione popup
data-transition=”slidedown” per una transizione che scorre verso il basso
etc…

Vedi tutte le transizioni disponibili >

data-close-btn=”right” per posizionare a destra il bottone di chiusura
data-close-btn=”none” per nascondere il bottone di chiusura

Nella finestra di dialogo per i link generati da JavaScript si può tornare alla pagina precedente con la seguente sintassi:
href=”#” rel=”back”

Stili e temi:
data-corners=”false” per togliere i bordi arrotondati

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile OnLine – Finestre di dialogo
Read More

JQuery Mobile Corso Base – Cos’è JQuery Mobile – Struttura Pagine

Lezione #id-jqmobile-2013-0001#

JQuery Mobile è un framework in JavaScript basato su JQuery.

Vediamo la sintassi di base:

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
<!-- ################### -->
<!-- Start of first page -->
<!-- ################### -->

<div data-role="page" id="one">

	<div data-role="header">
		<h1>Page one</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm first in the source order so I'm shown as the page.</p>
		<p>View internal page called <a href="#two">two</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- #################### -->
<!-- Start of second page -->
<!-- #################### -->

<div data-role="page" id="two">

	<div data-role="header">
		<h1>Page Two</h1>
	</div><!-- /header -->

	<div data-role="content">
		<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
		<p><a href="#one">Back to page one</a></p>
	</div><!-- /content -->

	<div data-role="footer">
		<h4>Page Footer</h4>
	</div><!-- /footer -->
</div><!-- /page -->

</body>

</html>

Notiamo dal tag di apertura che si tratta di una pagina HTML5.

Prima di tutto scriviamo:

<meta name="viewport" content="width=device-width, initial-scale=1">

Questa istruzione evita che il browser del nostro dispositivo attivi lo zoom di default.
La larghezza della nostra pagina sarà uguale alla risoluzione del display content=”width=device-width, evitando di dover effettuare lo zoom a mano dei contenuti.

Poi carichiamo i framework e i fogli di stile:


	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
	<script src="js/jquery-1.9.1.min.js"></script>
	<script src="js/jquery.mobile-1.3.2.min.js"></script>

Il documento HTML può contenere una o più pagine. Se vi sono più pagine sarà visibile solo la prima in ordine di caricamento, quella più alta nel listato di codice.
Ogni pagina è delimitata da:

<div data-role="page" id="one">
...
</div>

All’interno di ogni pagina definiamo un header, un footer e un content. Non è una struttura obbligatoria, ma consigliata se si vuole che i fogli di stile di default del framework vengano applicati correttamente.

ATTENZIONE: gli id che identificano gli elementi dei form devono essere univoci, non solo all’interno della pagina, ma in tutto il sito. Questo è necessario perchè JQuery Mobile permette di inserire contemporaneamente più pagine all’interno dello stesso DOM. La navigazione AJAX viene gestita in modo differente rispetto ad HTML5 standard.

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso Base – Cos’è JQuery Mobile – Struttura Pagine
Read More