menu demo with select-like element
This commit is contained in:
parent
554f5a5e16
commit
eb2decae42
6 changed files with 217 additions and 69 deletions
12
demos/test/menu.html
Normal file
12
demos/test/menu.html
Normal 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
72
demos/test/menu.js
Normal 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)
|
||||
);
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue