jQuery Mobile: slider

 jQuery Mobile
Jan 192013
 

Possiamo usare il nuovo campo di input di html5, l’input type range, per acquisire un numero intero come input del nostro utente.

Come prima cosa prepariamo l’html della pagina con un form:


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>

<div data-role="page" id="pagina">
<div data-role="header"><h1>Slider</h1></div>
<div data-role="content">
<form action="#" method="post">
<div data-role="fieldcontain">
...
</div>
</form>
<a href="#" id="leggi" data-role="button">Leggi</a>
</div>
</div>
</body>
</html>

Abbiamo già inserito anche un bottoncino per la lettura.

Inseriamo quindi l’input che ci interssa:


<label for="myslider">Slider</label>
<input type="range" id="myslider" value="3" min="0" max="10">

E in ultimo un piccolo script per leggere i contenuti:


$(document).ready(function(e) {
$('#leggi').on('click',function(e){
var x=$('#myslider').val();
alert(x);
})
});

L’esempio

 Share

Sorry, the comment form is closed at this time.