menu demo with select-like element
This commit is contained in:
parent
554f5a5e16
commit
eb2decae42
6 changed files with 217 additions and 69 deletions
|
@ -90,6 +90,32 @@ Forms
|
||||||
color: rgb(160, 160, 160)
|
color: rgb(160, 160, 160)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
================================================================================
|
||||||
|
Menus
|
||||||
|
================================================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.OxThemeClassic .OxMenu {
|
||||||
|
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
|
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxMenu .OxBottom,
|
||||||
|
.OxThemeClassic .OxMenu .OxItem,
|
||||||
|
.OxThemeClassic .OxMenu .OxScrollbar,
|
||||||
|
.OxThemeClassic .OxMenu .OxSpace,
|
||||||
|
.OxThemeClassic .OxMenu .OxTop {
|
||||||
|
background: rgba(208, 208, 208, 0.96);
|
||||||
|
}
|
||||||
|
.OxThemeClassic .OxMenu .OxItem.OxSelected,
|
||||||
|
.OxThemeClassic .OxMenu .OxLine,
|
||||||
|
.OxThemeClassic .OxMenu .OxScrollbar.OxSelected {
|
||||||
|
background: rgba(192, 192, 192, 0.96);
|
||||||
|
}
|
||||||
|
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
|
||||||
|
color: rgb(160, 160, 160);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Scrollbars
|
Scrollbars
|
||||||
|
|
|
@ -17,6 +17,9 @@ div, input {
|
||||||
font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
|
font-family: Lucida Grande, Lucida Sans Unicode, Segoe UI;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
td {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Core
|
Core
|
||||||
|
@ -308,10 +311,8 @@ Menus
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
-moz-border-radius-bottomleft: 4px;
|
-moz-border-radius-bottomleft: 4px;
|
||||||
-moz-border-radius-bottomright: 4px;
|
-moz-border-radius-bottomright: 4px;
|
||||||
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
-webkit-border-bottom-left-radius: 4px;
|
||||||
-webkit-border-bottom-right-radius: 4px;
|
-webkit-border-bottom-right-radius: 4px;
|
||||||
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
|
||||||
}
|
}
|
||||||
.OxMenu.OxRight {
|
.OxMenu.OxRight {
|
||||||
-moz-border-radius-topright: 4px;
|
-moz-border-radius-topright: 4px;
|
||||||
|
@ -319,7 +320,6 @@ Menus
|
||||||
}
|
}
|
||||||
.OxMenu .OxTop {
|
.OxMenu .OxTop {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: rgba(48, 48, 48, 0.96);
|
|
||||||
}
|
}
|
||||||
.OxMenu.OxRight .OxTop {
|
.OxMenu.OxRight .OxTop {
|
||||||
-moz-border-radius-topright: 4px;
|
-moz-border-radius-topright: 4px;
|
||||||
|
@ -327,7 +327,6 @@ Menus
|
||||||
}
|
}
|
||||||
.OxMenu .OxBottom {
|
.OxMenu .OxBottom {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: rgba(48, 48, 48, 0.96);
|
|
||||||
-moz-border-radius-bottomleft: 4px;
|
-moz-border-radius-bottomleft: 4px;
|
||||||
-moz-border-radius-bottomright: 4px;
|
-moz-border-radius-bottomright: 4px;
|
||||||
-webkit-border-bottom-left-radius: 4px;
|
-webkit-border-bottom-left-radius: 4px;
|
||||||
|
@ -343,7 +342,6 @@ Menus
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
}
|
}
|
||||||
.OxMenu .OxItem {
|
.OxMenu .OxItem {
|
||||||
background: rgba(48, 48, 48, 0.96);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.OxMenu.OxLarge .OxItem {
|
.OxMenu.OxLarge .OxItem {
|
||||||
|
@ -358,9 +356,6 @@ Menus
|
||||||
.OxMenu .OxItem.OxDisabled {
|
.OxMenu .OxItem.OxDisabled {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
.OxMenu .OxItem.OxSelected {
|
|
||||||
background: rgba(64, 64, 64, 0.96);
|
|
||||||
}
|
|
||||||
.OxMenu.OxLarge .OxItem .OxCell {
|
.OxMenu.OxLarge .OxItem .OxCell {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
@ -373,9 +368,6 @@ Menus
|
||||||
height: 12px;
|
height: 12px;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
}
|
}
|
||||||
.OxMenu .OxItem.OxDisabled .OxCell {
|
|
||||||
color: rgb(80, 80, 80);
|
|
||||||
}
|
|
||||||
.OxMenu .OxItem .OxCell.OxStatus {
|
.OxMenu .OxItem .OxCell.OxStatus {
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
|
@ -446,14 +438,11 @@ Menus
|
||||||
}
|
}
|
||||||
.OxMenu .OxSpace {
|
.OxMenu .OxSpace {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: rgba(48, 48, 48, 0.96);
|
|
||||||
}
|
}
|
||||||
.OxMenu .OxLine {
|
.OxMenu .OxLine {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background: rgba(64, 64, 64, 0.96);
|
|
||||||
}
|
}
|
||||||
.OxMenu .OxScrollBar {
|
.OxMenu .OxScrollBar {
|
||||||
background: rgba(48, 48, 48, 0.96);
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: none;
|
display: none;
|
||||||
|
@ -473,10 +462,6 @@ Menus
|
||||||
padding-top: 2px;
|
padding-top: 2px;
|
||||||
font-size: 6px;
|
font-size: 6px;
|
||||||
}
|
}
|
||||||
.OxMenu .OxScrollBar.OxSelected {
|
|
||||||
background: rgba(64, 64, 64, 0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
|
|
|
@ -84,6 +84,32 @@ Forms
|
||||||
color: rgb(96, 96, 96)
|
color: rgb(96, 96, 96)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
================================================================================
|
||||||
|
Menus
|
||||||
|
================================================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
.OxThemeModern .OxMenu {
|
||||||
|
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
|
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
.OxThemeModern .OxMenu .OxBottom,
|
||||||
|
.OxThemeModern .OxMenu .OxItem,
|
||||||
|
.OxThemeModern .OxMenu .OxScrollbar,
|
||||||
|
.OxThemeModern .OxMenu .OxSpace,
|
||||||
|
.OxThemeModern .OxMenu .OxTop {
|
||||||
|
background: rgba(48, 48, 48, 0.96);
|
||||||
|
}
|
||||||
|
.OxThemeModern .OxMenu .OxItem.OxSelected,
|
||||||
|
.OxThemeModern .OxMenu .OxLine,
|
||||||
|
.OxThemeModern .OxMenu .OxScrollbar.OxSelected {
|
||||||
|
background: rgba(64, 64, 64, 0.96);
|
||||||
|
}
|
||||||
|
.OxThemeModern .OxMenu .OxItem.OxDisabled .OxCell {
|
||||||
|
color: rgb(80, 80, 80);
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Scrollbars
|
Scrollbars
|
||||||
|
|
|
@ -203,9 +203,22 @@ requires
|
||||||
|
|
||||||
// use dom elements / jquery instead
|
// use dom elements / jquery instead
|
||||||
|
|
||||||
$eventHandler = $("<div>");
|
|
||||||
|
|
||||||
Ox.Event = function() {
|
Ox.Event = function() {
|
||||||
|
var $eventHandler = $("<div>");
|
||||||
|
return {
|
||||||
|
bind: function(event, callback) {
|
||||||
|
$eventHandler.bind(event, callback);
|
||||||
|
},
|
||||||
|
trigger: function(event, data) {
|
||||||
|
$eventHandler.trigger(event, data);
|
||||||
|
},
|
||||||
|
unbind: function(event) {
|
||||||
|
$eventHandler.unbind(event, callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Ox.Event_ = function() {
|
||||||
var events = {};
|
var events = {};
|
||||||
return {
|
return {
|
||||||
// make these bind, trigger, unbind
|
// make these bind, trigger, unbind
|
||||||
|
@ -1630,6 +1643,7 @@ requires
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Element({}, self)
|
that = new Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
element: null,
|
||||||
id: "",
|
id: "",
|
||||||
items: [],
|
items: [],
|
||||||
offset: {
|
offset: {
|
||||||
|
@ -1650,9 +1664,9 @@ requires
|
||||||
$item;
|
$item;
|
||||||
|
|
||||||
// construct
|
// construct
|
||||||
that.$items = [];
|
that.items = [];
|
||||||
|
that.submenus = {};
|
||||||
that.$scrollbars = [];
|
that.$scrollbars = [];
|
||||||
that.$submenus = {};
|
|
||||||
that.$top = $("<div>")
|
that.$top = $("<div>")
|
||||||
.addClass("OxTop")
|
.addClass("OxTop")
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
|
@ -1665,14 +1679,18 @@ requires
|
||||||
.addClass("OxContent")
|
.addClass("OxContent")
|
||||||
.appendTo(that.$container);
|
.appendTo(that.$container);
|
||||||
$.each(self.options.items, function(i, item) {
|
$.each(self.options.items, function(i, item) {
|
||||||
$.extend(item, {
|
|
||||||
menu: that
|
|
||||||
});
|
|
||||||
if (item.id) {
|
if (item.id) {
|
||||||
$item = new Ox.MenuItem(item)
|
if (!$.isEmptyObject(item.submenu)) {
|
||||||
|
that.submenus[item.id] = new Ox.Menu(item.submenu);
|
||||||
|
}
|
||||||
|
$.extend(item, {
|
||||||
|
menu: that,
|
||||||
|
submenu: that.submenus[item.id] || null
|
||||||
|
});
|
||||||
|
item = new Ox.MenuItem(item)
|
||||||
.data("pos", i)
|
.data("pos", i)
|
||||||
.appendTo(that.$content);
|
.appendTo(that.$content);
|
||||||
that.$items.push($item);
|
that.items.push(item);
|
||||||
that.$content.append($item);
|
that.$content.append($item);
|
||||||
} else {
|
} else {
|
||||||
that.$content.append(constructSpace());
|
that.$content.append(constructSpace());
|
||||||
|
@ -1688,10 +1706,9 @@ requires
|
||||||
|
|
||||||
function constructLine() {
|
function constructLine() {
|
||||||
return $("<tr>").append(
|
return $("<tr>").append(
|
||||||
$("<td>").addClass("OxLine", {
|
$("<td>", {
|
||||||
attr: {
|
"class": "OxLine",
|
||||||
colspan: 5
|
colspan: 5
|
||||||
}
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1699,7 +1716,7 @@ requires
|
||||||
function constructScrollbar(direction) {
|
function constructScrollbar(direction) {
|
||||||
var interval;
|
var interval;
|
||||||
return $("<div/>", {
|
return $("<div/>", {
|
||||||
addClass: "OxScrollBar Ox" + Ox.toTitleCase(direction),
|
addClass: "OxScrollbar Ox" + Ox.toTitleCase(direction),
|
||||||
html: oxui.symbols["triangle_" + direction],
|
html: oxui.symbols["triangle_" + direction],
|
||||||
click: function() { // fixme: do we need to listen to click event?
|
click: function() { // fixme: do we need to listen to click event?
|
||||||
return false;
|
return false;
|
||||||
|
@ -1738,10 +1755,9 @@ requires
|
||||||
|
|
||||||
function constructSpace() {
|
function constructSpace() {
|
||||||
return $("<tr>").append(
|
return $("<tr>").append(
|
||||||
$("<td>").addClass("OxSpace", {
|
$("<td>", {
|
||||||
attr: {
|
"class": "OxSpace",
|
||||||
colspan: 5
|
colspan: 5
|
||||||
}
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1787,9 +1803,10 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
that.hideMenu = function() {
|
that.hideMenu = function() {
|
||||||
$.each(that.$submenus, function(i, $submenu) {
|
Ox.print("hideMenu")
|
||||||
if (!$submenu.is(":hidden")) {
|
$.each(that.submenus, function(i, submenu) {
|
||||||
$submenu.hideMenu();
|
if (!submenu.is(":hidden")) {
|
||||||
|
submenu.hideMenu();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1799,21 +1816,17 @@ requires
|
||||||
|
|
||||||
that.showMenu = function() {
|
that.showMenu = function() {
|
||||||
Ox.print("showMenu")
|
Ox.print("showMenu")
|
||||||
var offset = that.$element.offset(),
|
that.parent().length || that.appendTo($body);
|
||||||
padding = {
|
var offset = self.options.element.offset(),
|
||||||
left: parseInt(that.$element.css("padding-left")),
|
width = self.options.element.outerWidth(),
|
||||||
top: parseInt(that.$element.css("padding-top")),
|
height = self.options.element.outerHeight(),
|
||||||
},
|
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width),
|
||||||
width = that.$element.width(),
|
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height : 0),
|
||||||
height = that.$element.height(),
|
|
||||||
left = offset.left + self.options.offset.left + (self.options.side == "bottom" ? 0 : width + padding.left),
|
|
||||||
top = offset.top + self.options.offset.top + (self.options.side == "bottom" ? height + padding.top : 0),
|
|
||||||
maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight;
|
maxHeight = Math.floor(($window.height() - top - 12) / itemHeight) * itemHeight;
|
||||||
that.css({
|
that.css({
|
||||||
left: left + "px",
|
left: left + "px",
|
||||||
top: top + "px"
|
top: top + "px"
|
||||||
}).show();
|
}).show();
|
||||||
that.parent().length || that.appendTo($body);
|
|
||||||
if (height > maxHeight) {
|
if (height > maxHeight) {
|
||||||
that.$container.height(maxHeight - itemHeight);
|
that.$container.height(maxHeight - itemHeight);
|
||||||
that.$scrollbars.down.show();
|
that.$scrollbars.down.show();
|
||||||
|
@ -1835,8 +1848,7 @@ requires
|
||||||
that = new Ox.Element("tr", self)
|
that = new Ox.Element("tr", self)
|
||||||
.defaults({
|
.defaults({
|
||||||
bind: [],
|
bind: [],
|
||||||
checked: false,
|
checked: null,
|
||||||
click: function() {},
|
|
||||||
disabled: false,
|
disabled: false,
|
||||||
group: "",
|
group: "",
|
||||||
icon: "",
|
icon: "",
|
||||||
|
@ -1850,9 +1862,9 @@ requires
|
||||||
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
|
keyboard: parseKeyboard(options.keyboard || self.defaults.keyboard),
|
||||||
title: Ox.makeArray(options.title || self.defaults.title)
|
title: Ox.makeArray(options.title || self.defaults.title)
|
||||||
}))
|
}))
|
||||||
.addClass("OxMenuItem " + (self.options.disabled ? "OxDisabled" : ""))
|
.addClass("OxItem" + (self.options.disabled ? " OxDisabled" : ""))
|
||||||
.attr({
|
.attr({
|
||||||
id: Ox.toCamelCase(self.options.menu + "/" + self.options.id)
|
id: Ox.toCamelCase(self.options.menu.id + "/" + self.options.id)
|
||||||
})
|
})
|
||||||
.click(click)
|
.click(click)
|
||||||
.data("group", self.options.group)
|
.data("group", self.options.group)
|
||||||
|
@ -1862,31 +1874,29 @@ requires
|
||||||
// construct
|
// construct
|
||||||
that.append(
|
that.append(
|
||||||
that.$status = $("<td>", {
|
that.$status = $("<td>", {
|
||||||
addClass: "OxCell OxStatus",
|
"class": "OxCell OxStatus",
|
||||||
html: self.options.checked ? oxui.symbols.check : ""
|
html: self.options.checked ? oxui.symbols.check : ""
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
that.$icon = $("<td>", {
|
that.$icon = $("<td>", {
|
||||||
"addClass": "OxCell OxIcon"
|
"class": "OxCell OxIcon"
|
||||||
})
|
})
|
||||||
.append(self.options.icon ?
|
.append(self.options.icon ?
|
||||||
$("<img>", {
|
$("<img>", {
|
||||||
attr: {
|
src: self.options.icon
|
||||||
src: self.options.icon
|
|
||||||
}
|
|
||||||
}) : null
|
}) : null
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
that.$title = $("<td>", {
|
that.$title = $("<td>", {
|
||||||
addClass: "OxCell OxTitle",
|
"class": "OxCell OxTitle",
|
||||||
html: self.options.title[0]
|
html: self.options.title[0]
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
$("<td>", {
|
$("<td>", {
|
||||||
addClass: "OxCell OxModifiers",
|
"class": "OxCell OxModifiers",
|
||||||
html: $.map(self.options.keyboard.modifiers, function(modifier) {
|
html: $.map(self.options.keyboard.modifiers, function(modifier) {
|
||||||
return oxui.symbol[modifier];
|
return oxui.symbol[modifier];
|
||||||
}).join("")
|
}).join("")
|
||||||
|
@ -1894,7 +1904,7 @@ requires
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
$("<td>", {
|
$("<td>", {
|
||||||
addClass: "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"),
|
"class": "OxCell Ox" + (self.options.submenu ? "Submenu" : "Key"),
|
||||||
html: self.options.submenu ? oxui.symbols.triangle_right :
|
html: self.options.submenu ? oxui.symbols.triangle_right :
|
||||||
oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key
|
oxui.symbols[self.options.keyboard.key] || self.options.keyboard.key
|
||||||
})
|
})
|
||||||
|
@ -1902,17 +1912,19 @@ requires
|
||||||
|
|
||||||
function click() {
|
function click() {
|
||||||
if (!that.hasClass("OxDisabled") && !self.options.submenu) {
|
if (!that.hasClass("OxDisabled") && !self.options.submenu) {
|
||||||
menu.hideMenu();
|
self.options.menu.hideMenu();
|
||||||
self.options.click();
|
if (self.options.checked !== null && (!self.options.group || !self.options.checked)) {
|
||||||
if (self.options.group && !self.options.checked) {
|
|
||||||
that.options({
|
that.options({
|
||||||
checked: true
|
checked: !self.options.checked
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
if (self.options.title.length == 2) {
|
if (self.options.title.length == 2) {
|
||||||
that.toggleTitle();
|
that.toggleTitle();
|
||||||
}
|
}
|
||||||
$eventHandler.trigger("clickMenu", self.options.id);
|
$("*").trigger("OxClickMenu", {
|
||||||
|
id: self.options.id,
|
||||||
|
value: self.options.title // fixme: value or title?
|
||||||
|
});
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1922,7 +1934,7 @@ requires
|
||||||
$.each(self.options.menu.submenus, function(id, submenu) {
|
$.each(self.options.menu.submenus, function(id, submenu) {
|
||||||
submenu.hideMenu();
|
submenu.hideMenu();
|
||||||
});
|
});
|
||||||
$(".OxMenu .OxMenuItem[id!=" + self.options.id + "]").removeClass("selected");
|
$(".OxMenu .OxItem[id!=" + self.options.id + "]").removeClass("selected");
|
||||||
self.options.submenu && self.options.submenu.showMenu(); // fixme: do we want to switch to this style?
|
self.options.submenu && self.options.submenu.showMenu(); // fixme: do we want to switch to this style?
|
||||||
that.addClass("OxSelected");
|
that.addClass("OxSelected");
|
||||||
}
|
}
|
||||||
|
@ -1944,8 +1956,23 @@ requires
|
||||||
}
|
}
|
||||||
|
|
||||||
self.onChange = function(key, value) {
|
self.onChange = function(key, value) {
|
||||||
|
Ox.print("MenuItem", self.options.id, "onChange", key, value);
|
||||||
if (key == "checked") {
|
if (key == "checked") {
|
||||||
that.$status.html(oxui.symbols.checked);
|
if (value && self.options.group) {
|
||||||
|
$.each(self.options.menu.items, function(i, item) {
|
||||||
|
if (
|
||||||
|
item.options("id") != self.options.id &&
|
||||||
|
item.options("group") == self.options.group &&
|
||||||
|
item.options("checked")
|
||||||
|
) {
|
||||||
|
item.options({
|
||||||
|
checked: false
|
||||||
|
});
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
that.$status.html(value ? oxui.symbols.check : "")
|
||||||
} else if (key == "disabled") {
|
} else if (key == "disabled") {
|
||||||
that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change
|
that.toggleClass("disabled"); // fixme: this will only work if onChange is only invoked on actual change
|
||||||
}
|
}
|
||||||
|
|
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…
Reference in a new issue