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

adding loading icon

Browse source
This commit is contained in:
Rolux 2010-02-20 13:59:03 +05:30
parent 96b29f0c19
commit b74c5bee15
4 changed files with 103 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -651,3 +651,18 @@ Panels
bottom: 0;
overflow: hidden;
}
/*
================================================================================
Requests
================================================================================
*/
.OxLoadingIcon {
opacity: 0;
}
.OxLoadingIcon.OxMedium {
width: 16px;
height: 16px;
}

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

@ -2230,7 +2230,9 @@ requires
.addClass("OxExtras")
.appendTo(that.$element);
$.each(self.options.extras, function(position, extra) {
extra.appendTo(that.extras);
extra.css({
float: "left" // fixme: need class!
}).appendTo(that.extras);
});
}
@ -3188,23 +3190,64 @@ requires
};
})();
/*
============================================================================
Requests
============================================================================
*/
/*
============================================================================
Requests
============================================================================
*/
/*
----------------------------------------------------------------------------
Ox.LoadingIcon
----------------------------------------------------------------------------
*/
/*
----------------------------------------------------------------------------
Ox.Progressbar
----------------------------------------------------------------------------
*/
Ox.LoadingIcon = function(options, self) {
var self = self || {},
that = new Ox.Element("img", self)
.defaults({
size: "medium"
})
.options(options || {})
.attr({
src: oxui.path + "/png/ox.ui.classic/loading.png"
})
.addClass(
"OxLoadingIcon Ox" + Ox.toTitleCase(self.options.size)
);
self.deg = 0;
function update() {
Ox.print(self.deg, "deg");
that.css({
MozTransform: "rotate(" + self.deg + "deg)",
WebkitTransform: "rotate(" + self.deg + "deg)"
});
}
that.start = function() {
self.deg = 0;
that.css({
opacity: 1
});
self.interval = setInterval(function() {
self.deg = (self.deg + 30) % 360;
update();
}, 83);
};
that.stop = function() {
clearTimeout(self.interval);
self.deg = 0;
that.css({
opacity: 0
});
}
return that;
}
/*
----------------------------------------------------------------------------
Ox.Spinner
----------------------------------------------------------------------------
*/
/*
----------------------------------------------------------------------------
Ox.Progressbar
----------------------------------------------------------------------------
*/
})();

BIN
build/png/ox.ui.classic/loading.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.7 KiB

29
demos/test/index.html
View file

@ -59,6 +59,13 @@
borderBottom: "1px solid rgb(160, 160, 160)"
})*/;
var loadingIcon = new Ox.LoadingIcon({
size: "medium"
})
.css({
marginLeft: "4px"
});
var mainMenu = new Ox.MainMenu({
extras: [
new Ox.Input({
@ -107,7 +114,8 @@
id: "find",
label: ["Find: All", "Find: Title", "Find: Director", "Find: Country", "Find: Cinematographer"],
labelWidth: 96
}).width(320)
}).width(320),
loadingIcon
],
menus: [
{
@ -169,6 +177,12 @@
],
size: "large"
});
Ox.Event.bind(null, "submit_find", function(data) {
loadingIcon.start();
setTimeout(function() {
loadingIcon.stop();
}, 5000);
});
var bottomPanel = Ox.Bar({size: "small"})
.css({
zIndex: 2,
@ -455,6 +469,19 @@
placeholder: ["City", "State"],
selected: 1
}).addClass("margin").width(160).appendTo(mainPanel);
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Foo"
}).addClass("margin").appendTo(mainPanel);
Ox.Button({
selectable: true,
size: size,
type: "text",
value: "Bar"
}).addClass("margin").appendTo(mainPanel);
//*/
function openDialog() {
var $dialog = new Ox.Dialog({