Web Design

Corso OnLine JQuery Mobile – Temi

Lezione #id-jqmobile-2013-0008#

JQuery Mobile permette di applicare dei temi già pronti o di creare i propri temi personalizzati.

Di default il framework JQuery Mobile ci offre 5 temi identificati a / b / c / d / e

<!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">
        <a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
        <a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
        <a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
        <a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
        <a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
	</div><!-- /content -->

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

</body>

</html>

Per creare temi personalizzato possiamo utilizzare il Theme Roller.

1. Andate all’indirizzo:

http://jquerymobile.com/themeroller/! >

2. Cliccare su Get Rolling!

3. Dalla palette dei colori in alto trascinare il colore su un elemento dell’interfaccia.

4. Perfezionare con i comandi sulla colonna di sinistra

5. In alto cliccare su “Download Theme as .zip”

6. Scompattare ed editare a mano se necessario il foglio di stile CSS

7. Have fun!

Vedi il codice in azione! >

Il mio sito ufficiale >

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

JQuery Mobile Corso Base – Transizioni

Lezione #id-jqmobile-2013-0003#

JQuery Mobile fornisce effetti di transizione applicabili all’apertura di nuove pagine o all’invio da un form di dati.

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>
	
	<style type="text/css"> 
	table { width:100%; border-spacing: 0; }
	th { text-align:left; }
	th h3 { margin:.6em 0 .6em .5em; }
	th, td { vertical-align:top; border-top:1px solid #eee; padding: 1px 3px; background-color:#fcfcfc; }
	td .ui-btn { margin:.4em 0 .5em 0; }
	td .ui-btn-inner { padding: .4em 15px; }
	</style>
	
</head>
<body>

<table margin="0">
    <tbody><tr>
        <th><h3>fade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="fade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="fade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>pop</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="pop" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="pop" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flip</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flip" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flip" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>turn</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="turn" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="turn" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>flow</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="flow" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="flow" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidefade</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidefade" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidefade" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slide</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slide" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slide" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slideup</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slideup" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slideup" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>slidedown</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="slidedown" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="slidedown" data-inline="true">page</a></td>
    </tr>
    <tr>
        <th><h3>none</h3></th>
        <td><a href="id-jqmobile-2013-0003-page-transitions-dialog.html" data-role="button" data-rel="dialog" data-transition="none" data-inline="true">dialog</a></td>
        <td><a href="id-jqmobile-2013-0003-page-transitions-page.html" data-role="button" data-transition="none" data-inline="true">page</a></td>
    </tr>
</tbody></table>


</body>

</body>
</html>

Vedi il codice in azione! >

Prendiamo in considerazione la riga:

data-transition="slide"

Al tag HTML – href – possiamo assegnare un attributo per le transizioni con il valore:
data-transition=”fade” -> dissolvenza
data-transition=”pop” -> comparsa
data-transition=”flip” -> capovolgi
data-transition=”turn” -> svolta pagina
data-transition=”flow” -> la finestra si rimpicciolisce ed esce
data-transition=”slidefade” -> diapositiva + dissolvenza
data-transition=”slide” -> diapositiva da destra a sinistra
data-transition=”slideup” -> diapositiva verso l’alto
data-transition=”slidedown” -> diapositiva verso il basso
data-transition=”none” -> nessuna transizione

Attenzione! Per vedere tutte le transizioni il browser in uso deve supportare le trasformazioni 3D altrimenti ogni tipo transizione sarà rappresentata con la dissolvenza “fade”.

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|Commenti disabilitati su JQuery Mobile Corso Base – Transizioni
Read More

JQuery Mobile per niubbi – Popup-Tooltip-Lightbox Gallery

Lezione #id-jqmobile-2013-0007#

JQuery Mobile mette a disposizione differenti offetti di Popup, dal tooltip alla photo gallery lightbox.

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>

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

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

	<div data-role="content">
	
	<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
	<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup, no options set.</p>
	</div>
	
	</div><!-- /content -->

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

</body>

</html>

La parte che ci interessa è:

	<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
	<div data-role="popup" id="popupBasic">
	<p>This is a completely basic popup, no options set.</p>
	</div>

Assegnamo al div l’attributo div data-role=”popup”

Possiamo assegnare ulteriori attributi:

data-dismissible=”false” il click al di fuori della finestra dipopup non la chiude come succede di default, costringe il navigatore ad interagire con la finestra

<div data-role="popup" id="popupUndismissible" class="ui-content" style="max-width:280px" data-dismissible="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
    <p>I have the <code>data-dismissible</code> attribute set to <code>false</code>. I'm not closeable by clicking outside of me.</p>
</div>

href=”#positionWindow” -> posiziona al centro della finesta
href=”#positionOrigin” -> posiziona vicino all’origine
href=”#positionSelector” -> posiziona nel div dell’elemento con id=nome…

<a href="#positionWindow" data-role="button" data-inline="true" data-rel="popup" data-position-to="window">Position to window</a>
<a href="#positionOrigin" data-role="button" data-inline="true" data-rel="popup" data-position-to="origin">Position to origin</a>
<a href="#positionSelector" data-role="button" data-inline="true" data-rel="popup" data-position-to="#position-header">Position to #position-header</a>
<div data-role="popup" id="positionWindow" class="ui-content" data-theme="d">
    <p>I am positioned to the window.</p>
</div>
<div data-role="popup" id="positionOrigin" class="ui-content" data-theme="d">
    <p>I am positioned over the origin.</p>
</div>
<div data-role="popup" id="positionSelector" class="ui-content" data-theme="d">
    <p>I am positioned over the header for this section via a selector. If the header isn't scrolled into view, collision detection will place the popup so it's in view.</p>
</div>

data-transition=”none” -> assegna una transizione

<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="fade" data-role="button" data-inline="true" data-rel="popup">Fade</a>
<a href="#transitionExample" data-transition="flip" data-role="button" data-inline="true" data-rel="popup">Flip</a>
<a href="#transitionExample" data-transition="turn" data-role="button" data-inline="true" data-rel="popup">Turn</a>
<a href="#transitionExample" data-transition="flow" data-role="button" data-inline="true" data-rel="popup">Flow</a>
<a href="#transitionExample" data-transition="slide" data-role="button" data-inline="true" data-rel="popup">Slide</a>
<a href="#transitionExample" data-transition="slidefade" data-role="button" data-inline="true" data-rel="popup">Slidefade</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div data-role="popup" id="transitionExample" class="ui-content" data-theme="d">
    <p>I'm a simple popup.</p>
</div>

Temi

<a href="#theme" data-rel="popup" data-role="button" data-inline="true">Theme A</a>
<div id="theme" data-role="popup" data-theme="a" class="ui-content">
  <p>I have <code>data-theme="a"</code> set on me</p>
</div>
<a href="#transparent" data-rel="popup" data-role="button" data-inline="true">Theme "none", no shadow</a>
<div id="transparent" data-role="popup" data-theme="none" data-shadow="false">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
  <img src="img/firefox-logo.png" class="popphoto" alt="firefox logo on a transparent popup">
</div>
<a href="#overlay" data-rel="popup" data-role="button" data-inline="true">Overlay theme A</a>
<div id="overlay" data-role="popup" data-overlay-theme="a" class="ui-content">
  <p>I have a <code>data-overlay-theme="a"</code> set on me</p>
</div>
<a href="#both" data-rel="popup" data-role="button" data-inline="true">Theme E + overlay A</a>
<div id="both" data-role="popup" data-overlay-theme="a" data-theme="e" class="ui-content">
  <p>I have <code>data-theme="e"</code> and <code>data-overlay-theme="a"</code> set on me</p>
</div>

Menu 

        <a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Actions...</a>
	<div data-role="popup" id="popupMenu" data-theme="d">
        <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d">
            <li data-role="divider" data-theme="e">Choose an action</li>
            <li><a href="#">View details</a></li>
            <li><a href="#">Edit</a></li>
            <li><a href="#">Disable</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
	</div>

E’ sufficiente annidare una lista all’interno del div div data-role=”popup”

Menu Accordion

    <a href="#popupNested" data-rel="popup" data-role="button" data-inline="true" data-icon="bars" data-theme="b" data-transition="pop">Choose a creature...</a>
    <div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
            <h2>Farm animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Chicken</a></li>
                <li><a href="#" data-rel="dialog">Cow</a></li>
                <li><a href="#" data-rel="dialog">Duck</a></li>
                <li><a href="#" data-rel="dialog">Sheep</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Pets</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Cat</a></li>
                <li><a href="#" data-rel="dialog">Dog</a></li>
                <li><a href="#" data-rel="dialog">Iguana</a></li>
                <li><a href="#" data-rel="dialog">Mouse</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Ocean Creatures</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Fish</a></li>
                <li><a href="#" data-rel="dialog">Octopus</a></li>
                <li><a href="#" data-rel="dialog">Shark</a></li>
                <li><a href="#" data-rel="dialog">Starfish</a></li>
            </ul>
        </div><!-- /collapsible -->
        <div data-role="collapsible" data-inset="false">
            <h2>Wild Animals</h2>
            <ul data-role="listview">
                <li><a href="#" data-rel="dialog">Lion</a></li>
                <li><a href="#" data-rel="dialog">Monkey</a></li>
                <li><a href="#" data-rel="dialog">Tiger</a></li>
                <li><a href="#" data-rel="dialog">Zebra</a></li>
            </ul>
        </div><!-- /collapsible -->
    </div><!-- /collapsible set -->

Form:

<a href="#popupLogin" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Sign in</a>
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
    <form>
        <div style="padding:10px 20px;">
            <h3>Please sign in</h3>
            <label for="un" class="ui-hidden-accessible">Username:</label>
            <input type="text" name="user" id="un" value="" placeholder="username" data-theme="a">
            <label for="pw" class="ui-hidden-accessible">Password:</label>
            <input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a">
            <button type="submit" data-theme="b" data-icon="check">Sign in</button>
        </div>
    </form>
</div>

Vedi il codice in azione! >

Il mio sito ufficiale >

By |JQuery, JQuery Mobile, Web Design|1 Comment
Read More

Tutorial JQuery Mobile – Elemento pieghevole – collapsible

Lezione #id-jqmobile-2013-0006#

JQuery Mobile mette a disposizione elementi pieghevoli (collapsible).

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">

	<div data-role="collapsible">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
        </div>

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

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

</body>

</html>

Per creare un menu pieghevole il markup da applicare è il seguente:

	<div data-role="collapsible">
        <h4>Heading</h4>
        <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
        </div>

Dovbbiamo assegnare:
1. al div l’attributo data-role=”collapsible”
2. è importante iniziare con un tag da h1 a h6, questo sarà il contenuto di testa dell’elemento, quello che resta visibile dopo averlo collassato.

A ogni div possiamo assegnare i seguenti attributi:
data-collapsed=”false” -> valori: true / false -> Per espandere il contenuto al caricamento della pagina.
data-mini=”true” -> valori: true / false -> Per avere una versione miniaturizzata
data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-d” -> assegna le icone per l’elemento aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema all’header e al sottomenù
data-inset=”false” -> valori: true / false -> Per avere attivare e disattivare i bordi.

Differenza tra data-role=”collapsible” e data-role=”collapsible-set”:
data-role=”collapsible-set” apre solo un contenuto per volta
data-role=”collapsible-set” apre anche più contenuti per volta

Per i forms utilizziamo i tag:

<legend>

<fieldset>

Ad esempio:

<form>
    <fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
        <legend>Legend</legend>
        <label for="textinput-f">Text Input:</label>
        <input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>

Ora mettiamo tutto insieme:

<!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>Basic</p>
	<div data-role="collapsible">
		<h4>Heading</h4>
		<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
	</div>
	
	<p>Theme</p>
	<div data-role="collapsible" data-theme="b" data-content-theme="d">
		<h4>Heading</h4>
		<p>I'm the collapsible content with a themed content block set to "d".</p>
	</div>
	
	<p>Expanded</p>
	<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="d">
    <h4>Heading</h4>
    <ul data-role="listview">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a></li>
    </ul>
	</div>
	
	<p>Mini</p>
	<div data-role="collapsible" data-mini="true" data-theme="b" data-content-theme="a">
    <h4>Heading</h4>
    <ul data-role="listview">
        <li><a href="#">List item 1</a></li>
        <li><a href="#">List item 2</a></li>
        <li><a href="#">List item 3</a></li>
    </ul>
	</div>
	
	<p>Icons</p>
	<div data-role="collapsible" data-theme="b" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u" data-iconpos="right">
    <h4>Heading</h4>
    <ul data-role="listview" data-inset="false">
        <li>Read-only list item 1</li>
        <li>Read-only list item 2</li>
        <li>Read-only list item 3</li>
    </ul>
	</div>

	</div><!-- /content -->
	
	<p>Legend</p>
	<form>
    <fieldset data-role="collapsible" data-theme="a" data-content-theme="d">
        <legend>Legend</legend>
        <label for="textinput-f">Text Input:</label>
        <input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
	</form>
	
	<p>Non-inset</p>
	<div data-role="collapsible" data-inset="false" data-theme="c" data-content-theme="d">
		<h4>Heading</h4>
		<p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
	</div>
	
	<p>Set o collapsible</p>
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Pets</h3>
    <ul data-role="listview">
        <li><a href="#">Canary</a></li>
        <li><a href="#">Cat</a></li>
        <li><a href="#">Dog</a></li>
        <li><a href="#">Gerbil</a></li>
        <li><a href="#">Iguana</a></li>
        <li><a href="#">Mouse</a></li>
    </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Farm animals</h3>
    <ul data-role="listview">
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Cow</a></li>
        <li><a href="#">Duck</a></li>
        <li><a href="#">Horse</a></li>
        <li><a href="#">Pig</a></li>
        <li><a href="#">Sheep</a></li>
    </ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-theme="b" data-content-theme="d" data-inset="false">
    <h3>Wild Animals</h3>
    <ul data-role="listview">
        <li><a href="#">Aardvark</a></li>
        <li><a href="#">Alligator</a></li>
        <li><a href="#">Ant</a></li>
        <li><a href="#">Bear</a></li>
        <li><a href="#">Beaver</a></li>
        <li><a href="#">Cougar</a></li>
        <li><a href="#">Dingo</a></li>
    </ul>
</div><!-- /collapsible -->
	
	<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 Tutorial JQuery Mobile – Elemento pieghevole – collapsible
Read More

JQuery Mobile Corso OnLine – Menu a Fisarmonica

Lezione #id-jqmobile-2013-0005#

JQuery Mobile mette a disposizione dei pratici menu a fisarmonica (accordions).

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>Accordion</p>
	  <div data-role="collapsible-set" data-theme="c" data-content-theme="d">

		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>

		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>

		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>

           </div>

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

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

</body>

</html>

Per creare un menu a fisarmonica il markup da applicare è il seguente:

          <div data-role="collapsible-set">

		<div data-role="collapsible">
			...
		</div>

		<div data-role="collapsible">
			...
		</div>

		<div data-role="collapsible">
			...
		</div>

           </div>

A ogni div possiamo assegnare i seguenti attributi:
data-inset=”false” -> valori: true / false -> Inset o Full Width
data-mini=”true” -> valori: true / false -> Per avere una versione miniaturizzata
data-collapsed-icon=”arrow-r” data-expanded-icon=”arrow-d” -> assegna le icone per il menu aperto e collasato
data-iconpos=”right” -> valori: right / left / top / bottom -> assegna la posizione dell’icona
data-corners=”false” -> valori: true / false -> spigoli arrotondati o spigoli vivi
data-theme=”b” data-content-theme=”b” -> valori: a 7 b / c / d / e -> assegna separatamente un tema al menu principale e al sottomenù

Differenza tra data-role=”collapsible” e data-role=”collapsible-set”:
data-role=”collapsible-set” apre solo un contenuto per volta
data-role=”collapsible-set” apre anche più contenuti per volta

Ora mettiamo tutto insieme:

<!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>Accordion - Inset</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Full Width</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
		<div data-role="collapsible" data-inset="false">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible" data-inset="false">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible" data-inset="false">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Mini</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-mini="true">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 2</h3>
			<p>I'm the collapsible content for section 2</p>
		</div>
		<div data-role="collapsible">
			<h3>Section 3</h3>
			<p>I'm the collapsible content for section 3</p>
		</div>
    </div>
	
	<p>Accordion - Icons</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-collapsed-icon="gear" data-expanded-icon="delete">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
		<div data-role="collapsible" data-iconpos="top">
        <h3>Top</h3>
        <p>Set via <code>data-iconpos="top"</code> attribute on the collapsible</p>
        </div>
    </div>
	
	<p>Accordion - Corners</p>
	<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-corners="false">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
    </div>
	
	<p>Accordion - Themes</p>
	<div data-role="collapsible-set" data-theme="e" data-content-theme="d">
		<div data-role="collapsible">
			<h3>Section 1</h3>
			<p>I'm the collapsible content for section 1</p>
		</div>
    </div>
	
	</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 Corso OnLine – Menu a Fisarmonica
Read More