Before Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 476 B |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.7 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,76 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<title>color</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/> |
|||
<link rel="stylesheet" type="text/css" href="css/form.css"/> |
|||
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.data.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script> |
|||
<script> |
|||
$(function() { |
|||
var $body = $("body"), |
|||
$ranges = [], |
|||
color = [255, 0, 0], |
|||
rgb = ["red", "green", "blue"], |
|||
$color = new Ox.Label({ |
|||
width: 256 |
|||
}) |
|||
.css({ |
|||
height: "46px", |
|||
background: getColor() |
|||
}) |
|||
.appendTo($body); |
|||
$.each(Ox.range(3), function(i) { |
|||
var colors = getColors(i); |
|||
$ranges[i] = new Ox.Range({ |
|||
arrows: true, |
|||
id: rgb[i], |
|||
max: 255, |
|||
size: 256, |
|||
thumbSize: 40, |
|||
thumbValue: true, |
|||
trackColors: colors, |
|||
value: color[i] |
|||
}) |
|||
.css({ |
|||
marginBottom: "-4px" |
|||
}) |
|||
.bindEvent("change", function(event, data) { |
|||
change(i, data.value); |
|||
}) |
|||
.appendTo($body); |
|||
}); |
|||
function change(index, value) { |
|||
color[index] = value; |
|||
$color.css({ |
|||
background: getColor() |
|||
}); |
|||
$.each(Ox.range(3), function(i) { |
|||
if (i != index) { |
|||
$ranges[i].options({ |
|||
trackColors: getColors(i) |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
function getColor() { |
|||
return "rgb(" + color.join(", ") + ")"; |
|||
} |
|||
function getColors(index) { |
|||
return [ |
|||
"rgb(" + $.map(Ox.range(3), function(v) { |
|||
return v == index ? 0 : color[v]; |
|||
}).join(", ") + ")", |
|||
"rgb(" + $.map(Ox.range(3), function(v) { |
|||
return v == index ? 255 : color[v]; |
|||
}).join(", ") + ")" |
|||
] |
|||
} |
|||
}); |
|||
</script> |
|||
</head> |
|||
<body></body> |
|||
</html> |
@ -0,0 +1,17 @@ |
|||
body { |
|||
overflow: hidden; |
|||
} |
|||
#panel { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
padding: 4px; |
|||
background: rgb(240, 240, 240); |
|||
overflow: auto; |
|||
} |
|||
.margin { |
|||
float: left; |
|||
margin: 4px; |
|||
} |
@ -0,0 +1,44 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<title>test</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/> |
|||
<link rel="stylesheet" type="text/css" href="css/form.css"/> |
|||
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.data.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script> |
|||
<script> |
|||
$(function() { |
|||
var fn = function() { |
|||
alert("OK"); |
|||
}, |
|||
$button = new Ox.Button({id: "button", title: "Button"}) |
|||
.appendTo($("body")), |
|||
$bind = new Ox.Button({id: "bind", title: "Bind"}) |
|||
.bindEvent("click", function() { |
|||
Ox.print("Click Bind") |
|||
Ox.Event.bind($button.options("id"), "click", fn); |
|||
}) |
|||
.appendTo($("body")), |
|||
$unbind = new Ox.Button({id: "unbind", title: "Unbind"}) |
|||
.bindEvent("click", function() { |
|||
Ox.print("Click Unbind") |
|||
Ox.Event.unbind($button.options("id"), "click", fn); |
|||
}) |
|||
.appendTo($("body")), |
|||
$change = new Ox.Button({id: "change", title: "Change ID"}) |
|||
.bindEvent("click", function() { |
|||
Ox.print("Click Change ID") |
|||
$button.options({ |
|||
id: "button2", |
|||
title: "Button 2" |
|||
}); |
|||
}) |
|||
.appendTo($("body")); |
|||
}); |
|||
</script> |
|||
</head> |
|||
<body></body> |
|||
</html> |
@ -0,0 +1,24 @@ |
|||
<!DOCTYPE HTML> |
|||
<html> |
|||
<head> |
|||
<title>ox.js form demo</title> |
|||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|||
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/> |
|||
<link rel="stylesheet" type="text/css" href="css/form.css"/> |
|||
<script type="text/javascript" src="../../build/js/jquery-1.4.2.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.data.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.data.js"></script> |
|||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script> |
|||
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> |
|||
<script type="text/javascript" src="js/form.js"></script> |
|||
<!--<script> |
|||
$(function() { |
|||
new Ox.Button({title: "close", type: "image"}).appendTo($("body")); |
|||
new Ox.Button({title: "remove", type: "image"}).appendTo($("body")); |
|||
new Ox.Button({title: "add", type: "image"}).appendTo($("body")); |
|||
}); |
|||
</script>--> |
|||
</head> |
|||
<body></body> |
|||
</html> |
After Width: | Height: | Size: 204 KiB |
After Width: | Height: | Size: 200 KiB |
After Width: | Height: | Size: 179 KiB |
After Width: | Height: | Size: 220 KiB |
After Width: | Height: | Size: 114 KiB |
After Width: | Height: | Size: 92 KiB |
After Width: | Height: | Size: 232 KiB |
After Width: | Height: | Size: 196 KiB |
After Width: | Height: | Size: 217 KiB |
After Width: | Height: | Size: 225 KiB |