some css for textareas
This commit is contained in:
rlx
parent
c84de6d0f0
commit
89c9f1c98c
2 changed files with 34 additions and 102 deletions
|
|
@ -69,6 +69,7 @@ Forms
|
|||
.OxThemeClassic .OxButton,
|
||||
.OxThemeClassic input.OxCheckbox,
|
||||
.OxThemeClassic input.OxInput,
|
||||
.OxThemeClassic textarea,
|
||||
.OxThemeClassic .OxLabel,
|
||||
.OxThemeClassic .OxTrack {
|
||||
border: 1px solid rgb(176, 176, 176);
|
||||
|
|
@ -162,7 +163,9 @@ Forms
|
|||
background: rgb(224, 224, 224);
|
||||
}
|
||||
|
||||
|
||||
.OxThemeClassic textarea {
|
||||
background: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
/*
|
||||
================================================================================
|
||||
|
|
@ -204,7 +207,7 @@ Lists
|
|||
-moz-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
-webkit-box-shadow: 0 0 4px rgba(128, 128, 128, 1);
|
||||
}
|
||||
.OxThemeModern .OxIconList .OxItem > .OxText > div > .OxInfo {
|
||||
.OxThemeClassic .OxIconList .OxItem > .OxText > div > .OxInfo {
|
||||
color: rgb(128, 128, 128);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -177,7 +177,6 @@ requires
|
|||
}
|
||||
|
||||
function loadImages(callback) {
|
||||
window.OxImageCache = [];
|
||||
$.getJSON(oxui.path + 'json/ox.ui.images.json', function(data) {
|
||||
var counter = 0,
|
||||
length = data.length;
|
||||
|
|
@ -187,7 +186,6 @@ requires
|
|||
image.onload = function() {
|
||||
(++counter == length) && callback();
|
||||
}
|
||||
window.OxImageCache.push(image);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -2993,7 +2991,7 @@ requires
|
|||
width: self.inputWidth + 'px',
|
||||
textAlign: self.options.textAlign
|
||||
}, self.options.type == 'textarea' ? {
|
||||
height: self.options.height + 'px'
|
||||
height: self.options.height + 'px',
|
||||
} : {}))
|
||||
.val(self.options.value)
|
||||
.blur(blur)
|
||||
|
|
@ -3001,6 +2999,34 @@ requires
|
|||
.focus(focus)
|
||||
.appendTo(that.$element);
|
||||
|
||||
// fixme: is there a better way than this one?
|
||||
if (self.options.type == 'textarea') {
|
||||
$.extend(self, {
|
||||
colors: Ox.theme() == 'classic' ?
|
||||
[208, 232, 244] :
|
||||
[0, 16, 32],
|
||||
colorstops: [8 / self.options.height, self.options.height - 8 / self.options.height]
|
||||
});
|
||||
self.$input.css({
|
||||
background: '-moz-linear-gradient(top, rgb(' +
|
||||
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + '), rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
|
||||
Math.round(self.colorstops[0] * 100) + '%, rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ') ' +
|
||||
Math.round(self.colorstops[1] * 100) + '%, rgb(' +
|
||||
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + '))'
|
||||
});
|
||||
self.$input.css({
|
||||
background: '-webkit-gradient(linear, left top, left bottom, from(rgb(' +
|
||||
[self.colors[0], self.colors[0], self.colors[0]].join(', ') + ')), color-stop(' +
|
||||
self.colorstops[0] + ', ' + 'rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), color-stop( ' +
|
||||
self.colorstops[1] + ', ' + 'rgb(' +
|
||||
[self.colors[1], self.colors[1], self.colors[1]].join(', ') + ')), to(rgb(' +
|
||||
[self.colors[2], self.colors[2], self.colors[2]].join(', ') + ')))'
|
||||
});
|
||||
}
|
||||
|
||||
if (self.hasPasswordPlaceholder) {
|
||||
self.$input.hide();
|
||||
self.$placeholder = $('<input>')
|
||||
|
|
@ -10692,103 +10718,6 @@ requires
|
|||
|
||||
};
|
||||
|
||||
Ox.Flipbook = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
frame = $('<img>').css({
|
||||
'position': 'absolute',
|
||||
'width': '100%',
|
||||
'height': 'auto'
|
||||
})
|
||||
.hide(),
|
||||
icon = $('<img>').css({
|
||||
'position': 'absolute',
|
||||
'width': '100%',
|
||||
'height': 'auto'
|
||||
}),
|
||||
frames = {},
|
||||
timestamp = $('<div>').css({
|
||||
'position': 'absolute',
|
||||
'text-align': 'center',
|
||||
'width': '100%',
|
||||
})
|
||||
.hide(),
|
||||
that = new Ox.Element('div', self)
|
||||
.defaults({
|
||||
frames: {},
|
||||
duration: 0,
|
||||
icon: '',
|
||||
})
|
||||
.options(options || {})
|
||||
.append(icon)
|
||||
.append(frame)
|
||||
.append(timestamp)
|
||||
.mouseover(function() {
|
||||
frame.show();
|
||||
timestamp.show();
|
||||
icon.hide();
|
||||
})
|
||||
.mousemove(function(event) {
|
||||
var position = getPosition(event),
|
||||
image = getFrame(position),
|
||||
frameHeight = image.height;
|
||||
frame.attr('src', image.src);
|
||||
timestamp.html(Ox.formatDuration(position, 'short'));
|
||||
|
||||
var height = (that.height() - frameHeight)/2;
|
||||
frame.css({'top': height + 'px'});
|
||||
timestamp.css({'top': (frameHeight + height) + 'px'});
|
||||
})
|
||||
.mouseout(function() {
|
||||
frame.hide();
|
||||
timestamp.hide();
|
||||
icon.show();
|
||||
})
|
||||
.mousedown(function(event) {
|
||||
that.triggerEvent('click', {
|
||||
'position': getPosition(event)
|
||||
});
|
||||
});
|
||||
|
||||
function getPosition(event) {
|
||||
var position = Math.floor(event.clientX - that.offset().left);
|
||||
position = (position / that.width()) * self.options.duration;
|
||||
return position;
|
||||
}
|
||||
|
||||
function getFrame(position) {
|
||||
var frame;
|
||||
$.each(frames, function(i, img) {
|
||||
if(!frame || i <= position)
|
||||
frame = img;
|
||||
});
|
||||
return frame;
|
||||
}
|
||||
|
||||
function cacheFrames() {
|
||||
$.each(self.options.frames, function(i, src) {
|
||||
frames[i] = new Image();
|
||||
frames[i].onload = function() {
|
||||
frameHeight = frames[i].height / frames[i].width * that.width();
|
||||
}
|
||||
frames[i].src = src;
|
||||
});
|
||||
}
|
||||
|
||||
self.onChange = function(key, value) {
|
||||
if (key == 'frames') {
|
||||
cacheFrames();
|
||||
} else if (key == 'icon') {
|
||||
icon.attr('src', value);
|
||||
}
|
||||
}
|
||||
|
||||
if(options.icon)
|
||||
icon.attr('src', options.icon);
|
||||
cacheFrames();
|
||||
return that;
|
||||
};
|
||||
|
||||
Ox.LargeTimeline = function(options, self) {
|
||||
|
||||
var self = self || {},
|
||||
|
|
|
|||
Loading…
Reference in a new issue