basic select (in demos/test/index.html)
This commit is contained in:
parent
ed5667de85
commit
75f16e5fb8
3 changed files with 141 additions and 46 deletions
|
@ -139,6 +139,10 @@ input[type=submit] {
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
input.OxSelect {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
/*
|
||||||
input.OxXlarge {
|
input.OxXlarge {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
font-size: 19px;
|
font-size: 19px;
|
||||||
|
@ -153,21 +157,22 @@ input.OxLarge {
|
||||||
-moz-border-radius: 12px;
|
-moz-border-radius: 12px;
|
||||||
-webkit-border-radius: 12px;
|
-webkit-border-radius: 12px;
|
||||||
}
|
}
|
||||||
input.OxMedium {
|
*/
|
||||||
|
input.OxLarge {
|
||||||
height: 18px;
|
height: 18px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 0 8px 0 8px;
|
padding: 0 8px 0 8px;
|
||||||
-moz-border-radius: 10px;
|
-moz-border-radius: 10px;
|
||||||
-webkit-border-radius: 10px;
|
-webkit-border-radius: 10px;
|
||||||
}
|
}
|
||||||
input.OxSmall {
|
input.OxMedium {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
padding: 0 6px 0 6px;
|
padding: 0 6px 0 6px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
-moz-border-radius: 8px;
|
-moz-border-radius: 8px;
|
||||||
-webkit-border-radius: 8px;
|
-webkit-border-radius: 8px;
|
||||||
}
|
}
|
||||||
input.OxXsmall {
|
input.OxSmall {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
padding: 0 4px 0 4px;
|
padding: 0 4px 0 4px;
|
||||||
font-size: 8px;
|
font-size: 8px;
|
||||||
|
@ -179,15 +184,20 @@ input[type=image] {
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
input[type=image].OxLarge {
|
input[type=image].OxLarge {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
}
|
}
|
||||||
input[type=image].OxMedium {
|
*/
|
||||||
|
input[type=image].OxLarge {
|
||||||
width: 18px;
|
width: 18px;
|
||||||
}
|
}
|
||||||
input[type=image].OxSmall {
|
input[type=image].OxMedium {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
}
|
}
|
||||||
|
input[type=image].OxSmall {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
input::-moz-focus-inner {
|
input::-moz-focus-inner {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
@ -298,7 +308,27 @@ OxRange
|
||||||
.OxRange > .OxTrack > .OxThumb:first-child {
|
.OxRange > .OxTrack > .OxThumb:first-child {
|
||||||
margin-top: -1px;
|
margin-top: -1px;
|
||||||
}
|
}
|
||||||
|
/*
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
OxSelect
|
||||||
|
--------------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
.OxSelect.OxMedium {
|
||||||
|
|
||||||
|
}
|
||||||
|
.OxSelect > .OxButton {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.OxSelect > .OxSymbol {
|
||||||
|
text-align: right;
|
||||||
|
cursor: pointer;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
}
|
||||||
|
.OxSelect.OxMedium > .OxSymbol {
|
||||||
|
margin-left: 8px;
|
||||||
|
margin-top: -16px;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
================================================================================
|
================================================================================
|
||||||
Menus
|
Menus
|
||||||
|
|
|
@ -830,6 +830,7 @@ requires
|
||||||
} else {
|
} else {
|
||||||
Ox.Event.bind(that.id, arguments[0], arguments[1]);
|
Ox.Event.bind(that.id, arguments[0], arguments[1]);
|
||||||
}
|
}
|
||||||
|
return that;
|
||||||
};
|
};
|
||||||
that.defaults = function(defaults) {
|
that.defaults = function(defaults) {
|
||||||
/*
|
/*
|
||||||
|
@ -873,8 +874,8 @@ requires
|
||||||
// otherwise, extend options
|
// otherwise, extend options
|
||||||
self.options = $.extend(
|
self.options = $.extend(
|
||||||
self.options || self.defaults, args);
|
self.options || self.defaults, args);
|
||||||
$.each(args, function(k, v) {
|
$.each(args, function(key, value) {
|
||||||
self.onChange(k, v);
|
self.onChange(key, value);
|
||||||
});
|
});
|
||||||
ret = that;
|
ret = that;
|
||||||
}
|
}
|
||||||
|
@ -883,6 +884,7 @@ requires
|
||||||
that.remove = function() {
|
that.remove = function() {
|
||||||
that.$element.remove();
|
that.$element.remove();
|
||||||
delete elements[that.ox];
|
delete elements[that.ox];
|
||||||
|
return that;
|
||||||
}
|
}
|
||||||
that.unbindEvent = function() {
|
that.unbindEvent = function() {
|
||||||
/*
|
/*
|
||||||
|
@ -895,6 +897,7 @@ requires
|
||||||
} else {
|
} else {
|
||||||
Ox.Event.unbind(that.id, arguments[0], arguments[1]);
|
Ox.Event.unbind(that.id, arguments[0], arguments[1]);
|
||||||
}
|
}
|
||||||
|
return that;
|
||||||
}
|
}
|
||||||
|
|
||||||
// return
|
// return
|
||||||
|
@ -1278,12 +1281,12 @@ requires
|
||||||
that = new Ox.Element("input", self)
|
that = new Ox.Element("input", self)
|
||||||
.defaults({
|
.defaults({
|
||||||
buttonId: null,
|
buttonId: null,
|
||||||
click: function() {},
|
//click: function() {},
|
||||||
disabled: false,
|
disabled: false,
|
||||||
groupId: null,
|
groupId: null,
|
||||||
selectable: false,
|
selectable: false,
|
||||||
selected: false,
|
selected: false,
|
||||||
size: "small",
|
size: "medium",
|
||||||
style: "", // can be symbol or tab
|
style: "", // can be symbol or tab
|
||||||
type: "text",
|
type: "text",
|
||||||
value: "",
|
value: "",
|
||||||
|
@ -1294,6 +1297,7 @@ requires
|
||||||
options.value[0] : options.value,
|
options.value[0] : options.value,
|
||||||
values: $.makeArray(options.value)
|
values: $.makeArray(options.value)
|
||||||
}));
|
}));
|
||||||
|
console.log("!!", self.options)
|
||||||
that.attr({
|
that.attr({
|
||||||
disabled: self.options.disabled ? "disabled" : "",
|
disabled: self.options.disabled ? "disabled" : "",
|
||||||
type: self.options.type == "text" ? "button" : "image"
|
type: self.options.type == "text" ? "button" : "image"
|
||||||
|
@ -1334,6 +1338,7 @@ requires
|
||||||
if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
|
if (self.options.selectable && !(self.options.groupId !== null && self.options.selected)) {
|
||||||
that.toggleSelected();
|
that.toggleSelected();
|
||||||
}
|
}
|
||||||
|
Ox.print(self.options);
|
||||||
if (self.options.values.length == 2) {
|
if (self.options.values.length == 2) {
|
||||||
console.log("2 values")
|
console.log("2 values")
|
||||||
that.options({
|
that.options({
|
||||||
|
@ -1341,16 +1346,17 @@ requires
|
||||||
self.options.values[1] : self.options.values[0]
|
self.options.values[1] : self.options.values[0]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
self.options.click();
|
//self.options.click();
|
||||||
}
|
}
|
||||||
self.onChange = function(option, value) {
|
self.onChange = function(key, value) {
|
||||||
//console.log("setOption", option, value)
|
//console.log("setOption", option, value)
|
||||||
if (option == "selected") {
|
Ox.print("OxButton onChange", key, value)
|
||||||
|
if (key == "selected") {
|
||||||
if (value != that.hasClass("OxSelected")) {
|
if (value != that.hasClass("OxSelected")) {
|
||||||
that.toggleClass("OxSelected");
|
that.toggleClass("OxSelected");
|
||||||
}
|
}
|
||||||
}
|
} else if (key == "value") {
|
||||||
if (option == "value") {
|
Ox.print("OxButton onChange value", value)
|
||||||
if (self.options.type == "image") {
|
if (self.options.type == "image") {
|
||||||
that.attr({
|
that.attr({
|
||||||
src: oxui.path + "png/ox.ui." + Ox.theme() +
|
src: oxui.path + "png/ox.ui." + Ox.theme() +
|
||||||
|
@ -1389,7 +1395,7 @@ requires
|
||||||
groupId: Ox.uid(),
|
groupId: Ox.uid(),
|
||||||
selectable: false,
|
selectable: false,
|
||||||
selected: -1,
|
selected: -1,
|
||||||
size: "small",
|
size: "medium",
|
||||||
style: "",
|
style: "",
|
||||||
type: "text",
|
type: "text",
|
||||||
values: []
|
values: []
|
||||||
|
@ -1436,7 +1442,7 @@ requires
|
||||||
that = new Ox.Element("input", self)
|
that = new Ox.Element("input", self)
|
||||||
.defaults({
|
.defaults({
|
||||||
placeholder: "",
|
placeholder: "",
|
||||||
size: "small",
|
size: "medium",
|
||||||
type: "text"
|
type: "text"
|
||||||
})
|
})
|
||||||
.options(options || {});
|
.options(options || {});
|
||||||
|
@ -1701,31 +1707,73 @@ requires
|
||||||
Ox.Select = function(options, self) {
|
Ox.Select = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Button({}, self)
|
that = new Ox.Element("div", self)
|
||||||
.defaults({
|
.defaults({
|
||||||
id: "",
|
id: "",
|
||||||
items: []
|
items: [],
|
||||||
|
size: "medium"
|
||||||
})
|
})
|
||||||
.options(options)
|
.options(options)
|
||||||
.click(click),
|
.addClass("OxSelect Ox" + Ox.toTitleCase(self.options.size)),
|
||||||
items;
|
selected;
|
||||||
|
|
||||||
$.each(self.options.items, function(i, item) {
|
$.each(self.options.items, function(i, item) {
|
||||||
items.push({
|
self.options.items[i] = $.extend(self.options.items[i], {
|
||||||
checked: false,
|
checked: item.checked || false,
|
||||||
group: self.options.id,
|
group: self.options.id,
|
||||||
title: item.title
|
});
|
||||||
|
if (item.checked) {
|
||||||
|
selected = i;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
that.$button = new Ox.Button($.extend(self.options, {
|
||||||
|
type: "text", // fixme: this shouldn't be necessary
|
||||||
|
value: self.options.items[selected].title
|
||||||
|
}), {})
|
||||||
|
.click(clickButton)
|
||||||
|
.bindEvent("OxClickMenu." + self.options.id, clickMenu)
|
||||||
|
.appendTo(that);
|
||||||
|
|
||||||
|
that.$symbol = $("<div>", {
|
||||||
|
"class": "OxSymbol",
|
||||||
|
html: oxui.symbols.select
|
||||||
})
|
})
|
||||||
|
.click(function() {
|
||||||
|
that.$button.trigger("click");
|
||||||
|
})
|
||||||
|
.appendTo(that.$element);
|
||||||
|
|
||||||
that.$menu = new Ox.Menu({
|
that.$menu = new Ox.Menu({
|
||||||
|
element: that.$button,
|
||||||
|
id: self.options.id,
|
||||||
|
items: self.options.items,
|
||||||
|
side: "bottom",
|
||||||
|
size: self.options.size
|
||||||
|
});
|
||||||
|
|
||||||
})
|
function clickButton() {
|
||||||
|
that.$menu.toggleMenu();
|
||||||
function click() {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function clickMenu(event, data) {
|
||||||
|
that.$button.options({
|
||||||
|
value: data.value
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.onChange = function(key, value) {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
that.width = function(val) {
|
||||||
|
// fixme: silly hack, and won't work for css()
|
||||||
|
that.$element.width(val);
|
||||||
|
that.$button.width(val);
|
||||||
|
that.$symbol.width(val);
|
||||||
|
return that;
|
||||||
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -2216,9 +2264,9 @@ requires
|
||||||
if (self.options.title.length == 2) {
|
if (self.options.title.length == 2) {
|
||||||
that.toggleTitle();
|
that.toggleTitle();
|
||||||
}
|
}
|
||||||
Ox.Event.trigger("OxClickMenu", {
|
Ox.Event.trigger("OxClickMenu." + self.options.menu.options("id"), {
|
||||||
id: self.options.id,
|
id: self.options.id,
|
||||||
value: self.options.title // fixme: value or title?
|
value: self.options.title[0] // fixme: value or title?
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -2359,7 +2407,6 @@ requires
|
||||||
.dblclick(dblclickTitlebar)
|
.dblclick(dblclickTitlebar)
|
||||||
.appendTo(that),
|
.appendTo(that),
|
||||||
$switch = new Ox.Button({
|
$switch = new Ox.Button({
|
||||||
size: "small",
|
|
||||||
style: "symbol",
|
style: "symbol",
|
||||||
type: "image",
|
type: "image",
|
||||||
value: value,
|
value: value,
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
<script type="text/javascript" src="../../build/js/ox.ui.js"></script>
|
||||||
<script>
|
<script>
|
||||||
$(function() {
|
$(function() {
|
||||||
var size = window.location.hash.substr(1) || "small",
|
var size = window.location.hash.substr(1) || "medium",
|
||||||
$body = $("body"),
|
$body = $("body"),
|
||||||
$toolbars = [];
|
$toolbars = [];
|
||||||
|
|
||||||
|
@ -121,7 +121,7 @@
|
||||||
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
|
$toolbars[5] = Ox.Bar({size: 24}).appendTo(mainPanel);
|
||||||
|
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
size: "medium",
|
size: "large",
|
||||||
type: "text",
|
type: "text",
|
||||||
value: "Switch Theme"
|
value: "Switch Theme"
|
||||||
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
|
}).addClass("margin").click(switchTheme).appendTo($toolbars[0]);
|
||||||
|
@ -132,7 +132,7 @@
|
||||||
}).addClass("margin").appendTo($toolbars[1]);
|
}).addClass("margin").appendTo($toolbars[1]);
|
||||||
///*
|
///*
|
||||||
Ox.Button({
|
Ox.Button({
|
||||||
size: "xsmall",
|
size: "small",
|
||||||
type: "text",
|
type: "text",
|
||||||
value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
|
value: ['Button, value=["foo", "bar"] (foo)', 'Button, value=["foo", "bar"] (bar)']
|
||||||
}).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
|
}).addClass("margin").css({width: "256px"}).appendTo($toolbars[1]);
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
Ox.ButtonGroup({
|
Ox.ButtonGroup({
|
||||||
selectable: true,
|
selectable: true,
|
||||||
selected: 0,
|
selected: 0,
|
||||||
size: "small",
|
size: "medium",
|
||||||
type: "image",
|
type: "image",
|
||||||
values: ["close", "add", "remove"]
|
values: ["close", "add", "remove"]
|
||||||
}).addClass("padding").appendTo($toolbars[2]);
|
}).addClass("padding").appendTo($toolbars[2]);
|
||||||
|
@ -197,7 +197,7 @@
|
||||||
.css({
|
.css({
|
||||||
width: "32px"
|
width: "32px"
|
||||||
})
|
})
|
||||||
.subscribe("change." + range.id, update)
|
.bindEvent("change." + range.id, update)
|
||||||
.appendTo($toolbars[4]);
|
.appendTo($toolbars[4]);
|
||||||
function update() {
|
function update() {
|
||||||
//console.log("update", range.options("value"))
|
//console.log("update", range.options("value"))
|
||||||
|
@ -227,6 +227,24 @@
|
||||||
type: "text",
|
type: "text",
|
||||||
value: "Foo"
|
value: "Foo"
|
||||||
}).addClass("margin").appendTo(mainPanel);
|
}).addClass("margin").appendTo(mainPanel);
|
||||||
|
Ox.Select({
|
||||||
|
id: "select",
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
checked: true,
|
||||||
|
id: "one",
|
||||||
|
title: "One"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "two",
|
||||||
|
title: "Two"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "three",
|
||||||
|
title: "Three"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).addClass("margin").width(96).appendTo(mainPanel);
|
||||||
//*/
|
//*/
|
||||||
function switchTheme() {
|
function switchTheme() {
|
||||||
if (Ox.theme() == "classic") {
|
if (Ox.theme() == "classic") {
|
||||||
|
|
Loading…
Reference in a new issue