<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery Wan Spinner Plugin Demos</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../build/wan-spinner.css">
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<style>
body { background-color:#ECF0F1; font-family:'Roboto Condensed';}
.container { margin:150px auto; text-align:center; max-width:640px;}
h1 { margin-bottom:50px;}
</style>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://www.jqueryscript.net/form/Minimal-Number-Picker-Plugin-For-jQuery-Wan-Spinner.html">Download This Plugin</a></li>
<li><a href="http://www.jqueryscript.net/">Back To jQueryScript.Net</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container">
<h1>jQuery Wan Spinner Plugin Demos</h1>
<div class="wan-spinner wan-spinner-1">
<a href="javascript:void(0)" class="minus">-</a>
<input type="text" value="1">
<a href="javascript:void(0)" class="plus">+</a>
</div><br>
<br/>
<div class="wan-spinner wan-spinner-2">
<a href="javascript:void(0)" class="minus">-</a>
<input type="text" value="1">
<a href="javascript:void(0)" class="plus">+</a>
</div><br>
<br>
<div class="wan-spinner wan-spinner-3">
<a href="javascript:void(0)" class="minus">-</a>
<input type="text" value="1">
<a href="javascript:void(0)" class="plus">+</a>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script type="text/javascript" src="../build/wan-spinner.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
maxValue: 10,
minValue: -5,
step: 0.1,
inputWidth: 100,
start: -2,
plusClick: function(val) {
console.log(val);
},
minusClick: function(val) {
console.log(val);
},
exceptionFun: function(val) {
console.log("excep: " + val);
},
valueChanged: function(val) {
console.log('change: ' + val);
}
}
$(".wan-spinner-1").WanSpinner(options);
$(".wan-spinner-2").WanSpinner().css("border-color", "#2C3E50");
$(".wan-spinner-3").WanSpinner({inputWidth: 100}).css("border-color", "#C0392B");
});
</script>
</div>
</body>
</html>