2008-09-20 17:30:51 +00:00
<!doctype html>
< html lang = "en" >
2008-07-09 11:09:40 +00:00
< 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-09-09 08:23:29 +00:00
var itemList = [
{url: "http://ejohn.org", title: "John Resig"},
{url: "http://bassistance.de/", title: "Jö rn Zaefferer"},
{url: "http://snook.ca/jonathan/", title: "Jonathan Snook"},
{url: "http://rdworth.org/", title: "Richard Worth"},
{url: "http://www.paulbakaus.com/", title: "Paul Bakaus"},
{url: "http://www.yehudakatz.com/", title: "Yehuda Katz"},
{url: "http://www.azarask.in/", title: "Aza Raskin"},
{url: "http://www.karlswedberg.com/", title: "Karl Swedberg"},
{url: "http://scottjehl.com/", title: "Scott Jehl"},
{url: "http://jdsharp.us/", title: "Jonathan Sharp"},
{url: "http://www.kevinhoyt.org/", title: "Kevin Hoyt"},
{url: "http://www.codylindley.com/", title: "Cody Lindley"},
{url: "http://malsup.com/jquery/", title: "Mike Alsup"}
];
2008-08-30 20:01:23 +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: '$'},
2008-09-09 08:23:29 +00:00
's4': {},
's5': {
init: function(ui) {
for (var i=0; i< itemList.length ; i + + ) {
ui.add(itemList[i].title +' < a href = "'+ itemList[i].url +'" target = "_blank" > » < / a > ');
}
}
}
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-30 20:01:23 +00:00
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;
}
.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
}
2008-08-30 20:01:23 +00:00
.ui-spinner-list,
2008-08-30 19:15:08 +00:00
.ui-spinner-listitem {
margin: 0;
padding: 0;
}
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-09-09 08:23:29 +00:00
< p > < label for = "s5" > Presenters: < / label >
< div id = "s5" > < / div >
< p >
< button id = "s5-disable" > disable< / button >
< button id = "s5-enable" > enable< / button >
< button id = "s5-destroy" > destroy< / button >
< button id = "s5-create" > create< / button >
< / p >
< hr / >
2008-07-09 11:09:40 +00:00
< / body >
< / html >
