류재민  홈페이지 |
/*
* Slider 2006.09.06
* by NHN UII.Gony
*/
var Slider = Class({
__const : function(id) {
this.options = Class.extend({
skinFormat : 'skin/zbXE_style/images/slider_%s.gif', // bg, unit
minValue : 0,
maxValue : 100,
defValue : 0, // default value
step : 1,
maxPos : 86, // position related to parent (px)
initPos : {x:1, y:12}, // initial position (minimun value)
vertical : false,
[안내]태그제한으로등록되지않습니다-xxonChange : function(v){}
}, arguments[1]);
var e = this._element = $(id);
var o = this.options;
Element.setCSS(e, {
position : 'relative',
background : 'no-repeat url('+o.skinFormat.replace('%s', 'bg')+') center center'
});
// auto resizing
var im = $c('img');
im.[안내]태그제한으로등록되지않습니다-xxonload = function() {
e.style.width = this.width+'px';
e.style.height = this.height+'px';
}
im.src = o.skinFormat.replace('%s', 'bg');
// event binding
this.[안내]태그제한으로등록되지않습니다-xxonmousedown = this.ondown.bindForEvent(this);
this.[안내]태그제한으로등록되지않습니다-xxonmousemove = this.[안내]태그제한으로등록되지않습니다-xxonmove.bindForEvent(this);
this.[안내]태그제한으로등록되지않습니다-xxonmouseup = this.onup.bind(this);
// positining draggable unit
var u = this._unit_element = e.appendChild($c('img'));
u.src = o.skinFormat.replace('%s', 'unit');
u.[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ondragstart = u.[안내]태그제한으로등록되지않습니다-ondrag = function(){ return false }
u.[안내]태그제한으로등록되지않습니다-xxonmousedown = this.[안내]태그제한으로등록되지않습니다-xxonmousedown;
Element.setCSS(u, {
position : 'absolute',
cursor : 'pointer',
top : o.initPos.y+'px',
left : o.initPos.x+'px'
});
},
setValue : function(v) {
var o = this.options; v = Math.min(Math.max(v,o.minValue),o.maxValue);
var p = this._val2pos(v);
if (this.options.vertical) {
this._unit_element.style.top = p+'px';
} else {
this._unit_element.style.left = p+'px';
}
this.options.[안내]태그제한으로등록되지않습니다-xxonChange(v);
},
ondown : function(e) {
var u = this._unit_element;
if (e.mouse.left) {
this._moving = true;
this._startPos = [parseInt(u.style.left), parseInt(u.style.top)];
this._startXY = [e.clientX, e.clientY];
// register event
Event.register(document, 'mouseup', this.[안내]태그제한으로등록되지않습니다-xxonmouseup);
Event.register(document, 'mousemove', this.[안내]태그제한으로등록되지않습니다-xxonmousemove);
Event.register(document, 'keypress', this.[안내]태그제한으로등록되지않습니다-xxonmousemove);
e.stop();
}
},
[안내]태그제한으로등록되지않습니다-xxonmove : function(e) {
var newX, newY;
var o = this.options;
var u = this._unit_element;
if (!this._moving || !e.mouse.left) return;
newX = this._startPos[0] + e.clientX - this._startXY[0];
newY = this._startPos[1] + e.clientY - this._startXY[1];
if (o.vertical) {
newY = Math.max(Math.min(newY,o.maxPos),o.initPos.y);
u.style.top = newY + 'px';
} else {
newX = Math.max(Math.min(newX,o.maxPos),o.initPos.x);
u.style.left = newX + 'px';
}
this.options.[안내]태그제한으로등록되지않습니다-xxonChange(this._pos2val(o.vertical?newY:newX));
},
onup : function() {
this._moving = false;
// unregister event
Event.unregister(document, 'mouseup', this.[안내]태그제한으로등록되지않습니다-xxonmousemove);
Event.unregister(document, 'mousemove', this.[안내]태그제한으로등록되지않습니다-xxonmousemove);
Event.unregister(document, 'keypress', this.[안내]태그제한으로등록되지않습니다-xxonmousemove);
},
_pos2val : function(p) {
var o = this.options,s=o.step;
var m = o.vertical?o.initPos.y:o.initPos.x;
var v = (p-m)*(o.maxValue-o.minValue)/(o.maxPos-m);
var q = Math.floor(v/s), r=v-q*s, v=q*s;
return Math.round((v+o.minValue+((s/2)>r?0:s))*100)/100;
},
_val2pos : function(v) {
var o = this.options,s=o.step;
var m = o.vertical?o.initPos.y:o.initPos.x;
var p = (v-o.minValue)*(o.maxPos-m)/(o.maxValue-o.minValue);
var q = Math.floor(p/s), r=p-q*s, p=q*s;
return Math.round((p+m+((s/2)>r?0:s))*100)/100;
}
});
new Slider('sl', {
minValue : 12, // 최소 폰트 사이즈
maxValue : 36, // 최대 폰트 사이즈
[안내]태그제한으로등록되지않습니다-xxonChange : function(v) {
$('sval').value = v;
document.getElementById('view_mm').style.fontSize=v +'px'; // 폰트 사이즈
document.getElementById('view_mm').style.lineHeight=v+120 +'%'; // 폰트 사이즈에 맞춰서 줄간격도 변하도록
}
});
|