Initial commit
This commit is contained in:
383
static_old/plugins/bootstrap-touchspin/demo/demo.css
Executable file
383
static_old/plugins/bootstrap-touchspin/demo/demo.css
Executable file
@@ -0,0 +1,383 @@
|
||||
body {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
color: #333;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: #ccc;
|
||||
}
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: #d64513;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
h1 small {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: "Century Gothic", Arial, Ubuntu, Helvetica, sans-serif;
|
||||
font-size: 26px;
|
||||
margin: 30px 0 20px;
|
||||
}
|
||||
|
||||
h2 small {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 25px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h3 small {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h4 small {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h5 small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h6 small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.dl-horizontal dt {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.dl-horizontal dd {
|
||||
margin-left: 220px;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
padding: 5px 0px 5px;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
border: none;
|
||||
box-shadow: 0px 0px 1px #000;
|
||||
/*background-image: linear-gradient(to top, rgb(62, 86, 112) 0%, rgb(69, 94, 122) 100%)*/;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .dropdown > a .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
|
||||
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.navbar .nav > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand,
|
||||
.navbar-default .navbar-brand:hover,
|
||||
.navbar-default .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active {
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a,
|
||||
.navbar .nav > .active > a:hover,
|
||||
.navbar .nav > .active > a:focus,
|
||||
.navbar .nav li.dropdown.active > .dropdown-toggle,
|
||||
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
|
||||
background: url(img/bg-menu-selected.png) no-repeat center bottom; /*#a5360f;*/
|
||||
background: #BC451B;
|
||||
color: #fff;
|
||||
/*height: 65px;*/
|
||||
}
|
||||
|
||||
.navbar .nav > li > a:focus,
|
||||
.navbar .nav > li > a:hover,
|
||||
.navbar .nav li.dropdown.open > .dropdown-toggle {
|
||||
background: rgba(188, 69, 27, 0.6);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
border-radius: 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-submenu:hover > a, .dropdown-submenu:focus > a,
|
||||
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
|
||||
background: #d64513;
|
||||
}
|
||||
|
||||
.nav-tabs .open .dropdown-toggle, .nav-pills .open .dropdown-toggle, .nav > li.dropdown.open.active > a:hover {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropdown-menu > li > a {
|
||||
padding: 10px 20px;
|
||||
color: #585858;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
margin-top: 9px;
|
||||
float: right;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
float: right;
|
||||
color: white;
|
||||
margin-top: 15px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 10px;
|
||||
background: #f5f5f5;
|
||||
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
border-bottom: 1px solid #ddd;
|
||||
color: #4d4d4d;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.panel-heading a {
|
||||
color: #4d4d4d;
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
|
||||
.abstract {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
border: none;
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
box-shadow: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
|
||||
background: #a5360f;
|
||||
}
|
||||
|
||||
.socialbuttons,
|
||||
.addthis_toolbox {
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.row-fluid .socialbuttons {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
float: right;
|
||||
height: 20px;
|
||||
width: 220px;
|
||||
white-space: nowrap;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #474747;
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar {
|
||||
background: #a5360f;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.navbar .btn-navbar:hover, .navbar .btn-navbar:focus, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
|
||||
background: #474747;
|
||||
}
|
||||
|
||||
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
/* woodpaul on board */
|
||||
.hero-unit {
|
||||
text-align: center;
|
||||
margin: 0 0 50px;
|
||||
}
|
||||
|
||||
.hero-unit h1 {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
text-shadow: 1px 1px 0px rgba(255,255,255,1);
|
||||
}
|
||||
|
||||
.hero-unit h1 small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero-unit .btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.socialbuttons {
|
||||
text-align: center;
|
||||
margin: 0 0 -15px;
|
||||
}
|
||||
|
||||
.socialbuttons iframe {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_toolbox {
|
||||
width: 420px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.socialbuttons .share-github {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.socialbuttons .addthis_button_facebook_like {
|
||||
margin: 0 30px 0 0;
|
||||
}
|
||||
|
||||
hr{
|
||||
background-color: transparent;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
.controls-row {
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
|
||||
/* table */
|
||||
.table thead th {
|
||||
font-family: "Century Gothic", Arial, sans-serif;
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
background-color: #bc451b;
|
||||
color: #fff;
|
||||
vertical-align: middle!important;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-collapse {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.navbar .followus {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
body {
|
||||
padding-top: 110px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
background: #000 url(img/bg-menu.png) repeat-x left top; /*#377fa0;*/
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus,
|
||||
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
|
||||
background: #d64513;
|
||||
color: #fff;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.navbar-fixed-top > .container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.navbar > .container .navbar-brand {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.navbar .socialbuttons {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: 0;
|
||||
width: 200px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.navbar .addthis_toolbox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
static_old/plugins/bootstrap-touchspin/demo/favicon.ico
Executable file
BIN
static_old/plugins/bootstrap-touchspin/demo/favicon.ico
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
777
static_old/plugins/bootstrap-touchspin/demo/index.html
Executable file
777
static_old/plugins/bootstrap-touchspin/demo/index.html
Executable file
@@ -0,0 +1,777 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bootstrap TouchSpin</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
<meta name="author" content="István Ujj-Mészáros">
|
||||
|
||||
<meta itemprop="name" content="Bootstrap Touchspin">
|
||||
<meta itemprop="description" content="A mobile and touch friendly input spinner component for Bootstrap 3.">
|
||||
|
||||
<link rel="shortcut icon" href="favicon.ico">
|
||||
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="../src/jquery.bootstrap-touchspin.css" rel="stylesheet" type="text/css" media="all">
|
||||
<link href="demo.css" rel="stylesheet" type="text/css" media="all">
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
|
||||
<script src="../src/jquery.bootstrap-touchspin.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="hero-unit">
|
||||
|
||||
<h1>Bootstrap TouchSpin</h1>
|
||||
|
||||
<a id="link-ghp" class="btn btn-primary" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin"><span class="glyphicon glyphicon-link"></span> Github project page</a>
|
||||
<a id="link-ghdl" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin/archive/master.zip"
|
||||
class="btn btn-primary" title="download"><span class="glyphicon glyphicon-download"></span> Download</a>
|
||||
|
||||
</div>
|
||||
|
||||
<p>
|
||||
A mobile and touch friendly input spinner component for Bootstrap 3.<br>
|
||||
It supports the mousewheel and the up/down keys.
|
||||
</p>
|
||||
|
||||
<h2>Examples</h2>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo0">Example using data attributes:</label> <input
|
||||
id="demo0"
|
||||
type="text"
|
||||
value="40"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo0"
|
||||
type="text"
|
||||
value="55"
|
||||
name="demo0"
|
||||
data-bts-min="0"
|
||||
data-bts-max="100"
|
||||
data-bts-init-val=""
|
||||
data-bts-step="1"
|
||||
data-bts-decimal="0"
|
||||
data-bts-step-interval="100"
|
||||
data-bts-force-step-divisibility="round"
|
||||
data-bts-step-interval-delay="500"
|
||||
data-bts-prefix=""
|
||||
data-bts-postfix=""
|
||||
data-bts-prefix-extra-class=""
|
||||
data-bts-postfix-extra-class=""
|
||||
data-bts-booster="true"
|
||||
data-bts-boostat="10"
|
||||
data-bts-max-boosted-step="false"
|
||||
data-bts-mousewheel="true"
|
||||
data-bts-button-down-class="btn btn-default"
|
||||
data-bts-button-up-class="btn btn-default"
|
||||
/>
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo0']").TouchSpin({
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical">Vertical button alignment:</label> <input id="demo3" type="text" value="" name="demo_vertical">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical" type="text" value="" name="demo_vertical">
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: true
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo_vertical2">Vertical buttons with custom icons:</label> <input id="demo3" type="text" value="" name="demo_vertical2">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo_vertical2" type="text" value="" name="demo_vertical2">
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: true,
|
||||
verticalupclass: 'glyphicon glyphicon-plus',
|
||||
verticaldownclass: 'glyphicon glyphicon-minus'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo1">Example with postfix (large):</label> <input id="demo1" type="text" value="55" name="demo1">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo1" type="text" value="55" name="demo1">
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 0.1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: '%'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">With prefix</label> <input id="demo2" type="text"
|
||||
value="0" name="demo2"
|
||||
class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<form class="form-horizontal" role="form">
|
||||
<div class="form-group">
|
||||
<label for="demo2" class="col-md-5 control-label">Example:</label> <input id="demo2" type="text" value="0" name="demo2" class="col-md-7 form-control">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
<script>
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1000000000,
|
||||
max: 1000000000,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 10000000,
|
||||
prefix: '$'
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo3">Init with empty value:</label> <input id="demo3" type="text" value="" name="demo3">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3" type="text" value="" name="demo3">
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3']").TouchSpin();
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<p>
|
||||
The <code>initval</code> setting is only applied when no explicit value is set on the input with the
|
||||
<code>value</code> attribute.
|
||||
</p>
|
||||
|
||||
<div class="col-md-5">
|
||||
<label for="demo3_21">Value attribute is not set
|
||||
<small>(applying settings.initval)</small>
|
||||
:</label> <input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<label for="demo3_22">Value is set explicitly to 33
|
||||
<small>(skipping settings.initval)</small>
|
||||
:</label> <input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo3_21" type="text" value="" name="demo3_21">
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
<input id="demo3_22" type="text" value="33" name="demo3_22">
|
||||
<script>
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo3_21']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
$("input[name='demo3_22']").TouchSpin({
|
||||
initval: 40
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Size of the whole controller can be set with applying <code>input-sm</code> or <code>input-lg</code> class on the
|
||||
input, or by applying the plugin on an input inside an <code>input-group</code> with the proper size class(<code>input-group-sm</code>
|
||||
or <code>input-group-lg</code>).
|
||||
</p>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (small):</label> <input id="demo4" type="text" value="" name="demo4"
|
||||
class="input-sm">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<input id="demo4" type="text" value="" name="demo4" class="input-sm">
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo4">Button postfix (large):</label>
|
||||
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group input-group-lg">
|
||||
<input id="demo4_2" type="text" value="" name="demo4_2" class="form-control input-lg">
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
|
||||
<label for="demo5">Button group:</label>
|
||||
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
<div class="input-group">
|
||||
<input id="demo5" type="text" class="form-control" name="demo5" value="50">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-default">Action</button>
|
||||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right" role="menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo6">Change button class:</label> <input id="demo6" type="text" value="50" name="demo6">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo6']").TouchSpin({
|
||||
buttondown_class: "btn btn-link",
|
||||
buttonup_class: "btn btn-link"
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-5">
|
||||
<label for="demo7">Blank/Non-Number replaced:</label> <input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
|
||||
<div class="col-md-7">
|
||||
<pre class="prettyprint">
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</pre>
|
||||
|
||||
<script>
|
||||
$("input[name='demo7']").TouchSpin({
|
||||
replacementval: 10
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>Event demo</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="demo7" type="text" value="50" name="demo7">
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<pre id="demo7textarea" style="height:200px;overflow:auto;"></pre>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var i = $("input[name='demo7']"),
|
||||
demoarea = $("#demo7textarea"),
|
||||
text = "";
|
||||
|
||||
function writeLine(line) {
|
||||
text += line + "\n";
|
||||
demoarea.text(text);
|
||||
demoarea.scrollTop(
|
||||
demoarea[0].scrollHeight - demoarea.height()
|
||||
);
|
||||
}
|
||||
|
||||
i.TouchSpin({});
|
||||
i.on("touchspin.on.startspin", function () {
|
||||
writeLine("touchspin.on.startspin");
|
||||
});
|
||||
i.on("touchspin.on.startupspin", function () {
|
||||
writeLine("touchspin.on.startupspin");
|
||||
});
|
||||
i.on("touchspin.on.startdownspin", function () {
|
||||
writeLine("touchspin.on.startdownspin");
|
||||
});
|
||||
i.on("touchspin.on.stopspin", function () {
|
||||
writeLine("touchspin.on.stopspin");
|
||||
});
|
||||
i.on("touchspin.on.stopupspin", function () {
|
||||
writeLine("touchspin.on.stopupspin");
|
||||
});
|
||||
i.on("touchspin.on.stopdownspin", function () {
|
||||
writeLine("touchspin.on.stopdownspin");
|
||||
});
|
||||
i.on("touchspin.on.min", function () {
|
||||
writeLine("touchspin.on.min");
|
||||
});
|
||||
i.on("touchspin.on.max", function () {
|
||||
writeLine("touchspin.on.max");
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Settings</h2>
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Option</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>initval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when no explicit value is set on the input with the <code>value</code> attribute. Empty string means
|
||||
that the value remains empty on initialization.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>replacementval</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Applied when user leaves the field empty/blank or enters non-number. Empty string means that the value will not be replaced.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>min</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Minimum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>max</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Maximum value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>step</code></td>
|
||||
<td><code>1</code></td>
|
||||
<td>Incremental/decremental step on up/down change.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>forcestepdivisibility</code></td>
|
||||
<td><code>'round'</code></td>
|
||||
<td>How to force the value to be divisible by step value: <code>'none'</code> | <code>'round'</code> | <code>'floor'</code>
|
||||
| <code>'ceil'</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>decimals</code></td>
|
||||
<td><code>0</code></td>
|
||||
<td>Number of decimal points.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepinterval</code></td>
|
||||
<td><code>100</code></td>
|
||||
<td>Refresh rate of the spinner in milliseconds.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>stepintervaldelay</code></td>
|
||||
<td><code>500</code></td>
|
||||
<td>Time in milliseconds before the spinner starts to spin.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalbuttons</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Enables the traditional up/down buttons.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticalupclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-up'</code></td>
|
||||
<td>Class of the up button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>verticaldownclass</code></td>
|
||||
<td><code>'glyphicon glyphicon-chevron-down'</code></td>
|
||||
<td>Class of the down button with vertical buttons mode enabled.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text before the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Text after the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>prefix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for prefix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>postfix_extraclass</code></td>
|
||||
<td><code>""</code></td>
|
||||
<td>Extra class(es) for postfix.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>booster</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>If enabled, the the spinner is continually becoming faster as holding the button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>boostat</code></td>
|
||||
<td><code>10</code></td>
|
||||
<td>Boost at every nth step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>maxboostedstep</code></td>
|
||||
<td><code>false</code></td>
|
||||
<td>Maximum step when boosted.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>mousewheel</code></td>
|
||||
<td><code>true</code></td>
|
||||
<td>Enables the mouse wheel to change the value of the input.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_class</code></td>
|
||||
<td><code>'btn btn-default'</code></td>
|
||||
<td>Class(es) of up button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttondown_txt</code></td>
|
||||
<td><code>'-'</code></td>
|
||||
<td>Content inside the down button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>buttonup_txt</code></td>
|
||||
<td><code>'+'</code></td>
|
||||
<td>Content inside the up button.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Events</h2>
|
||||
|
||||
<h3>Triggered events</h3>
|
||||
|
||||
<p>The following events are triggered on the original input by the plugin and can be listened on.</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>change</code></td>
|
||||
<td>Triggered when the value is changed with one of the buttons (but not triggered when the spinner hits the
|
||||
limit set by <code>settings.min</code> or <code>settings.max</code>.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards or downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startupspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.startdownspin</code></td>
|
||||
<td>Triggered when the spinner starts spinning downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopspin</code></td>
|
||||
<td>Triggered when the spinner stops spinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopupspin</code></td>
|
||||
<td>Triggered when the spinner stops upspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.stopdownspin</code></td>
|
||||
<td>Triggered when the spinner stops downspinning.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.min</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.min</code>.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.on.max</code></td>
|
||||
<td>Triggered when the spinner hits the limit set by <code>settings.max</code>.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Callable events</h3>
|
||||
|
||||
<p>The following events can be triggered on the original input.</p>
|
||||
|
||||
<p>
|
||||
Example usages:<br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.uponce");</code><br>
|
||||
<code class="prettyprint">$("input").trigger("touchspin.updatesettings", {max: 1000});</code>
|
||||
</p>
|
||||
|
||||
<table class="table table-striped table-bordered docs">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>touchspin.updatesettings</code></td>
|
||||
<td><code>function(newoptions)</code>: Update any setting of an already initialized TouchSpin instance.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.uponce</code></td>
|
||||
<td>Increase the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.downonce</code></td>
|
||||
<td>Decrease the value by one step.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startupspin</code></td>
|
||||
<td>Starts the spinner upwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.startdownspin</code></td>
|
||||
<td>Starts the spinner downwards.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>touchspin.stopspin</code></td>
|
||||
<td>Stops the spinner.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Download</h2>
|
||||
|
||||
<p><a id="link-ghd" href="https://github.com/istvan-ujjmeszaros/bootstrap-touchspin">Download</a> from
|
||||
github. Please report issues and suggestions to github's issue tracker or contact me on <a id="link-gp"
|
||||
href="https://plus.google.com/101242556570448529330/posts"
|
||||
target="_blank">g+</a> or
|
||||
<a id="link-tw" href="https://twitter.com/styu007">twitter</a>!</p>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
prettyPrint();
|
||||
</script>
|
||||
Reference in New Issue
Block a user