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().
