forked from 0x2620/oxjs
merging changes
This commit is contained in:
parent
e2f6492638
commit
9842418f0d
111 changed files with 5275 additions and 930 deletions
76
demos/form2/color.html
Normal file
76
demos/form2/color.html
Normal file
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue