creazioni siti web rovigo

  • Home
  • Tag: creazioni siti web rovigo

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

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

WordPress – Cosa sono gli hook?

Hook può essere tradotto in italiano con la parola “Gancio”. Un Hook di WordPress è un gancio che ci permette di usufruire delle funzioni dei file core del CMS senza modificare il core stesso.

By |Web Design, WordPress|Commenti disabilitati su WordPress – Cosa sono gli hook?
Read More

Corso Base JQuery OnLine – Ottenere i contenuti dinamicamente – text()-html()-val()

Lezione #id-jq-2013-0017#

JQuery ci permette di ottenere i dati del nostro documento HTML, in particolare testo – Metodo text() -, tag HTML – Metodo html() -, valori dei Form. – Metodo val() –

By |JQuery, Web Design|Commenti disabilitati su Corso Base JQuery OnLine – Ottenere i contenuti dinamicamente – text()-html()-val()
Read More