JavaScript DHTML/SmartClient/Slider
Содержание
- 1 Add a custom cursor to the thumb
- 2 Add mouse handlers to set the thumb"s state
- 3 Add value and sliderTarget properties, calculate new value when thumb is moved, send sliderMove message to sliderTarget when thumb is moved
- 4 Add valueChanged() observable method
- 5 Add value setter and getter methods and use setter to init value
- 6 Convert track and thumb to StretchImg and Img widgets
- 7 Create, position, and size the slider and its two children (_track and _thumb) make the thumb drag-repositionable
- 8 Error checking of newValue in setValue()
- 9 Horizontal slider
- 10 Make slider thumb draggable calculate and set constrained thumb position when dragging
- 11 Number slider
- 12 Specify skin directory and images
- 13 Use slider to create a color mixer
- 14 Use Slider to set the border width
- 15 Value changed event for Slider
- 16 Vertical Slider, min value, max value
Add a custom cursor to the thumb
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_6.js <----------*/ // Step 6 // * convert track and thumb to StretchImg and Img widgets // * specify skin directory and images // * add mouse handlers to set the thumb"s state // * add a custom cursor to the thumb ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(""); return false",
mouseDown:"this.setState("down")",
mouseUp:"this.setState(""); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //--------------------------------------------------
Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
</SCRIPT> </BODY> </HTML>
</source>
Add mouse handlers to set the thumb"s state
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_6.js <----------*/ // Step 6 // * convert track and thumb to StretchImg and Img widgets // * specify skin directory and images // * add mouse handlers to set the thumb"s state // * add a custom cursor to the thumb ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(""); return false",
mouseDown:"this.setState("down")",
mouseUp:"this.setState(""); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //--------------------------------------------------
Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
</SCRIPT> </BODY> </HTML>
</source>
Add value and sliderTarget properties, calculate new value when thumb is moved, send sliderMove message to sliderTarget when thumb is moved
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_3.js <----------*/ // Step 3 // * add value and sliderTarget properties // * calculate new value when thumb is moved // * send "sliderMove" message to sliderTarget when thumb is moved ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
},
_createTrack : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
//-------------------------------------------------- // display area for targeted sliderMove events //-------------------------------------------------- Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, sliderTarget:display
});
</SCRIPT> </BODY> </HTML>
</source>
Add valueChanged() observable method
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_5.js <----------*/ // Step 5 // * add valueChanged() observable method ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
//-------------------------------------------------- // display area for targeted sliderMove events //-------------------------------------------------- Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
); //-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
</SCRIPT> </BODY> </HTML>
</source>
Add value setter and getter methods and use setter to init value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_4.js <----------*/ // Step 4 // * add value setter and getter methods // * use setter to init value ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
//-------------------------------------------------- // display area for targeted sliderMove events //-------------------------------------------------- Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
</SCRIPT> </BODY> </HTML>
</source>
Convert track and thumb to StretchImg and Img widgets
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_6.js <----------*/ // Step 6 // * convert track and thumb to StretchImg and Img widgets // * specify skin directory and images // * add mouse handlers to set the thumb"s state // * add a custom cursor to the thumb ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(""); return false",
mouseDown:"this.setState("down")",
mouseUp:"this.setState(""); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //--------------------------------------------------
Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
</SCRIPT> </BODY> </HTML>
</source>
Create, position, and size the slider and its two children (_track and _thumb) make the thumb drag-repositionable
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_1.js <----------*/ // Step 1 // * create, position, and size the slider and its two children (_track and _thumb) // * make the thumb drag-repositionable, just for fun ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
},
_createTrack : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
canDragReposition:true,
dragAppearance:EventHandler.TARGET,
backgroundColor:"#AAAAAA"
});
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false
});
</SCRIPT> </BODY> </HTML>
</source>
Error checking of newValue in setValue()
<source lang="html4strict">
<HTML><HEAD> <SCRIPT>
var isomorphicDir = "isomorphic/";
</SCRIPT>
<SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_8.js <----------*/ // Step 8 // * move constants to class properties // * error checking of newValue in setValue() ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addClassProperties({
VERTICAL_SRC_PREFIX:"v", HORIZONTAL_SRC_PREFIX:"h", DOWN:"down", UP:"", ON:"", OFF:"off", EVENTNAME:"sliderMove"
});
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setDisabled(this.disabled);
},
_createTrack : function () {
return StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(SimpleSlider.UP); return false",
mouseDown:"this.setState(SimpleSlider.DOWN)",
mouseUp:"this.setState(SimpleSlider.UP); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, SimpleSlider.EVENTNAME, this);
},
setValue : function (newValue) {
if (!isA.Number(newValue)) return;
this.value = Math.max(0, Math.min(newValue, 1));
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, SimpleSlider.EVENTNAME, this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
},
setDisabled : function (disabled) {
this.Super("setDisabled",arguments);
if (!disabled) {
this._track.setState(SimpleSlider.ON);
this._thumb.setState(SimpleSlider.UP);
this._thumb.setCursor(Canvas.HAND);
} else {
this._track.setState(SimpleSlider.OFF);
this._thumb.setState(SimpleSlider.OFF);
this._thumb.setCursor(Canvas.DEFAULT);
}
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //-------------------------------------------------- Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
//-------------------------------------------------- // buttons to enable/disable sliders //-------------------------------------------------- Button.create({
left:70, top:20, width:120, title:"Enable sliders", click:"vSlider.enable();hSlider.enable()"
});
Button.create({
left:220, top:20, width:120, title:"Disable sliders", click:"vSlider.disable();hSlider.disable()"
});
</SCRIPT> </BODY> </HTML>
</source>
Horizontal slider
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Slider.create({
ID: "hSlider",
vertical: false,
top: 200,
left: 100,
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.vSlider) return;
if (vSlider.getValue() != value) vSlider.setValue(value)
}
}); </SCRIPT> </BODY> </HTML>
</source>
Make slider thumb draggable calculate and set constrained thumb position when dragging
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_2.js <----------*/ // Step 2 // * make slider thumb draggable // * calculate and set constrained thumb position when dragging ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:30,
thumbThinWidth:10,
trackWidth:4,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
},
_createTrack : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
backgroundColor:"#666666",
overflow:Canvas.HIDDEN
});
},
_createThumb : function () {
return Canvas.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
canDrag:true,
dragAppearance:EventHandler.NONE,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
backgroundColor:"#AAAAAA"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false
});
</SCRIPT> </BODY> </HTML>
</source>
Number slider
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.DynamicForm.create({
width: 200,
fields: [
{ name: "rating", title: "Rating", editorType: "slider",
minValue: 1, maxValue: 5, numValues: 5, width: 200, titleOrientation: "top"}
],
values: { rating: 4 }
});
</SCRIPT> </BODY> </HTML>
</source>
Specify skin directory and images
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir = "isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT> <SCRIPT>
/*----------> SimpleSlider_6.js <----------*/ // Step 6 // * convert track and thumb to StretchImg and Img widgets // * specify skin directory and images // * add mouse handlers to set the thumb"s state // * add a custom cursor to the thumb ClassFactory.defineClass("SimpleSlider", Canvas);
SimpleSlider.addProperties({
length:200,
vertical:true,
thumbThickWidth:23,
thumbThinWidth:17,
trackWidth:7,
trackCapSize:6,
skinImgDir:"examples/custom_components/SimpleSlider/images/SimpleSlider/",
thumbSrc:"thumb.gif",
trackSrc:"track.gif",
value:0,
sliderTarget:null,
initWidget : function () {
this.Super("initWidget", arguments);
var width, height;
if (this.vertical) {
width = Math.max(this.thumbThickWidth, this.trackWidth);
height = this.length;
} else {
width = this.length;
height = Math.max(this.thumbThickWidth, this.trackWidth);
}
this.setWidth(width);
this.setHeight(height);
this._usableLength = this.length-this.thumbThinWidth;
this._track = this.addChild(this._createTrack());
this._thumb = this.addChild(this._createThumb());
this.setValue(this.value);
},
_createTrack : function () {
return StretchImg.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.trackWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.trackWidth)/2)),
width:(this.vertical ? this.trackWidth : this.getWidth()),
height:(this.vertical ? this.getHeight() : this.trackWidth),
vertical:this.vertical,
capSize:this.trackCapSize,
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.trackSrc,
skinImgDir:this.skinImgDir
});
},
_createThumb : function () {
return Img.create({
autoDraw:false,
left:(this.vertical ? Math.floor((this.getWidth() - this.thumbThickWidth)/2) : 0),
top:(this.vertical ? 0 : Math.floor((this.getHeight() - this.thumbThickWidth)/2)),
width:(this.vertical ? this.thumbThickWidth : this.thumbThinWidth),
height:(this.vertical ? this.thumbThinWidth : this.thumbThickWidth),
src:"[SKIN]" + (this.vertical ? "v" : "h") + this.thumbSrc,
skinImgDir:this.skinImgDir,
canDrag:true,
dragAppearance:EventHandler.NONE,
cursor:Canvas.HAND,
dragMove:"this.parentElement._thumbMove(); return false",
dragStart:EventHandler.stopBubbling,
dragStop:"this.setState(""); return false",
mouseDown:"this.setState("down")",
mouseUp:"this.setState(""); return false"
});
},
_thumbMove : function () {
var thumbPosition;
if (this.vertical) {
thumbPosition = EventHandler.getY() - this.getPageTop();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getTop()) return;
this._thumb.setTop(thumbPosition);
} else {
thumbPosition = EventHandler.getX() - this.getPageLeft();
thumbPosition = Math.max(0, Math.min(this._usableLength, thumbPosition));
if (thumbPosition == this._thumb.getLeft()) return;
this._thumb.setLeft(thumbPosition);
}
this.value = thumbPosition/this._usableLength;
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
setValue : function (newValue) {
this.value = newValue;
var thumbPosition = this.value * this._usableLength;
if (this.vertical)
this._thumb.setTop(thumbPosition);
else
this._thumb.setLeft(thumbPosition);
this.valueChanged();
if (this.sliderTarget) EventHandler.handleEvent(this.sliderTarget, "sliderMove", this);
},
getValue : function () {
return this.value;
},
valueChanged : function () {
}
});
</SCRIPT>
</HEAD><BODY BGCOLOR="powderblue"> <SCRIPT>
// override default skin directory to pick up local slider images Page.setSkinDir("");
//-------------------------------------------------- // display area for targeted sliderMove events //--------------------------------------------------
Label.create({
ID:"display",
left:150,
top:50,
height:20,
sliderMove:function(event,slider){
this.setContents("sliderMove event
" +
slider.getID() + ": " + slider.value);
}
});
//-------------------------------------------------- // global handler for sliderMove events //-------------------------------------------------- Label.create({
ID:"globalDisplay", left:300, top:50, height:20
}); Page.setEvent(
"sliderMove",
"globalDisplay.setContents("Global handler
" + eventInfo.ID + ": " + eventInfo.value);"
);
//-------------------------------------------------- // sliders //-------------------------------------------------- SimpleSlider.create({
ID:"vSlider", left:100, top:100, value:0.3, sliderTarget:display
}); SimpleSlider.create({
ID:"hSlider", left:300, top:180, vertical:false, value:0.5, sliderTarget:display
});
//-------------------------------------------------- // display areas for observed slider values //-------------------------------------------------- Label.create({
ID:"vSliderObserver", left:20, top:320, height:20
}); vSliderObserver.observe(vSlider, "valueChanged", "observer.setContents(observed.value)");
Label.create({
ID:"hSliderObserver", left:300, top:320, height:20
}); hSliderObserver.observe(hSlider, "valueChanged", "observer.setContents(observed.value)");
</SCRIPT> </BODY> </HTML>
</source>
Use slider to create a color mixer
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/SmartClient/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="powderblue" MARGINHEIGHT=0 MARGINWIDTH=0 LEFTMARGIN=0 TOPMARGIN=0>
Slider color mixer example |
Isomorphic SmartClient SDK |
| <IMG SRC=images/blank.gif WIDTH=1 HEIGHT=4> |
<SCRIPT>
function num2hex(num) {
var lowWord = num%16, highWord = (num-lowWord)/16; return num2hexdigit(highWord)+""+num2hexdigit(lowWord);
} function num2hexdigit(num) {
if (num == 10) return "A"; else if (num == 11) return "B"; else if (num == 12) return "C"; else if (num == 13) return "D"; else if (num == 14) return "E"; else if (num == 15) return "F"; else return ""+num;
} var colorBox = Canvas.newInstance({
left:400,
top:115,
width:200,
height:200,
red:"77",
green:"77",
blue:"77",
backgroundColor:"777777",
sliderMove:function(event,slider){
var newColor = num2hex(Math.round(slider.value));
if (slider.ID == "sliderRed") this.red = newColor;
else if (slider.ID == "sliderGreen") this.green = newColor;
else if (slider.ID == "sliderBlue") this.blue = newColor;
this.setBackgroundColor(this.red+""+this.green+""+this.blue);
return false;
}
}); Slider.newInstance({
ID:"sliderRed", title:"Red", left:60, top:90, sliderTarget:colorBox, value:128, minValue:0, maxValue:255
});
Slider.newInstance({
ID:"sliderGreen", title:"Green", left:155, top:90, //sliderTarget:colorBox, value:128, minValue:0, maxValue:255
});
Slider.newInstance({
ID:"sliderBlue", title:"Blue", left:250, top:90, //sliderTarget:colorBox, value:128, minValue:0, maxValue:255
});
Slider.newInstance({
ID:"sliderSize", title:"Size", left:350, top:330, vertical:false, value:200, minValue:20, minValueLabel:"Small", maxValue:200, maxValueLabel:"Big", numValues:10
});
//colorBox.observe(sliderRed, "valueChanged", "observer.sliderMove(null,observed)"); colorBox.observe(sliderGreen, "valueChanged", "observer.sliderMove(null,observed)"); colorBox.observe(sliderBlue, "valueChanged", "observer.sliderMove(null,observed)"); colorBox.observe(sliderSize, "valueChanged", "observer.resizeTo(observed.value,observed.value)"); </SCRIPT> </BODY> </HTML>
</source>
Use Slider to set the border width
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver">
<SCRIPT> exampleText = "When in the Course of human events, it becomes necessary for one people to dissolve the political bands which have connected them with another, and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature"s God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation."
isc.VStack.create({ID:"outerBox", left:220, top:20, border:"4px solid gray", members:[
isc.HTMLFlow.create({
ID:"textBox", width:240, contents:exampleText,
border: "8px solid slateblue",
padding: 10,
margin: 4
})
]}).draw(); // draw immediately, so the sliders can manipulate this box immediately
isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10, title:"Margin", value:4, valueChanged: "textBox.setMargin(value); textBox.markForRedraw();"
}) isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10, title:"Padding", value:10, left:60, valueChanged: "textBox.setPadding(value); textBox.markForRedraw();"
}) isc.Slider.create({
minValue:0, maxValue:10, showRange:false, labelWidth:10,
title:"Border", value:8, left:120,
valueChanged: function () {
textBox.setBorder(this.value + "px solid slateblue");
textBox.markForRedraw();
}
}) </SCRIPT>
</BODY> </HTML>
</source>
Value changed event for Slider
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Slider.create({
ID: "vSlider",
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.hSlider) return;
if (hSlider.getValue() != value) hSlider.setValue(value);
}
}); </SCRIPT> </BODY> </HTML>
</source>
Vertical Slider, min value, max value
<source lang="html4strict">
<HTML><HEAD>
<SCRIPT>var isomorphicDir="isomorphic/";</SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Core.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Foundation.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Containers.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Grids.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Forms.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_DataBinding.js></SCRIPT> <SCRIPT SRC=isomorphic/system/modules/ISC_Calendar.js></SCRIPT> <SCRIPT SRC=isomorphic/skins/standard/load_skin.js></SCRIPT>
</HEAD><BODY BGCOLOR="silver"> <SCRIPT> isc.Slider.create({
ID: "vSlider",
minValue: 1,
maxValue: 5,
numValues: 5,
title: "Rating",
valueChanged : function (value) {
if (!window.hSlider) return;
if (hSlider.getValue() != value) hSlider.setValue(value);
}
}); </SCRIPT> </BODY> </HTML>
</source>
