二次封装dojo slider

上次的二次封装timeslider，挺有意思，又来封装一个dojo的，样式还是用arcgis的。
实现更多功能，包括HorizontalSlider和VerticalSlider， 刻度的显示隐藏，标签的显示和隐藏，上刻度和下刻度的显示隐藏，
无序数显示刻度，标签图标的自由选择，大小选择。。。。更多功能大家看完code也可以自己慢慢加进去哈~~~

code有点长，先上slider的class：：MyCustomSlider.js

/** * yilei * custom dojo slider * Note:>>!! sliderType got 2 type there are "HorizontalSlider" and "VerticalSlider", they use same setting. * The Top setting will became Left setting and the Buttom setting will became Right setting * when the sliderType set to "VerticalSlider" --------------------------------------------------- * For example: * The topLabels array is setting to display the top Graduation for "HorizontalSlider", it is setting to dispay the * left Graduation for "VerticalSlider" also. ----------------------------------------------------- * This slider not suport image label for "VerticalSlider" now..... *custom obj example:: *10545350 * *{ [id: 1, label:10], *[id:2, label: 5], *[id:3, label: 4],..... *} * need map.js suport */ dojo.declare("mapComponent.MyCustomSlider",null,{minimum:null,maximum:null,stepIncrement:1, //PANIcustomSliderArray: null, //[]divId:"",intermediateChanges:true,showButtons:true,//only for VerticalSlider or CustomSliderVsliderClass:"",replaceFlag:"#",sliderName:"temp",sliderId:"tempId",SliderCssClass: "ies-Slider",labelImageCssClass:"sliderLabelImage",sliderType:"HorizontalSlider",/********HorizontalSlider and VerticalSlider and CustomSliderV and CustomSliderH**************/showCustomTopLabel: true,  //It is show custom label at left side on VerticalSlidershowTopLabel:false,  //It is show label at left side on VerticalSlidershowBottomMark:false, //It is show Graduation at right side on VerticalSlidershowTopMark:false,  //It is show Graduation at left side on VerticalSlidershowBottomLabel:true, //It is show label at right side on VerticalSlidernoOfTopLabels:3,//It is setting total labels number at left side on VerticalSlidertopLabels:null,//.....same to verticalslidernoOfLabels:3, // Old noOfBottomlabelsbottomlabels:null,labelFooterFormat: "#",labelTopFormat: "#",customTopLabelCssClass:"sliderCustomTopLabel",toplabelCssClass:"sliderTopLabel",topMarkCssClass:"sliderTopMark",bottomLabelCssClass:"sliderBottomLabel",bottomMarkCssClass:"sliderBottomMark",showTopImageLabel:false,showBottomImageLabel:true,showSingleTopImageLabel:true,showSingleBottomImageLabel:true,showPlayPause:true,showPre:true,showNext:true,topImageLabels:["dropDownArrow_grey.png"],bottomImageLabels:["dropDownArrow_grey.png"],imageOnly:false,sliderLoop:false,thumbMovingRate:500,/********HorizontalSlider and VerticalSlider**************/onsliderChange:function(timeExtentObj){},defaultValue:0,increase:1,self:null,_totleStep:0,_customType:null,_sliderObj:null,_intervalObj:null,_playPauseButton:null,_nextButton:null,_preButton:null,_wrapString:"   <div class=\"esriTimeSlider\" id=\"sliderId\">\r\n   <table width=\"100%\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\">\r\n   <tr>\r\n   <td align=\"right\" valign=\"middle\"><button id=\"sliderId_playpauseButtonNode\" type=\"button\">Play/Pause</button></td>\r\n   <td align=\"center\" valign=\"middle\" width=\"80%\" class=\"tsTmp\"></td>\r\n   <td align=\"left\" valign=\"middle\" width=\"30\"><button id=\"sliderId_preButtonNode\"  type=\"button\">Previous</button></td>\r\n   <td align=\"left\" valign=\"middle\"><button id=\"sliderId_nextButtonNode\"  type=\"button\">Next</button></td>\r\n   </tr>    \r\n   </table>\r\n   </div>",/**********constructor function for init*************/constructor:function(params){dojo.mixin(this, params);if((this.sliderType=="CustomSliderH" || this.sliderType=="CustomSliderV" )&&(this.customSliderArray && this.customSliderArray.length>0) ){if (this.showTopLabel == true){this.topLabels=[];}if (this.showBottomLabel == true){this.bottomlabels=[];}if (this.customSliderArray) {if (this.customSliderArray.length > 0) {this.minimum = 0;this.maximum = this.customSliderArray.length-1;}}// Setting Labelsconsole.log("this.maximum - " + this.maximum);console.log("this.minimum - " + this.minimum);var val = this.minimum;if (this.customSliderArray) {var obj=this.customSliderArray[this.minimum];val = obj.label;}if (this.showTopLabel == true){this.topLabels.push(val);}if (this.showBottomLabel == true){this.bottomlabels.push(val);}//var increment = parseInt(((this.maximum - this.minimum)+1) / (this.noOfLabels-2));//var increment = parseInt((this.maximum - this.minimum-1) / (this.noOfLabels-2));console.log((this.maximum - this.minimum) / (this.noOfLabels-1));var increment = Math.round((this.maximum - this.minimum) / (this.noOfLabels-1));console.log("increment - " + increment);var firstNum=this.minimum;var map=new Map();for(var f=0;f<this.noOfLabels-2;f++){firstNum=firstNum+increment;map.put(firstNum,firstNum);}for(var t=1;t<this.customSliderArray.length-1;t++){var temp=map.get(t);if(temp){if (this.showTopLabel == true)this.topLabels.push(this.customSliderArray[temp].label);if (this.showBottomLabel == true)this.bottomlabels.push(this.customSliderArray[temp].label);map.remove(t);}else{if (this.showTopLabel == true)this.topLabels.push(null);if (this.showBottomLabel == true)this.bottomlabels.push(null);}}map=null;var val = this.maximum;if (this.customSliderArray) {var obj=this.customSliderArray[this.maximum];val = obj.label;}if (this.showTopLabel == true)this.topLabels.push(val);if (this.showBottomLabel == true)this.bottomlabels.push(val);if(this.sliderType=="CustomSliderH"){this._customType="H";}else if(this.sliderType=="CustomSliderV"){this._customType="V";}}if(this.defaultValue==0)this.defaultValue=this.minimum;self=this;_totleStep=(this.maximum-this.minimum+1)/this.increase;this.sliderId=getUniqueId(this.sliderName);//alert(this.customSliderArray.length);},createSlider:function(){var self=this;if(this.sliderType=="HorizontalSlider" || this._customType=="H"){require(["dojo/parser", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels","dojo/dom-class","dijit/form/Button","dojo/dom-attr"],                 function(parser,HorizontalSlider,HorizontalRule,HorizontalRuleLabels,domClass,Button,domAttr){                   parser.parse();   try{// Destroy the div and then createdojo.destroy(dojo.query("[id^="+self.sliderName+"]"));// Create new Div and add to divSlidersContainer//var sliderNode = dojo.byId(this.divId); //alert(this.divId);//domClass.add(dojo.byId(_self.divId),"ttt");self._wrapString=self._wrapString.replace(/sliderId/g,self.sliderId);//console.dir(self._wrapString);dojo.place(self._wrapString,dojo.byId(self.divId));dojo.addClass(dojo.byId(self.sliderId),self.SliderCssClass)//domAttr.set(dojo.query(".esriTimeSlider")[0],"id",self.sliderId);//dojo.query(".tsTmp");new Button({//label: "Click me!",id:self.sliderId+"_playpauseButtonNodeID",iconClass:"tsButton tsPlayButton",showLabel:false,style:{"margin-top":"-20px","display":"none"},onClick: function(){// Do something://self._playPauseButton.destory();console.dir(self);domAttr.set(this,"iconClass",self._intervalObj?"tsButton tsPlayButton":"tsButton tsPauseButton");self.playPause();}}, self.sliderId+"_playpauseButtonNode").startup();//self._playPauseButton = dijit.byId(self.sliderId+"_playpauseButtonNode");new Button({//label: "Click me!",id:self.sliderId+"_preButtonNodeID",iconClass:"tsButton tsPrevButton",showLabel:false,style:{"margin-top":"-20px","display":"none"},onClick: function(){// Do something://alert("ggg");self.previous();}}, self.sliderId+"_preButtonNode").startup();//self._preButton = dijit.byId(self.sliderId+"_preButtonNode");new Button({//label: "Click me!",id:self.sliderId+"_nextButtonNodeID",iconClass:"tsButton tsNextButton",showLabel:false,style:{"margin-top":"-20px","display":"none"},onClick: function(){// Do something://alert("hhhh");console.dir(self);self.next();}}, self.sliderId+"_nextButtonNode").startup();//self._nextButton=dijit.byId(self.sliderId+"_nextButtonNode");var sliderNode=dojo.create("div",null,dojo.query(".tsTmp",dojo.byId(self.sliderId))[0]);//sliderNode.id=self.sliderId;if(self.showTopLabel&&!self.showCustomTopLabel){//alert("show Top");var rulesNodeLabelsTop = dojo.create("div", null, sliderNode); //_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,isTop)var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,self.showTopImageLabel,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);var labelsHeight="1em";if(self.showTopImageLabel)labelsHeight="2em";if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )markCount=self.customSliderArray.length;elsemarkCount=self.noOfTopLabels;var sliderLabelsTop= new dijit.form.HorizontalRuleLabels({container: "topDecoration",count: markCount,labels: newtopLabels,style: "height:"+labelsHeight+";font-size:75%;color:gray;white-space: nowrap;",//class:self.toplabelCssClass},rulesNodeLabelsTop);domClass.add(rulesNodeLabelsTop, self.toplabelCssClass);if(self.showTopMark){var rulesNodeTop = dojo.create("div", null, sliderNode); var sliderRuleTop= new dijit.form.HorizontalRule({container: "topDecoration",count: markCount,style: "height:1em;font-size:75%;color:gray;",//class:self.topMarkCssClass},rulesNodeTop);domClass.add(rulesNodeTop, self.topMarkCssClass);}}if(self.showBottomLabel){if(self.showBottomMark){var markCount=0;//alert(self.sliderType);//alert(self.customSliderArray.length);if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )markCount=self.customSliderArray.length;elsemarkCount=self.noOfLabels;var rulesNodeBottom = dojo.create("div", null, sliderNode); var sliderBottomRule= new dijit.form.HorizontalRule({container: "bottomDecoration",count: markCount,style: "height:1em;font-size:75%;color:gray;",//class:self.bottomMarkCssClass},rulesNodeBottom);domClass.add(rulesNodeBottom, self.bottomMarkCssClass);}//sliderNode.appendChild(rulesNode);var rulesNodeLabelsBottom = dojo.create("div", null, sliderNode); //alert(self.bottomlabels.length);var newBottomLabels=self._labelsPackage(self.noOfLabels,self.bottomlabels,self.showBottomImageLabel,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);//alert(self.bottomlabels.length);//console.dir(newBottomLabels);var sliderBottomLabels= new dijit.form.HorizontalRuleLabels({container: "bottomDecoration",count: self.noOfLabels,labels: newBottomLabels,style: "height:2em;font-size:75%;color:gray;white-space: nowrap;",//class:self.sliderBottomLabel},rulesNodeLabelsBottom);domClass.add(rulesNodeLabelsBottom, self.bottomLabelCssClass);//console.dir(dojo.query(rulesNodeLabelsBottom)[0]);}var slider = new dijit.form.HorizontalSlider({name: self.sliderId,value: self.defaultValue,minimum: self.minimum,maximum: self.maximum,discreteValues: _totleStep,intermediateChanges: self.intermediateChanges,//showButtons:self.showButtons,showButtons:false,//style: "position:relative",//style: "width:500px;",//class:self.SliderCssClass,onChange: function(value){//console.dir(value);if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" ){var customObj=self.customSliderArray[value];value=customObj;}if (self.showCustomTopLabel == true) {var topLabelDisplay="";if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" ){topLabelDisplay=self._formatLabels(value.label,self.labelTopFormat);}else{topLabelDisplay= self._formatLabels(value,self.labelTopFormat);}dojo.byId(self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;}self.onsliderChange(value);}}, sliderNode);slider.startup();//showPlayPause//showPre//showNextif(self.showPlayPause)self.showPlayPauseBtn();if(self.showPre)self.showPreBtn();if(self.showNext)self.showNextBtn();self._sliderObj=slider;var defaultBegain=0;if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" ){defaultBegain=self._formatLabels(self.customSliderArray[slider.value].label,self.labelTopFormat);}else{defaultBegain=self._formatLabels(slider.value,self.labelTopFormat);}if (self.showCustomTopLabel) {dojo.create("span", {id: self.sliderId+"_sp_topLabel",class:self.customTopLabelCssClass, innerHTML: defaultBegain}, dojo.query(".dijitSliderMoveable",dojo.byId(self.sliderId))[0]);}}catch(e){console.dir(e);}});}else if(this.sliderType=="VerticalSlider" || this._customType=="V"){require(["dojo/parser", "dijit/form/VerticalSlider", "dijit/form/VerticalRule", "dijit/form/VerticalRuleLabels","dojo/dom-class"],                 function(parser,VerticalSlider,VerticalRule,VerticalRuleLabels,domClass){                   parser.parse();   try{// Destroy the div and then createdojo.destroy(dojo.query("[id^="+self.sliderName+"]"));// Create new Div and add to divSlidersContainer//var sliderNode = dojo.byId(this.divId); //alert(this.divId);domClass.add(dojo.byId(self.divId),"ttt");var sliderNode=dojo.create("div",null,dojo.byId(self.divId));//sliderNode.id=self.sliderId;if(self.showTopLabel&&!self.showCustomTopLabel){//alert("show Top");var rulesNodeLabelsTop = dojo.create("div", null, sliderNode); //_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,isTop)//var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,self.showTopImageLabel,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);//**********************function not suport image nowvar newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,false,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);var labelsHeight="1em";if(self.showTopImageLabel)labelsHeight="2em";var sliderLabelsTop= new dijit.form.VerticalRuleLabels({container: "leftDecoration",count: self.noOfTopLabels,labels: newtopLabels,style: "width:"+labelsHeight+";font-size:75%;color:gray;",//class:self.toplabelCssClass},rulesNodeLabelsTop);domClass.add(rulesNodeLabelsTop, self.toplabelCssClass);if(self.showTopMark){var rulesNodeTop = dojo.create("div", null, sliderNode); var sliderRuleTop= new dijit.form.VerticalRule({container: "leftDecoration",count: self.noOfTopLabels,style: "width:1em;font-size:75%;color:gray;",//class:self.topMarkCssClass},rulesNodeTop);domClass.add(rulesNodeTop, self.topMarkCssClass);}}if(self.showBottomLabel){if(self.showBottomMark){var rulesNodeBottom = dojo.create("div", null, sliderNode); var sliderBottomRule= new dijit.form.VerticalRule({container: "rightDecoration",count: self.noOfLabels,style: "width:1em;font-size:75%;color:gray;",//class:self.bottomMarkCssClass},rulesNodeBottom);domClass.add(rulesNodeBottom, self.bottomMarkCssClass);}//sliderNode.appendChild(rulesNode);var rulesNodeLabelsBottom = dojo.create("div", null, sliderNode); //var newBottomLabels=self._labelsPackage(self.noOfBottomlabels,self.bottomlabels,self.showBottomImageLabel,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);//*****************function not suport image now.....var newBottomLabels=self._labelsPackage(self.noOfLabels,self.bottomlabels,false,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);//console.dir();console.dir(newBottomLabels);var sliderBottomLabels= new dijit.form.VerticalRuleLabels({container: "rightDecoration",count: self.noOfLabels,labels: newBottomLabels,style: "width:2em;font-size:75%;color:gray;",//class:self.sliderBottomLabel},rulesNodeLabelsBottom);domClass.add(rulesNodeLabelsBottom, self.bottomLabelCssClass);//console.dir(dojo.query(rulesNodeLabelsBottom)[0]);}var slider = new dijit.form.VerticalSlider({name: self.sliderId,value: self.defaultValue,minimum: self.minimum,maximum: self.maximum,discreteValues: _totleStep,intermediateChanges: self.intermediateChanges,//showButtons:self.showButtons,showButtons:false,//style: "position:relative",style: "height:500px;",//class:self.SliderCssClass,onChange: function(value){//console.dir(value);if (self.showCustomTopLabel == true) {var topLabelDisplay="";if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" ){var customObj=self.customSliderArray[value];value=customObj;topLabelDisplay=self._formatLabels(value.id,self.labelTopFormat);}else{topLabelDisplay= self._formatLabels(value,self.labelTopFormat);}dojo.byId(self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;}self.onsliderChange(value);}}, sliderNode);slider.startup();self._sliderObj=slider;var defaultBegain=0;if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" ){defaultBegain=self._formatLabels(self.customSliderArray[slider.value].label,self.labelTopFormat);}else{defaultBegain=self._formatLabels(slider.value,self.labelTopFormat);}if (self.showCustomTopLabel) {dojo.create("span", {id: self.sliderId+"_sp_topLabel",class:self.customTopLabelCssClass, innerHTML: defaultBegain}, dojo.query(".dijitSliderMoveable",dojo.byId(self.sliderId))[0]);}}catch(e){console.dir(e);}});}return self._sliderObj;},setSliderValue:function(v){this._sliderObj.setValue(v);},getValue:function(){return this._sliderObj.value;},playPause:function() {console.dir(this);var seft=this;if (this._intervalObj) {clearInterval(this._intervalObj);this._intervalObj = null;} else {this._intervalObj=setInterval(function(){//console.dir();seft.next();},this.thumbMovingRate);}},stop:function(){clearInterval(this._intervalObj);},next:function(){//console.dir(self._sliderObj);var currentValue=this._sliderObj.value;var increaseValue=currentValue+1;if(increaseValue>this.maximum){if(this.sliderLoop)this.setSliderValue(this.minimum);elseclearInterval(this._intervalObj);}else{this.setSliderValue(increaseValue);}},previous:function(){var currentValue=this._sliderObj.value;var preValue=currentValue-1;if(preValue>=this.minimum){this.setSliderValue(preValue);}},_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,format,isTop){//var newLabelsArray=[];try{var labelImageCssClass=this.labelImageCssClass;var newArray=[];if (labelsArray==null) {var balLabels = noOfLabels-1;if(showImageLabel){if(showSingleImageLabel){var firstValue=this._formatLabels(this.minimum,format);firstValue=this.imageOnly?"":firstValue;if(isTop)firstValue=firstValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0' src='"+imageLabelsArray[0]+"'/></div>";elsefirstValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0'  src='"+imageLabelsArray[0]+"'/></div>"+firstValue;newArray.push(firstValue);var increment = (this.maximum-this.minimum)/balLabels;var firstNum = this.minimum;var indexImagcss=0;for (var i=1; i<noOfLabels-1; i++) {indexImagcss=i+1;firstNum = firstNum + increment;var arryValue=this._formatLabels(firstNum,format);arryValue=this.imageOnly?"":arryValue;if(isTop)arryValue=arryValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+i+"'  src='"+imageLabelsArray[0]+"'/></div>";elsearryValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+i+"' src='"+imageLabelsArray[0]+"'/></div>"+arryValue;//labelsArraynewArray.push(arryValue);}var lastValue=this._formatLabels(this.maximum,format);lastValue=this.imageOnly?"":lastValue;if(isTop)lastValue=lastValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"'  src='"+imageLabelsArray[0]+"'/></div>";elselastValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"'  src='"+imageLabelsArray[0]+"'/></div>"+lastValue;//labelsArraynewArray.push(lastValue);}else{var firstValue=this._formatLabels(this.minimum,format);firstValue=this.imageOnly?"":firstValue;if(isTop)firstValue=firstValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0'  src='"+imageLabelsArray[0]+"'/></div>";elsefirstValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0' src='"+imageLabelsArray[0]+"'/></div>"+firstValue;//labelsArraynewArray.push(firstValue);var increment = (this.maximum-this.minimum)/balLabels;var firstNum = this.minimum;var indexImagcss=0;for (var i=1; i<noOfLabels-1; i++) {indexImagcss=i+1;firstNum = firstNum + increment;var arryValue=this._formatLabels(firstNum,format);arryValue=this.imageOnly?"":arryValue;if(isTop)arryValue=arryValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+i+"' src='"+imageLabelsArray[i]+"'/></div>";elsearryValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+i+"' src='"+imageLabelsArray[i]+"'/></div>"+arryValue;//labelsArraynewArray.push(arryValue);}var lastValue=this._formatLabels(this.maximum,format);lastValue=this.imageOnly?"":lastValue;if(isTop)lastValue=lastValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"'   src='"+imageLabelsArray[imageLabelsArray.length-1]+"'/></div>";elselastValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"' src='"+imageLabelsArray[imageLabelsArray.length-1]+"'/></div>"+lastValue;//lastValue=lastValue+"<div><img src='"+imageLabelsArray[imageLabelsArray.length-1]+"'/></div>"//labelsArraynewArray.push(lastValue);}}else{var firstValue=this._formatLabels(this.minimum,format);//labelsArraynewArray.push(firstValue);var increment = (this.maximum-this.minimum)/balLabels;var firstNum = this.minimum;for (var i=1; i<noOfLabels-1; i++) {firstNum = firstNum + increment;var arryValue=this._formatLabels(firstNum,format);//labelsArraynewArray.push(arryValue);}var lastValue=this._formatLabels(this.maximum,format);//labelsArraynewArray.push(lastValue);}}else{//alert(labelsArray);if(showImageLabel){if(showSingleImageLabel){for(var i=0;i<labelsArray.length;i++){if(labelsArray[i]!=null){var labelValue=this._formatLabels(labelsArray[i],format);labelValue=this.imageOnly?"":labelValue;if(isTop)labelValue=labelValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0' src='"+imageLabelsArray[0]+"'/></div>";elselabelValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0'  src='"+imageLabelsArray[0]+"'/></div>"+labelValue;newArray.push(labelValue);}else{newArray.push(" ");}}}else{for(var i=0;i<labelsArray.length;i++){if(labelsArray[i]!=null){var labelValue=this._formatLabels(labelsArray[i],format);labelValue=this.imageOnly?"":labelValue;if(isTop)labelValue=labelValue+"<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0' src='"+imageLabelsArray[i]+"'/></div>";elselabelValue="<div><img class='"+labelImageCssClass+" "+labelImageCssClass+"0'  src='"+imageLabelsArray[i]+"'/></div>"+labelValue;newArray.push(labelValue);}else{newArray.push(" ");}}}}else{for(var i=0;i<labelsArray.length;i++){if(labelsArray[i]!=null){var labelValue=this._formatLabels(labelsArray[i],format);newArray.push(labelValue);}else{newArray.push(" ");}}}//console.dir(newArray);//labelsArray=newArray;//console.dir(newArray);}}catch(e){console.dir(e);}return newArray;},_formatLabels:function(label,format){return format.replace(this.replaceFlag,label);},_getself:function(){return self;},showPlayPauseBtn:function(){dojo.query("[widgetid="+this.sliderId+"_playpauseButtonNodeID]").style("display","block");},hidePlayPauseBtn:function(){dojo.query("[widgetid="+this.sliderId+"_playpauseButtonNodeID]").style("display","none");},showPreBtn:function(){//self.sliderId+"_preButtonNodeID"dojo.query("[widgetid="+this.sliderId+"_preButtonNodeID]").style("display","block");},hidePreBtn:function(){dojo.query("[widgetid="+this.sliderId+"_preButtonNodeID]").style("display","none");},showNextBtn:function(){//sliderId+"_nextButtonNodeID"dojo.query("[widgetid="+this.sliderId+"_nextButtonNodeID]").style("display","block");},hideNextBtn:function(){dojo.query("[widgetid="+this.sliderId+"_nextButtonNodeID]").style("display","none");},destroy:function(){//console.dir(this._nextButton);//self.sliderId+"_nextButtonNode"if(this._sliderObj)this._sliderObj.destroy();if(dojo.byId(this.sliderId+"_nextButtonNode"))dojo.destroy(this.sliderId+"_nextButtonNode");if(dojo.byId(this.sliderId+"_playpauseButtonNode"))dojo.destroy(this.sliderId+"_playpauseButtonNode");if(dojo.byId(this.sliderId+"_preButtonNode"))dojo.destroy(this.sliderId+"_preButtonNode");dojo.destroy(this.sliderId);}});

其中的dropDownArrow_grey.png是自定义的标签显示图片，可以在设置时更换成别的。
下面奉上test.html的code：：

<html><head><title>test slider</title><link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"><link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"><script>dojoConfig = {parseOnLoad: true}</script><script src="http://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js"></script><script src="MyCustomSlider.js"></script><script src="Map.js"></script><style>#testSlider .sliderCustomTopLabel{position: absolute;top: -22px;color: red;font: 11px Arial bold; white-space: nowrap;}#testSlider2 .sliderCustomTopLabel{position: absolute;top: -22px;color: red;font: 11px Arial bold; white-space: nowrap;}#testSlider .ies-Slider{position:relative;width:500px;top:50px;}#testSlider2 .ies-Slider{position:relative;width:500px;top:100px;}#testSlider .sliderButtomLabel{color:red;}#testSlider .sliderLabelImage{width:30px;height:30px;}</style></head><body class="claro"><input type="button" value="test" onclick="newslider()"/><input type="button" value="test destroy" onclick="destroy()"/><input type="button" value="showplaypause" onclick="showplaypause()"/><div id="testSlider"></div><div id="testSlider2"></div></body><script>//require(["dojo/parser", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels"]);function getUniqueId (prefix) {var uniqueId = (new Date()).getTime();return (prefix || 'id') + (uniqueId++);}var slider=new mapComponent.MyCustomSlider({labelFooterFormat:"# eWeek",noOfLabels:5,minimum: 1,maximum: 10,divId:"testSlider",sliderLoop: false,showCustomTopLabel:false,//imageOnly:false,showBottomMark:true,showTopMark:true,showTopLabel:true,bottomImageLabels:["http://eventmedia.eurecom.fr/dashboard/img/explore.png"],sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderVcustomSliderArray:[{id:1,label:10},{id:2,label:5},{id:3,label:4},{id:4,label:50},{id:5,label:60},{id:6,label:70},{id:6,label:71},{id:9,label:81}],onsliderChange:function(value){console.dir(value);console.dir("yilei testaa=="+value.id + "  " + value.label);}});obj=slider.createSlider();function destroy(){slider.destroy();}function showplaypause(){slider2.showPlayPauseBtn();}var slider2;function newslider(){slider2=new mapComponent.MyCustomSlider({labelFooterFormat:"# eWeek",noOfLabels:3,divId:"testSlider2",minimum: 1,maximum: 10,sliderName:"new",sliderLoop: false,//showCustomTopLabel:false,//imageOnly:false,showPlayPause:false,showPre:true,showNext:true,sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderVcustomSliderArray:[{id:1,label:"10 for test"},{id:2,label:5},{id:3,label:4},{id:4,label:50},{id:5,label:60},{id:6,label:70},{id:6,label:71},{id:9,label:"81 for testing"}],onsliderChange:function(value){console.dir("yilei bb test=="+value.id + "  " + value.label);}});slider2.createSlider();console.dir(slider.getself());console.dir(slider2.getself());}</script></html>

值得注意的一些细节是，当sliderType设置成CustomSliderH或CustomSliderV时，意思是生成无序数的slider，必须设置customSliderArray，它是用来生产无序数slider的一个集合，此时mininum和maxinum是不用设置的。
当sliderType设置成VerticalSlider或HorizontalSlider时，mininum和maxinum是必须设置的
当showBottomImageLabel或showSingleTopImageLabel设置成true时，topImageLabels或bottomImageLabels就必须设置值，如果showSingleTopImageLabel或showSingleBottomImageLabel设置为true，topImageLabels或bottomImageLabels只需要设置一张图片就可以，
如果为false，则需要根据你设置的标签数来设置图片数。

其中有用到Map.js,下面给出Map.js的code::

function Map(linkItems) {     this.current = undefined;     this._size = 0;     if(linkItems === false){    this.disableLinking();     } }/** * get the map * @return current object */Map.noop = function() {     return this; }; /** * illegal * @return */Map.illegal = function() {     throw new Error("illegal use"); }; /** *  * @param obj * @param foreignKeys * @return */Map.from = function(obj, foreignKeys) {     var map = new Map;     for(var prop in obj) {         if(foreignKeys || obj.hasOwnProperty(prop)){        map.put(prop, obj[prop]);         }     }     return map; }; /** * stop usemap * @return */Map.prototype.disableLinking = function() {     this.link = Map.noop;     this.unlink = Map.noop;     this.disableLinking = Map.noop;     this.next = Map.illegal;     this.key = Map.illegal;     this.value = Map.illegal;     this.clear = Map.illegal;     return this; }; /** * return hash vallue expl:number 123 * @param value key/value * @return */Map.prototype.hash = function(value) {     return (typeof value) + ' ' + (value instanceof Object ? (value.__hash || (value.__hash = ++arguments.callee.current)) : value.toString()); }; /** * return map size * @return */Map.prototype.size = function() {     return this._size;}; Map.prototype.hash.current = 0; /** * get Value from key * @param key * @return */Map.prototype.get = function(key) {     var item = this[this.hash(key)];     return item === undefined ? undefined : item.value; }; /** *put the value to map * @param key * @param value * @return */Map.prototype.put = function(key, value) {     var hash = this.hash(key);     if(this[hash] === undefined) {         var item = { key : key, value : value };         this[hash] = item;         this.link(item);         ++this._size;     }else{    this[hash].value = value;    }     return this; }; /** * remove value from key * @param key * @return */Map.prototype.remove = function(key) {     var hash = this.hash(key);     var item = this[hash];     if(item !== undefined) {         --this._size;         this.unlink(item);         delete this[hash];     }     return this; }; /** * clear  ap * @return */Map.prototype.clear = function() {     while(this._size){this.remove(this.key()); }     return this; }; /** * proc map * @param item * @return */Map.prototype.link = function(item) {     if(this._size == 0) {         item.prev = item;         item.next = item;         this.current = item;     }else {         item.prev = this.current.prev;         item.prev.next = item;         item.next = this.current;         this.current.prev = item;    } }; Map.prototype.unlink = function(item) {     if(this._size == 0){         this.current = undefined;    }else {         item.prev.next = item.next;         item.next.prev = item.prev;         if(item === this.current){        this.current = item.next;         }     } }; /** * get next one * @return */Map.prototype.next = function() {     this.current = this.current.next;     return this;}; /** * get the key * @return */Map.prototype.key = function() {     return this.current.key; }; /** *get the value * @return */Map.prototype.value = function() {     return this.current.value; };

把四个文件准备好，就可以进行测试了：

labelFooterFormat:"# eWeek",
noOfLabels:5,
divId:"testSlider",
sliderLoop: false,
showCustomTopLabel:false,
//imageOnly:false,
showBottomMark:true,
showTopMark:true,
showTopLabel:true,
bottomImageLabels:["http://eventmedia.eurecom.fr/dashboard/img/explore.png"],
sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderV
customSliderArray:[{id:1,label:10},{id:2,label:5},{id:3,label:4},{id:4,label:50},{id:5,label:60},{id:6,label:70},{id:6,label:71},{id:9,label:81}],
onsliderChange:function(value){
console.dir(value);
console.dir("yilei testaa=="+value.id + "  " + value.label);
}

labelFooterFormat:"# eWeek",
noOfLabels:5,
minimum: 1,
maximum: 10,
divId:"testSlider",
sliderLoop: false,
showCustomTopLabel:false,
//imageOnly:false,
showBottomMark:true,
showTopMark:true,
showTopLabel:true,
bottomImageLabels:["http://eventmedia.eurecom.fr/dashboard/img/explore.png"],
sliderType:"HorizontalSlider",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderV
onsliderChange:function(value){
console.dir(value);
console.dir("yilei testaa=="+value.id + "  " + value.label);
}

slider2=new mapComponent.MyCustomSlider({
labelFooterFormat:"# eWeek",
noOfLabels:3,
divId:"testSlider2",

sliderName:"new",
sliderLoop: false,
//showCustomTopLabel:false,
//imageOnly:false,
showPlayPause:false,
showPre:true,
showNext:true,

sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderV
customSliderArray:[{id:1,label:"10 for test"},{id:2,label:5},{id:3,label:4},{id:4,label:50},{id:5,label:60},{id:6,label:70},{id:6,label:71},{id:9,label:"81 for testing"}],
onsliderChange:function(value){
console.dir("yilei bb test=="+value.id + "  " + value.label);
}

不贴图了，慢慢试吧