0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

basic select (in demos/test/index.html)

Browse source
This commit is contained in:
Rolux 2010-02-06 11:51:01 +05:30
parent ed5667de85
commit 75f16e5fb8
3 changed files with 141 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
build/css/ox.ui.css
View file

@ -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

119
build/js/ox.ui.js
View file

@ -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,16 +1297,17 @@ requires
options.value[0] : options.value, options.value[0] : options.value,
values: $.makeArray(options.value) values: $.makeArray(options.value)
})); }));
that.attr({ console.log("!!", self.options)
disabled: self.options.disabled ? "disabled" : "", that.attr({
type: self.options.type == "text" ? "button" : "image" disabled: self.options.disabled ? "disabled" : "",
}) type: self.options.type == "text" ? "button" : "image"
.addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) + })
(self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") + .addClass("OxButton Ox" + Ox.toTitleCase(self.options.size) +
(self.options.disabled ? " OxDisabled": "") + (self.options.style ? " Ox" + Ox.toTitleCase(self.options.style) : "") +
(self.options.selected ? " OxSelected": "")) (self.options.disabled ? " OxDisabled": "") +
.mousedown(mousedown) (self.options.selected ? " OxSelected": ""))
.click(click); .mousedown(mousedown)
.click(click);
//console.log(self.options.value, self.options.disabled) //console.log(self.options.value, self.options.disabled)
/* /*
that.bind("OxElement" + that.id + "SetOptions", function(e, data) { that.bind("OxElement" + that.id + "SetOptions", function(e, data) {
@ -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,

28
demos/test/index.html
View file

@ -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") {