oxjstmp/demos/test/menu.js

150 lines
4.9 KiB
JavaScript
Raw Normal View History

2010-02-04 08:02:23 +00:00
$(function() {
var button = new Ox.Button({
value: "First",
}).css({
position: "absolute",
left: "16px",
2010-02-04 08:05:05 +00:00
top: "16px",
2010-02-04 08:06:56 +00:00
width: "64px",
textAlign: "left"
2010-02-04 08:02:23 +00:00
}).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,
2010-02-05 05:20:13 +00:00
disabled: true,
2010-02-04 08:02:23 +00:00
group: "123",
id: "fifth",
title: "Fifth"
},
{
checked: false,
group: "123",
id: "sixth",
title: "Sixth"
2010-02-05 05:20:13 +00:00
},
{},
{
id: "more",
items: [
{
checked: true,
group: "789",
id: "seventh",
title: "Seventh"
},
{
checked: false,
group: "789",
id: "eighth",
title: "Eighth"
},
{
checked: false,
group: "789",
id: "ninth",
title: "Ninth"
},
],
title: "More",
2010-02-05 09:13:03 +00:00
},
{
id: "even_more",
items: [
{
checked: true,
group: "101112",
id: "tenth",
title: "Tenth"
},
{
checked: false,
group: "101112",
id: "eleventh",
title: "Eleventh"
},
{
checked: false,
group: "101112",
id: "twelfth",
title: "Twelfth"
},
],
2010-02-05 14:59:24 +00:00
title: "Even More"
},
2010-02-05 16:05:48 +00:00
{
id: "nothing_more",
items: [
{
disabled: true,
id: "nothing",
title: "Nothing"
}
],
title: "Nothing More"
},
2010-02-05 14:59:24 +00:00
{},
{
id: "foo",
title: "Foo"
},
{
id: "bar",
title: "Bar"
},
{
id: "baz",
title: "Baz"
2010-02-04 08:02:23 +00:00
}
]
});
2010-02-05 09:13:03 +00:00
button
.click(function() {
$(this).blur(); // fix for firefox
menu.toggleMenu();
})
2010-02-06 08:23:42 +00:00
.bindEvent("OxClickMenu." + menu.id, function(event, data) {
2010-02-05 09:13:03 +00:00
button.options({
value: data.value
});
2010-02-04 08:02:23 +00:00
});
$select = $("<select>")
.css({
position: "absolute",
left: "160px",
top: "16px"
})
.appendTo($("body"));
$.each(["First", "Second", "Third"], function(i, v) {
$select.append(
$("<option>").html(v)
);
});
});