MoonKiKi: web2.0 and ajax... the evolution road

Thursday, April 2, 2009

A GIFT KNOB ZONE FOR KNOB ON expressionz'site

Some days ago, I used knob and a script from this site expressionz.

I wanna a pubblish a snippets of my code (a moogenda customization) that I wish help others using knob.

var Slider = new Class({
Implements: [Events, Options],

version:'0.0.1',

options: {
id: ''
},

initialize: function(options){
this.setOptions(options);
this.id=this.options.id;
this.slider = new Element('div',{
'class':'slider_outer'
});
var slide_container = new Element('div',{
'class':'slide_container'
});
this.slider.grab(slide_container);
var slider_minmax_min = new Element('div',{
'id':this.id+"slider_minmax_min",
'class':'floatl fontblue'
});
slide_container.grab(slider_minmax_min);
var slider_gutter = new Element('div',{
'id':this.id+"minmax_slider",
'class':'slider_gutter'
});
slide_container.grab(slider_gutter);
var slider_minmax_gutter_l = new Element('div',{
'id':this.id+"slider_minmax_gutter_l",
'class':'slider_gutter_item iconsprite_controls slider_minmax_gutter_l_class'
});
var slider_minmax_gutter_m = new Element('div',{
'id':this.id+"slider_minmax_gutter_m",
'class':'slider_gutter_item gutter iconsprite_controls slider_minmax_gutter_m_class'
});

slider_gutter.grab(slider_minmax_gutter_l);
slider_gutter.grab(slider_minmax_gutter_m);

var slider_bkg_img = new Element('img',{
'id':this.id+"slider_bkg_img",
'class':'slider_bkg_img_class',
'src':'images/bkg_slider.gif'
});

var slider_minmax_minKnobA = new Element('div',{
'id':this.id+"slider_minmax_minKnobA",
'class':'knob'
});
var slider_minmax_maxKnobA = new Element('div',{
'id':this.id+"slider_minmax_maxKnobA",
'class':'knob'
});

slider_minmax_gutter_m.grab(slider_bkg_img);
slider_minmax_gutter_m.grab(slider_minmax_minKnobA);
slider_minmax_gutter_m.grab(slider_minmax_maxKnobA);

var slider_minmax_gutter_r = new Element('div',{
'id':this.id+"slider_minmax_gutter_r",
'class':'slider_gutter_item iconsprite_controls slider_minmax_gutter_r_class'
});
slider_gutter.grab(slider_minmax_gutter_r);

var slider_minmax_max = new Element('div',{
'id':this.id+"slider_minmax_max",
'class':'floatl fontblue'
});

use it in this way:

var cnt = new Element('div');
var timer = new Slider({
'id': dayNum
});
cnt.grab(timer.getSlider());

var mySlideA = new Slider($(id+'slider_minmax_gutter_m'), $(id+'slider_minmax_minKnobA'),$(id+'slider_bkg_img'), {
start: 8,
end: 24,
offset: 10,
snap:false,
onChange: function(pos){
var min = pos.minpos;
if (min<10) min="0" max =" pos.maxpos;" max="0">

Have fun with freebies
Nunzio Fiore

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)