menu demo with select-like element

This commit is contained in:
Rolux 2010-02-04 13:32:23 +05:30
commit eb2decae42
6 changed files with 217 additions and 69 deletions

12
demos/test/menu.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="../../build/css/ox.ui.css"/>
<script type="text/javascript" src="../../build/js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../../build/js/ox.js"></script>
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body></body>
</html>

72
demos/test/menu.js Normal file
View file

@ -0,0 +1,72 @@
$(function() {
var button = new Ox.Button({
value: "First",
}).css({
position: "absolute",
left: "16px",
top: "16px"
}).appendTo($("body")),
menu = new Ox.Menu({
element: button,
id: "select",
items: [
{
checked: true,
group: "123",
id: "first",
title: "First"
},
{
checked: false,
group: "123",
id: "second",
title: "Second"
},
{
checked: false,
group: "123",
id: "third",
title: "Third"
},
{},
{
checked: false,
group: "123",
id: "fourth",
title: "Fourth"
},
{
checked: false,
group: "123",
id: "fifth",
title: "Fifth"
},
{
checked: false,
group: "123",
id: "sixth",
title: "Sixth"
}
]
});
button
.click(menu.toggleMenu)
.bind("OxClickMenu", function(event, data) {
console.log(data)
button.options({
value: data.value
});
});
$select = $("<select>")
.css({
position: "absolute",
left: "160px",
top: "16px"
})
.appendTo($("body"));
$.each(["First", "Second", "Third"], function(i, v) {
$select.append(
$("<option>").html(v)
);
});
});