FREE Code for Web Design, HTML5, CSS, JQuery, PHP

Lezione #id-jqmobile-2013-0004#

JQuery Mobile mette a disposizione un’ampia scelta di funzioni dedicate ai bottoni.

I bottoni possono essere creati da link o dai bottoni di un form.

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>

<a href="#" data-role="button">Anchor</a>
<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

</body>
</html>

Per creare un bottone da un link:

<a href="#" data-role="button">Anchor</a>

Per creare un bottone da un elemento di un form:

<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

Per posizionare i bottoni su una stessa linea (di default si posizionano su linee differenti):


    <a href="#" data-role="button" data-inline="true">True</a>
    <a href="#" data-role="button" data-inline="true">False</a>

Per assegnare ai bottoni un tema tra queli inclusi in JQuery:


    <a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
    <a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
    <a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
    <a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
    <a href="#" data-role="button" data-theme="e" data-inline="true">E</a>

Per assegnare una versione più piccola – mini –

    <a href="#" data-role="button" data-mini="true">Cancel</a>

Per assegnare un’icona:

	<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Place order</a>

L’attributo data-icon=”check” può valere:

data-icon=”plus”
data-icon=”minus”
data-icon=”delete”
data-icon=”arrow-l”
data-icon=”arrow-r”
data-icon=”arrow-u”
data-icon=”arrow-d”
data-icon=”check”
data-icon=”gear”
data-icon=”refresh”
data-icon=”forward”
data-icon=”back”
data-icon=”grid”
data-icon=”star”
data-icon=”alert”
data-icon=”info”
data-icon=”home”
data-icon=”search”
data-icon=”bars”
data-icon=”edit”

Per posizionare le icone:

<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Right</a>

L’attributo data-iconpos=”right può valere:

data-iconpos=”left”
data-iconpos=”right”
data-iconpos=”top”
data-iconpos=”bottom”
data-iconpos=”notext”

Per creare gruppi verticali di bottoni:

<div data-role="controlgroup">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

Rinchiudere i bottoni tra un div con attributo data-role=”controlgroup”, JQuery rimuoverà in automatico le ombre, arrotonderà il primo e l’ultimo bottone a applicherà una soluzione grafica piacevole.

Per creare gruppi orizzontali:

<div data-role="controlgroup"  data-type="horizontal">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

Il codice che ci interessa è data-type=”horizontal”

Versione mini:

<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" data-role="button" data-iconpos="notext" data-icon="plus" data-theme="b">Add</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="delete" data-theme="b">Delete</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="grid" data-theme="b">More</a>
</div>

Bordi arrotondati e ombre:

<a href="#" data-role="button" data-icon="gear" data-theme="b">Default</a>
<a href="#" data-role="button" data-icon="gear" data-corners="false" data-theme="b">No rounded corners</a>
<a href="#" data-role="button" data-icon="gear" data-shadow="false" data-theme="b">No button shadow</a>
<a href="#" data-role="button" data-icon="gear" data-iconshadow="false" data-theme="b">No icon disc shadow</a>

Gli attributi che ci interessano sono:
data-corners=”false” -> false o true -> bordi arrotondati
data-shadow=”false” -> false o true -> ombra del bottone
data-iconshadow=”false” -> false o true -> ombra dell’icona

Bottoni disabilitati:

<a href="#" data-role="button" class="ui-disabled">Disabled anchor via class</a>
<form>
    <button disabled="">Button with disabled attribute</button>
    <input type="button" value="Input with disabled attribute" disabled="">
</form>

Posso disabilitare un bottone in due modi:
– con la classe class=”ui-disabled”
– con l’attributo disabled=””

Mettiamo tutto insieme, così al bisogno potremo copiare ed incollare porzioni di questo codice già pronto:

<!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>
<p>Sintassi di base</p>
<a href="#" data-role="button">Anchor</a>
<form>
    <button>Button</button>
    <input type="button" value="Input">
    <input type="submit" value="Submit">
    <input type="reset" value="Reset">
</form>

<p>Bottoni sulla stessa linea</p>
<p>
    <a href="#" data-role="button" data-inline="true">True</a>
    <a href="#" data-role="button" data-inline="true">False</a>
</p>

<p>Temi inclusi in JQuery</p>
<p>
    <a href="#" data-role="button" data-theme="a" data-inline="true">A</a>
    <a href="#" data-role="button" data-theme="b" data-inline="true">B</a>
    <a href="#" data-role="button" data-theme="c" data-inline="true">C</a>
    <a href="#" data-role="button" data-theme="d" data-inline="true">D</a>
    <a href="#" data-role="button" data-theme="e" data-inline="true">E</a>
</p>

<p>Versione Mini</p>
<p>
    <a href="#" data-role="button" data-mini="true">Cancel</a>
</p>

<p>Assegnare icona</p>
<p>
<a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b">Place order</a>
</p>

