150 lines
4.9 KiB
JavaScript
150 lines
4.9 KiB
JavaScript
$(function() {
|
|
var button = new Ox.Button({
|
|
value: "First",
|
|
}).css({
|
|
position: "absolute",
|
|
left: "16px",
|
|
top: "16px",
|
|
width: "64px",
|
|
textAlign: "left"
|
|
}).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,
|
|
disabled: true,
|
|
group: "123",
|
|
id: "fifth",
|
|
title: "Fifth"
|
|
},
|
|
{
|
|
checked: false,
|
|
group: "123",
|
|
id: "sixth",
|
|
title: "Sixth"
|
|
},
|
|
{},
|
|
{
|
|
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",
|
|
},
|
|
{
|
|
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"
|
|
},
|
|
],
|
|
title: "Even More"
|
|
},
|
|
{
|
|
id: "nothing_more",
|
|
items: [
|
|
{
|
|
disabled: true,
|
|
id: "nothing",
|
|
title: "Nothing"
|
|
}
|
|
],
|
|
title: "Nothing More"
|
|
},
|
|
{},
|
|
{
|
|
id: "foo",
|
|
title: "Foo"
|
|
},
|
|
{
|
|
id: "bar",
|
|
title: "Bar"
|
|
},
|
|
{
|
|
id: "baz",
|
|
title: "Baz"
|
|
}
|
|
]
|
|
});
|
|
button
|
|
.click(function() {
|
|
$(this).blur(); // fix for firefox
|
|
menu.toggleMenu();
|
|
})
|
|
.bindEvent("OxClickMenu." + menu.id, function(event, 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)
|
|
);
|
|
});
|
|
}); |