2008-07-09 11:09:40 +00:00
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
2008-08-19 07:18:04 +00:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > jQuery UI Spinner Test page< / title >
2008-07-09 11:09:40 +00:00
< script type = "text/javascript" src = "../../jquery-1.2.6.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.core.js" > < / script >
< script type = "text/javascript" src = "../../ui/ui.spinner.js" > < / script >
2008-08-19 07:18:04 +00:00
< script type = "text/javascript" >
$(function(){
2008-07-09 11:09:40 +00:00
2008-08-19 07:18:04 +00:00
var opts = {
's1': {},
's2': {stepping: 0.25},
2008-08-26 07:28:14 +00:00
's3': {currency: '$'},
's4': {}
2008-08-19 07:18:04 +00:00
};
2008-08-26 07:28:14 +00:00
2008-08-19 07:18:04 +00:00
for (var n in opts)
$("#"+n).spinner(opts[n]);
2008-08-26 07:28:14 +00:00
2008-08-19 07:18:04 +00:00
$("button").click(function(e){
var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
if (ns != null)
$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
});
2008-08-26 07:28:14 +00:00
2008-07-09 11:09:40 +00:00
});
< / script >
< style type = "text/css" >
2008-08-19 07:18:04 +00:00
body
{
background: #fff;
font-family: Arial;
2008-07-09 11:09:40 +00:00
}
2008-08-19 07:18:04 +00:00
label {
float: left;
margin-right: .5em;
padding: .15em 0;
font-weight: bold;
2008-07-09 11:09:40 +00:00
}
.ui-spinner {
2008-08-19 07:18:04 +00:00
width: 15em;
display: block;
position: relative;
overflow: hidden;
border: 1px solid #999;
background: #FEFEFE url(../images/spinner-bg.gif) repeat-x left bottom;
padding: 0 5px;
}
.ui-spinner-disabled {
background: #F4F4F4;
2008-08-26 07:28:14 +00:00
color: #CCC;
2008-08-19 07:18:04 +00:00
}
.ui-spinner-box {
width: 90%;
height: 100%;
float: left;
font-size: 125%;
border: none;
background: none;
padding: 0;
}
2008-08-26 07:28:14 +00:00
ul.ui-spinner-box {
height: 1.2em;
2008-08-26 07:50:40 +00:00
line-height: 1.2em;
margin: 0;
padding: 0;
2008-08-26 07:28:14 +00:00
}
2008-08-19 07:18:04 +00:00
.ui-spinner-up,
.ui-spinner-down {
width: 10%;
height: 50%;
font-size: 0.5em;
padding: 0;
margin: 0;
z-index: 100;
text-align: center;
vertical-align: middle;
position: absolute;
right: 0;
cursor: default;
border: 1px solid #999;
border-right: none;
border-top: none;
}
.ui-spinner-down {
bottom: 0;
border-bottom: 0;
}
.ui-spinner-pressed {
background: #FEFEFE;
2008-07-09 11:09:40 +00:00
}
< / style >
< / head >
< body >
2008-08-19 07:18:04 +00:00
< h1 > jQuery UI Spinner Test Page< / h1 >
< p > This is a visual test page for developers and demonstrates some of the features included in ui.spinner. Mousewheel support is provided by the < a href = "http://plugins.jquery.com/project/mousewheel" > mousewheel plugin< / a > .< / p >
< p > < label for = "s1" > Basic: < / label >
< input type = "text" id = "s1" value = "10" / > < / p >
< p >
< button id = "s1-disable" > disable< / button >
< button id = "s1-enable" > enable< / button >
< button id = "s1-destroy" > destroy< / button >
< button id = "s1-create" > create< / button >
< / p >
< hr / >
< p > < label for = "s2" > Decimal: < / label >
< input type = "text" id = "s2" value = "10.25" / > < / p >
< p >
< button id = "s2-disable" > disable< / button >
< button id = "s2-enable" > enable< / button >
< button id = "s2-destroy" > destroy< / button >
< button id = "s2-create" > create< / button >
< / p >
< hr / >
< p > < label for = "s3" > Currency: < / label >
< input type = "text" id = "s3" / > < / p >
< p >
< button id = "s3-disable" > disable< / button >
< button id = "s3-enable" > enable< / button >
< button id = "s3-destroy" > destroy< / button >
< button id = "s3-create" > create< / button >
< / p >
< hr / >
2008-07-09 11:09:40 +00:00
2008-08-26 07:28:14 +00:00
< p > < label for = "s4" > Data List: < / label >
< ul id = "s4" >
< li > item 1< / li >
< li > item 2< / li >
< li > item 3< / li >
< li > item 4< / li >
< li > item 5< / li >
< li > item 6< / li >
< li > item 7< / li >
< li > item 8< / li >
< li > item 9< / li >
< li > item 10< / li >
< li > item 11< / li >
< li > item 12< / li >
< li > item 13< / li >
< li > item 14< / li >
< li > item 15< / li >
< li > item 16< / li >
< li > item 17< / li >
< li > item 18< / li >
< li > item 19< / li >
< li > item 20< / li >
< / ul >
< p >
< button id = "s4-disable" > disable< / button >
< button id = "s4-enable" > enable< / button >
< button id = "s4-destroy" > destroy< / button >
< button id = "s4-create" > create< / button >
< / p >
< hr / >
2008-07-09 11:09:40 +00:00
< / body >
< / html >