<p>Le icone disponibili</p>
<p>
<a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-theme="c" data-inline="true">Plus</a>
<a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-theme="c" data-inline="true">Minus</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-theme="c" data-inline="true">Delete</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="c" data-inline="true">Arrow left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="c" data-inline="true">Arrow right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="notext" data-theme="c" data-inline="true">Arrow up</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="notext" data-theme="c" data-inline="true">Arrow down</a>
<a href="#" data-role="button" data-icon="check" data-iconpos="notext" data-theme="c" data-inline="true">Check</a>
<a href="#" data-role="button" data-icon="gear" data-iconpos="notext" data-theme="c" data-inline="true">Gear</a>
<a href="#" data-role="button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>
<a href="#" data-role="button" data-icon="forward" data-iconpos="notext" data-theme="c" data-inline="true">Forward</a>
<a href="#" data-role="button" data-icon="back" data-iconpos="notext" data-theme="c" data-inline="true">Back</a>
<a href="#" data-role="button" data-icon="grid" data-iconpos="notext" data-theme="c" data-inline="true">Grid</a>
<a href="#" data-role="button" data-icon="star" data-iconpos="notext" data-theme="c" data-inline="true">Star</a>
<a href="#" data-role="button" data-icon="alert" data-iconpos="notext" data-theme="c" data-inline="true">Alert</a>
<a href="#" data-role="button" data-icon="info" data-iconpos="notext" data-theme="c" data-inline="true">Info</a>
<a href="#" data-role="button" data-icon="home" data-iconpos="notext" data-theme="c" data-inline="true">Home</a>
<a href="#" data-role="button" data-icon="search" data-iconpos="notext" data-theme="c" data-inline="true">Search</a>
<a href="#" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="c" data-inline="true">Bars</a>
<a href="#" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="c" data-inline="true">Edit</a>
</p>

<p>Posizione per le icone</p>
<p>
<a href="#" data-role="button" data-inline="true">Text only</a>
<a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-inline="true">Left</a>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-inline="true">Right</a>
<a href="#" data-role="button" data-icon="arrow-u" data-iconpos="top" data-inline="true">Top</a>
<a href="#" data-role="button" data-icon="arrow-d" data-iconpos="bottom" data-inline="true">Bottom</a>
<a href="#" data-role="button" data-icon="delete" data-iconpos="notext" data-inline="true">Icon only</a>
</p>

<p>Gruppi Verticali</p>
<div data-role="controlgroup">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

<p>Gruppi Orizzontali</p>
<div data-role="controlgroup"  data-type="horizontal">
    <a href="#" data-role="button">Timeline</a>
    <a href="#" data-role="button">Mentions</a>
    <a href="#" data-role="button">Retweets</a>
</div>

<p>Versione mini</p>
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
    <a href="#" data-role="button" data-iconpos="notext" data-icon="plus" data-theme="b">Add</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="delete" data-theme="b">Delete</a>
    <a href="#" data-role="button" data-iconpos="notext" data-icon="grid" data-theme="b">More</a>
</div>

<p>Bordi arrotondati e ombre</p>
<p>
<a href="#" data-role="button" data-icon="gear" data-theme="b">Default</a>
<a href="#" data-role="button" data-icon="gear" data-corners="false" data-theme="b">No rounded corners</a>
<a href="#" data-role="button" data-icon="gear" data-shadow="false" data-theme="b">No button shadow</a>
<a href="#" data-role="button" data-icon="gear" data-iconshadow="false" data-theme="b">No icon disc shadow</a>
</p>

<p>Bottoni disabilitati</p>
<p>
<a href="#" data-role="button" class="ui-disabled">Disabled anchor via class</a>
<form>
    <button disabled="">Button with disabled attribute</button>
    <input type="button" value="Input with disabled attribute" disabled="">
</form>
</p>

</body>
</html>

Vedi il codice in azione! >

Il mio sito ufficiale >

Lezione #id-jqui-2013-0001#

JQuery UI (User Interface) è un insieme di effetti, widget, temi, interazioni basati su JQuery.

Vediamo la sintassi di base:

<!doctype html>
 
<head>
  <title>Title</title>
  
  <!-- Load JQuery UI files --> 
  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery-ui.js"></script>
  <link rel="stylesheet" href="css/jquery-ui.css" />
  
  <!-- CSS Style Sheet -->
  <style>
  body {  
  font-size: 1em;
  }
  #draggable { 
  width: 150px; 
  height: 150px; 
  padding: 0.5em; 
  background-color:#6495ed;
  border-style:solid;
  border-color:#0000ff;
  }
  </style>
 
  <!-- JQuery script --> 
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
  
</head>
<body>
 
<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>
 
 
</body>
</html>

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

Prima di tutto carichiamo gli script necessari, JQuery + JQuery UI + CSS di JQuery UI:

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

In body:

<div id="draggable" class="ui-widget-content">

Assegnamo un id all’elemento HTML per renderlo rintracciabile e la classe class=”ui-widget-content”. Questa classe è propria del framework JQuery UI e viene applicata ai contenitori di contenuti.

In head:

  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>

Uno script JQuery, si può identificare dalla presenza del dollaro – $ – tipica delle funzioni JQuery.
Definisco l’elemento con id=draggable / #draggable come trascinabile .draggable().

Vedi il codice in azione! >

Il mio sito ufficiale >