2008-09-20 17:42:04 +00:00
<!doctype html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title > jQuery UI Spinner Test page< / title >
< 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 >
< script type = "text/javascript" >
$(function(){
2008-09-23 07:58:29 +00:00
if(!window.console) {
$('#log').css({overflow:'auto',width:'300px',height:'100px',fontSize:'10px',border:'2px inset #ccc',backgroundColor:'#f4f4f4'});
window.console = {
log: function() {
$('#log').append(arguments[0]+"< br > ");
$('#log').scrollTop(999999);
}
};
}
2008-09-20 17:42:04 +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"}
];
var opts = {
's1': {},
's2': {stepping: 0.25},
's3': {currency: '$'},
's4': {},
's5': {
2008-09-20 19:04:01 +00:00
//
// Two methods of adding external items to the spinner
//
// method 1: on initalisation call the add method directly and format html manually
2008-09-22 11:22:14 +00:00
init: function(e, ui) {
2008-09-20 17:42:04 +00:00
for (var i=0; i< itemList.length ; i + + ) {
2008-09-20 19:04:01 +00:00
ui.add('< a href = "'+ itemList[i].url +'" target = "_blank" > '+ itemList[i].title +'< / a > ');
2008-09-20 17:42:04 +00:00
}
2008-09-20 19:04:01 +00:00
},
// method 2: use the format and items options in combination
format: '%(title) < a href = "%(url)" target = "_blank" > » < / a > ',
items: itemList
2008-09-23 07:58:29 +00:00
},
// callbacks
's6': {
init: function(e, ui) {
console.log('init: '+ ui.value);
},
up: function(e, ui) {
console.log('up: '+ ui.value);
},
down: function(e, ui) {
console.log('down: '+ ui.value);
},
spin: function(e, ui) {
console.log('spin: '+ ui.value);
},
change: function(e, ui) {
console.log('change: '+ ui.value);
}
2008-09-20 17:42:04 +00:00
}
};
for (var n in opts)
$("#"+n).spinner(opts[n]);
$("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-09-23 07:58:29 +00:00
2008-09-20 17:42:04 +00:00
< / script >
< style type = "text/css" >
body
{
background: #fff;
font-family: Arial;
}
label {
float: left;
margin-right: .5em;
padding: .15em 0;
font-weight: bold;
}
.ui-spinner {
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;
color: #CCC;
}
.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;
}
.ui-spinner-list,
.ui-spinner-listitem {
margin: 0;
padding: 0;
}
< / style >
< / head >
< body >
< 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-09-23 07:58:29 +00:00
2008-09-20 17:42:04 +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 >
2008-09-23 07:58:29 +00:00
< / ul > < / p >
2008-09-20 17:42:04 +00:00
< 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-23 07:58:29 +00:00
< div > < label for = "s5" > Presenters: < / label >
< div id = "s5" > < / div > < / div >
2008-09-20 17:42:04 +00:00
< 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-09-23 07:58:29 +00:00
< p > < label for = "s6" > Callbacks: < / label >
< input type = "text" id = "s6" / > < / p >
< p >
< button id = "s6-disable" > disable< / button >
< button id = "s6-enable" > enable< / button >
< button id = "s6-destroy" > destroy< / button >
< button id = "s6-create" > create< / button >
< / p >
< div id = "log" > < / div >
< hr / >
2008-09-20 17:42:04 +00:00
< / body >
2008-07-09 11:09:40 +00:00
< / html >
