首页 > 代码库 > 二次封装dojo slider

二次封装dojo slider

2024-09-01 21:52:22   219人阅读

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

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

 

[javascript] view plain copy
 
  1. /** 
  2.  * yilei 
  3.  * custom dojo slider 
  4.  * Note:>>!! sliderType got 2 type there are "HorizontalSlider" and "VerticalSlider", they use same setting. 
  5.  * The Top setting will became Left setting and the Buttom setting will became Right setting 
  6.  * when the sliderType set to "VerticalSlider" 
  7.  --------------------------------------------------- 
  8.  * For example: 
  9.  * The topLabels array is setting to display the top Graduation for "HorizontalSlider", it is setting to dispay the 
  10.  * left Graduation for "VerticalSlider" also. 
  11.  ----------------------------------------------------- 
  12.  * This slider not suport image label for "VerticalSlider" now..... 
  13.  *custom obj example:: 
  14.  *10    5   4   53  50   
  15.  * 
  16.  *  { [id: 1, label:10], 
  17.  *      [id:2, label: 5], 
  18.  *      [id:3, label: 4],..... 
  19.  *  } 
  20.  * need map.js suport 
  21.  */  
  22.    
  23. dojo.declare("mapComponent.MyCustomSlider",null,{  
  24.     minimum:null,  
  25.     maximum:null,  
  26.     stepIncrement:1, //PANI  
  27.     customSliderArray: null, //[]  
  28.     divId:"",  
  29.     intermediateChanges:true,     
  30.     showButtons:true,//only for VerticalSlider or CustomSliderV  
  31.     sliderClass:"",  
  32.     replaceFlag:"#",  
  33.     sliderName:"temp",  
  34.     sliderId:"tempId",  
  35.     SliderCssClass: "ies-Slider",  
  36.     labelImageCssClass:"sliderLabelImage",  
  37.     sliderType:"HorizontalSlider",  
  38.     /********HorizontalSlider and VerticalSlider and CustomSliderV and CustomSliderH**************/  
  39.     showCustomTopLabel: true,  //It is show custom label at left side on VerticalSlider  
  40.     showTopLabel:false,  //It is show label at left side on VerticalSlider  
  41.     showBottomMark:false, //It is show Graduation at right side on VerticalSlider  
  42.     showTopMark:false,  //It is show Graduation at left side on VerticalSlider  
  43.     showBottomLabel:true,    //It is show label at right side on VerticalSlider  
  44.     noOfTopLabels:3,        //It is setting total labels number at left side on VerticalSlider  
  45.     topLabels:null,         //.....same to verticalslider  
  46.     noOfLabels:3, // Old noOfBottomlabels  
  47.     bottomlabels:null,    
  48.     labelFooterFormat: "#",  
  49.     labelTopFormat: "#",      
  50.     customTopLabelCssClass:"sliderCustomTopLabel",  
  51.     toplabelCssClass:"sliderTopLabel",  
  52.     topMarkCssClass:"sliderTopMark",  
  53.     bottomLabelCssClass:"sliderBottomLabel",  
  54.     bottomMarkCssClass:"sliderBottomMark",    
  55.     showTopImageLabel:false,  
  56.     showBottomImageLabel:true,  
  57.     showSingleTopImageLabel:true,  
  58.     showSingleBottomImageLabel:true,  
  59.     showPlayPause:true,  
  60.     showPre:true,  
  61.     showNext:true,  
  62.       
  63.     topImageLabels:["dropDownArrow_grey.png"],  
  64.     bottomImageLabels:["dropDownArrow_grey.png"],  
  65.     imageOnly:false,  
  66.     sliderLoop:false,  
  67.     thumbMovingRate:500,  
  68.       
  69.     /********HorizontalSlider and VerticalSlider**************/  
  70.       
  71.     onsliderChange:function(timeExtentObj){},  
  72.     defaultValue:0,  
  73.     increase:1,  
  74.     self:null,  
  75.     _totleStep:0,  
  76.     _customType:null,  
  77.     _sliderObj:null,  
  78.     _intervalObj:null,  
  79.     _playPauseButton:null,  
  80.     _nextButton:null,  
  81.     _preButton:null,  
  82.     _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>",  
  83.     /**********constructor function for init*************/  
  84.     constructor:function(params){         
  85.                   
  86.         dojo.mixin(this, params);         
  87.           
  88.                   
  89.         if((this.sliderType=="CustomSliderH" || this.sliderType=="CustomSliderV" )&&(this.customSliderArray && this.customSliderArray.length>0) )  
  90.         {  
  91.             if (this.showTopLabel == true)  
  92.                 {this.topLabels=[];}  
  93.                   
  94.             if (this.showBottomLabel == true)  
  95.                 {this.bottomlabels=[];}  
  96.                   
  97.             if (this.customSliderArray) {  
  98.                 if (this.customSliderArray.length > 0) {  
  99.                     this.minimum = 0;  
  100.                     this.maximum = this.customSliderArray.length-1;  
  101.                 }  
  102.             }  
  103.           
  104.         // Setting Labels     
  105.         console.log("this.maximum - " + this.maximum);  
  106.         console.log("this.minimum - " + this.minimum);  
  107.           
  108.           
  109.           
  110.         var val = this.minimum;  
  111.             if (this.customSliderArray) {  
  112.                 var obj=this.customSliderArray[this.minimum];  
  113.                 val = obj.label;  
  114.             }  
  115.                   
  116.             if (this.showTopLabel == true)  
  117.                 {this.topLabels.push(val);}  
  118.                   
  119.             if (this.showBottomLabel == true)  
  120.                 {this.bottomlabels.push(val);}  
  121.           
  122.         //var increment = parseInt(((this.maximum - this.minimum)+1) / (this.noOfLabels-2));  
  123.         //var increment = parseInt((this.maximum - this.minimum-1) / (this.noOfLabels-2));  
  124.         console.log((this.maximum - this.minimum) / (this.noOfLabels-1));  
  125.         var increment = Math.round((this.maximum - this.minimum) / (this.noOfLabels-1));  
  126.         console.log("increment - " + increment);  
  127.         var firstNum=this.minimum;  
  128.         var map=new Map();  
  129.         for(var f=0;f<this.noOfLabels-2;f++)  
  130.         {  
  131.             firstNum=firstNum+increment;  
  132.             map.put(firstNum,firstNum);  
  133.               
  134.         }  
  135.         for(var t=1;t<this.customSliderArray.length-1;t++)  
  136.         {  
  137.             var temp=map.get(t);  
  138.             if(temp)  
  139.             {  
  140.                 if (this.showTopLabel == true)  
  141.                 this.topLabels.push(this.customSliderArray[temp].label);  
  142.                   
  143.                 if (this.showBottomLabel == true)  
  144.                 this.bottomlabels.push(this.customSliderArray[temp].label);  
  145.                 map.remove(t);  
  146.             }  
  147.             else  
  148.             {  
  149.                 if (this.showTopLabel == true)  
  150.                 this.topLabels.push(null);  
  151.                   
  152.                 if (this.showBottomLabel == true)  
  153.                 this.bottomlabels.push(null);  
  154.             }  
  155.         }  
  156.         map=null;  
  157.         var val = this.maximum;  
  158.             if (this.customSliderArray) {  
  159.                 var obj=this.customSliderArray[this.maximum];  
  160.                 val = obj.label;  
  161.             }  
  162.                   
  163.             if (this.showTopLabel == true)  
  164.                 this.topLabels.push(val);  
  165.                   
  166.             if (this.showBottomLabel == true)  
  167.                 this.bottomlabels.push(val);  
  168.               
  169.             if(this.sliderType=="CustomSliderH")  
  170.             {  
  171.                 this._customType="H";  
  172.             }  
  173.             else if(this.sliderType=="CustomSliderV")  
  174.             {  
  175.                 this._customType="V";  
  176.             }  
  177.         }  
  178.         if(this.defaultValue=http://www.mamicode.com/=0)this.defaultValue=http://www.mamicode.com/this.minimum;   
  179.         self=this;  
  180.         _totleStep=(this.maximum-this.minimum+1)/this.increase;       
  181.         this.sliderId=getUniqueId(this.sliderName);   
  182.         //alert(this.customSliderArray.length);  
  183.     },  
  184.   
  185.     createSlider:function(){  
  186.         var self=this;  
  187.         if(this.sliderType=="HorizontalSlider" || this._customType=="H")  
  188.         {  
  189.               
  190.             require(["dojo/parser", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels","dojo/dom-class","dijit/form/Button","dojo/dom-attr"],   
  191.                 function(parser,HorizontalSlider,HorizontalRule,HorizontalRuleLabels,domClass,Button,domAttr){   
  192.                   parser.parse();   
  193.                   try  
  194.                     {  
  195.                         // Destroy the div and then create  
  196.                         dojo.destroy(dojo.query("[id^="+self.sliderName+"]"));  
  197.                         // Create new Div and add to divSlidersContainer  
  198.                         //var sliderNode = dojo.byId(this.divId);   
  199.                         //alert(this.divId);  
  200.                         //domClass.add(dojo.byId(_self.divId),"ttt");  
  201.                         self._wrapString=self._wrapString.replace(/sliderId/g,self.sliderId);  
  202.                         //console.dir(self._wrapString);  
  203.                         dojo.place(self._wrapString,dojo.byId(self.divId));  
  204.                         dojo.addClass(dojo.byId(self.sliderId),self.SliderCssClass)  
  205.                           
  206.                         //domAttr.set(dojo.query(".esriTimeSlider")[0],"id",self.sliderId);  
  207.                         //dojo.query(".tsTmp");  
  208.                         new Button({  
  209.                             //label: "Click me!",  
  210.                             id:self.sliderId+"_playpauseButtonNodeID",  
  211.                             iconClass:"tsButton tsPlayButton",  
  212.                             showLabel:false,  
  213.                             style:{"margin-top":"-20px","display":"none"},  
  214.                             onClick: function(){  
  215.                                 // Do something:  
  216.                                 //self._playPauseButton.destory();  
  217.                                 console.dir(self);  
  218.                                 domAttr.set(this,"iconClass",self._intervalObj?"tsButton tsPlayButton":"tsButton tsPauseButton");  
  219.                                 self.playPause();  
  220.                             }  
  221.                         }, self.sliderId+"_playpauseButtonNode").startup();  
  222.                         //self._playPauseButton = dijit.byId(self.sliderId+"_playpauseButtonNode");  
  223.                         new Button({  
  224.                             //label: "Click me!",  
  225.                             id:self.sliderId+"_preButtonNodeID",  
  226.                             iconClass:"tsButton tsPrevButton",  
  227.                             showLabel:false,  
  228.                             style:{"margin-top":"-20px","display":"none"},  
  229.                             onClick: function(){  
  230.                                 // Do something:  
  231.                                 //alert("ggg");  
  232.                                 self.previous();  
  233.                             }  
  234.                               
  235.                         }, self.sliderId+"_preButtonNode").startup();  
  236.                         //self._preButton = dijit.byId(self.sliderId+"_preButtonNode");  
  237.                         new Button({  
  238.                             //label: "Click me!",  
  239.                             id:self.sliderId+"_nextButtonNodeID",  
  240.                             iconClass:"tsButton tsNextButton",  
  241.                             showLabel:false,  
  242.                             style:{"margin-top":"-20px","display":"none"},  
  243.                             onClick: function(){  
  244.                                 // Do something:  
  245.                                 //alert("hhhh");  
  246.                                 console.dir(self);  
  247.                                 self.next();  
  248.                             }  
  249.                         }, self.sliderId+"_nextButtonNode").startup();  
  250.                         //self._nextButton=dijit.byId(self.sliderId+"_nextButtonNode");  
  251.                         var sliderNode=dojo.create("div",null,dojo.query(".tsTmp",dojo.byId(self.sliderId))[0]);  
  252.                         //sliderNode.id=self.sliderId;  
  253.                           
  254.                         if(self.showTopLabel&&!self.showCustomTopLabel)  
  255.                         {  
  256.                         //alert("show Top");  
  257.                             var rulesNodeLabelsTop = dojo.create("div", null, sliderNode);                
  258.                               
  259.                             //_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,isTop)  
  260.                               
  261.                             var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,self.showTopImageLabel,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);  
  262.                             var labelsHeight="1em";  
  263.                             if(self.showTopImageLabel)  
  264.                             labelsHeight="2em";       
  265.                             if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )  
  266.                                     markCount=self.customSliderArray.length;  
  267.                                 else  
  268.                                     markCount=self.noOfTopLabels;                         
  269.                             var sliderLabelsTop= new dijit.form.HorizontalRuleLabels(  
  270.                                 {  
  271.                                     container: "topDecoration",  
  272.                                     count: markCount,  
  273.                                     labels: newtopLabels,  
  274.                                     style: "height:"+labelsHeight+";font-size:75%;color:gray;white-space: nowrap;",  
  275.                                     //class:self.toplabelCssClass  
  276.                                 },  
  277.                                 rulesNodeLabelsTop);  
  278.                                 domClass.add(rulesNodeLabelsTop, self.toplabelCssClass);  
  279.                                 if(self.showTopMark)  
  280.                                 {  
  281.                                     var rulesNodeTop = dojo.create("div", null, sliderNode);   
  282.                                     var sliderRuleTop= new dijit.form.HorizontalRule(  
  283.                                     {  
  284.                                     container: "topDecoration",  
  285.                                         count: markCount,  
  286.                                         style: "height:1em;font-size:75%;color:gray;",  
  287.                                         //class:self.topMarkCssClass  
  288.                                     },  
  289.                                     rulesNodeTop);  
  290.                                     domClass.add(rulesNodeTop, self.topMarkCssClass);  
  291.                                 }  
  292.                                   
  293.                         }  
  294.                           
  295.                         if(self.showBottomLabel)  
  296.                         {  
  297.                               
  298.                             if(self.showBottomMark)  
  299.                             {  
  300.                                 var markCount=0;  
  301.                                 //alert(self.sliderType);  
  302.                                 //alert(self.customSliderArray.length);  
  303.                                 if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )  
  304.                                     markCount=self.customSliderArray.length;  
  305.                                 else  
  306.                                     markCount=self.noOfLabels;  
  307.                                 var rulesNodeBottom = dojo.create("div", null, sliderNode);   
  308.                                 var sliderBottomRule= new dijit.form.HorizontalRule(  
  309.                                 {  
  310.                                 container: "bottomDecoration",  
  311.                                     count: markCount,  
  312.                                     style: "height:1em;font-size:75%;color:gray;",  
  313.                                     //class:self.bottomMarkCssClass  
  314.                                 },  
  315.                                 rulesNodeBottom);  
  316.                                 domClass.add(rulesNodeBottom, self.bottomMarkCssClass);  
  317.                             }  
  318.                             //  sliderNode.appendChild(rulesNode);  
  319.                               
  320.                             var rulesNodeLabelsBottom = dojo.create("div", null, sliderNode);   
  321.                             //alert(self.bottomlabels.length);  
  322.                             var newBottomLabels=self._labelsPackage(self.noOfLabels,self.bottomlabels,self.showBottomImageLabel,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);  
  323.                             //alert(self.bottomlabels.length);  
  324.                             //console.dir(newBottomLabels);  
  325.                             var sliderBottomLabels= new dijit.form.HorizontalRuleLabels(  
  326.                                 {  
  327.                                     container: "bottomDecoration",  
  328.                                     count: self.noOfLabels,  
  329.                                     labels: newBottomLabels,  
  330.                                     style: "height:2em;font-size:75%;color:gray;white-space: nowrap;",  
  331.                                     //class:self.sliderBottomLabel  
  332.                                 },  
  333.                                 rulesNodeLabelsBottom);  
  334.                                 domClass.add(rulesNodeLabelsBottom, self.bottomLabelCssClass);  
  335.                                 //console.dir(dojo.query(rulesNodeLabelsBottom)[0]);  
  336.                         }     
  337.                           
  338.                         var slider = new dijit.form.HorizontalSlider({  
  339.                                     name: self.sliderId,  
  340.                                     value: self.defaultValue,  
  341.                                     minimum: self.minimum,  
  342.                                     maximum: self.maximum,  
  343.                                     discreteValues: _totleStep,  
  344.                                     intermediateChanges: self.intermediateChanges,  
  345.                                     //showButtons:self.showButtons,  
  346.                                     showButtons:false,  
  347.                                     //style: "position:relative",  
  348.                                     //style: "width:500px;",  
  349.                                     //class:self.SliderCssClass,  
  350.                                     onChange: function(value){  
  351.                                     //console.dir(value);  
  352.                                         if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )  
  353.                                         {  
  354.                                             var customObj=self.customSliderArray[value];  
  355.                                             value=http://www.mamicode.com/customObj;
  356.                                               
  357.                                         }  
  358.                                         if (self.showCustomTopLabel == true) {  
  359.                                               
  360.                                             var topLabelDisplay="";  
  361.                                                 if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )  
  362.                                                 {  
  363.                                                     topLabelDisplay=self._formatLabels(value.label,self.labelTopFormat);  
  364.                                                 }  
  365.                                                 else  
  366.                                                 {  
  367.                                                     topLabelDisplay= self._formatLabels(value,self.labelTopFormat);  
  368.                                                                                                       
  369.                                                 }  
  370.                                                 dojo.byId(self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;  
  371.                                         }  
  372.                                             self.onsliderChange(value);  
  373.                                     }  
  374.   
  375.                                 }, sliderNode);  
  376.                                 slider.startup();  
  377.                                 //showPlayPause  
  378.                                 //showPre  
  379.                                 //showNext  
  380.                                 if(self.showPlayPause)  
  381.                                 self.showPlayPauseBtn();  
  382.                                 if(self.showPre)  
  383.                                 self.showPreBtn();  
  384.                                 if(self.showNext)  
  385.                                 self.showNextBtn();  
  386.                                 self._sliderObj=slider;  
  387.                                 var defaultBegain=0;  
  388.                                 if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )  
  389.                                 {  
  390.                                     defaultBegain=self._formatLabels(self.customSliderArray[slider.value].label,self.labelTopFormat);  
  391.                                 }  
  392.                                 else  
  393.                                 {  
  394.                                     defaultBegain=self._formatLabels(slider.value,self.labelTopFormat);  
  395.                                 }  
  396.                                               
  397.                                 if (self.showCustomTopLabel) {  
  398.                                     dojo.create("span", {id: self.sliderId+"_sp_topLabel",class:self.customTopLabelCssClass, innerHTML: defaultBegain}, dojo.query(".dijitSliderMoveable",dojo.byId(self.sliderId))[0]);  
  399.                                 }  
  400.                     }catch(e){console.dir(e);}  
  401.                 });  
  402.         }  
  403.         else if(this.sliderType=="VerticalSlider" || this._customType=="V")  
  404.         {  
  405.             require(["dojo/parser", "dijit/form/VerticalSlider", "dijit/form/VerticalRule", "dijit/form/VerticalRuleLabels","dojo/dom-class"],   
  406.                 function(parser,VerticalSlider,VerticalRule,VerticalRuleLabels,domClass){   
  407.                   parser.parse();   
  408.                   try  
  409.                     {  
  410.                         // Destroy the div and then create  
  411.                         dojo.destroy(dojo.query("[id^="+self.sliderName+"]"));  
  412.                         // Create new Div and add to divSlidersContainer  
  413.                         //var sliderNode = dojo.byId(this.divId);   
  414.                         //alert(this.divId);  
  415.                         domClass.add(dojo.byId(self.divId),"ttt");  
  416.                         var sliderNode=dojo.create("div",null,dojo.byId(self.divId));  
  417.                         //sliderNode.id=self.sliderId;  
  418.                           
  419.                         if(self.showTopLabel&&!self.showCustomTopLabel)  
  420.                         {  
  421.                         //alert("show Top");  
  422.                             var rulesNodeLabelsTop = dojo.create("div", null, sliderNode);                
  423.                               
  424.                             //_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,isTop)  
  425.                             //var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,self.showTopImageLabel,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);  
  426.                             //**********************function not suport image now  
  427.                             var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,false,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);  
  428.                             var labelsHeight="1em";  
  429.                             if(self.showTopImageLabel)  
  430.                             labelsHeight="2em";               
  431.                             var sliderLabelsTop= new dijit.form.VerticalRuleLabels(  
  432.                                 {  
  433.                                     container: "leftDecoration",  
  434.                                     count: self.noOfTopLabels,  
  435.                                     labels: newtopLabels,  
  436.                                     style: "width:"+labelsHeight+";font-size:75%;color:gray;",  
  437.                                     //class:self.toplabelCssClass  
  438.                                 },  
  439.                                 rulesNodeLabelsTop);  
  440.                                 domClass.add(rulesNodeLabelsTop, self.toplabelCssClass);  
  441.                                 if(self.showTopMark)  
  442.                                 {  
  443.                                     var rulesNodeTop = dojo.create("div", null, sliderNode);   
  444.                                     var sliderRuleTop= new dijit.form.VerticalRule(  
  445.                                     {  
  446.                                     container: "leftDecoration",  
  447.                                         count: self.noOfTopLabels,  
  448.                                         style: "width:1em;font-size:75%;color:gray;",  
  449.                                         //class:self.topMarkCssClass  
  450.                                     },  
  451.                                     rulesNodeTop);  
  452.                                     domClass.add(rulesNodeTop, self.topMarkCssClass);  
  453.                                 }  
  454.                                   
  455.                         }  
  456.                           
  457.                         if(self.showBottomLabel)  
  458.                         {  
  459.                               
  460.                             if(self.showBottomMark)  
  461.                             {  
  462.                                 var rulesNodeBottom = dojo.create("div", null, sliderNode);   
  463.                                 var sliderBottomRule= new dijit.form.VerticalRule(  
  464.                                 {  
  465.                                 container: "rightDecoration",  
  466.                                     count: self.noOfLabels,  
  467.                                     style: "width:1em;font-size:75%;color:gray;",  
  468.                                     //class:self.bottomMarkCssClass  
  469.                                 },  
  470.                                 rulesNodeBottom);  
  471.                                 domClass.add(rulesNodeBottom, self.bottomMarkCssClass);  
  472.                             }  
  473.                             //  sliderNode.appendChild(rulesNode);  
  474.                               
  475.                             var rulesNodeLabelsBottom = dojo.create("div", null, sliderNode);   
  476.                             //var newBottomLabels=self._labelsPackage(self.noOfBottomlabels,self.bottomlabels,self.showBottomImageLabel,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);  
  477.                             //*****************function not suport image now.....  
  478.                             var newBottomLabels=self._labelsPackage(self.noOfLabels,self.bottomlabels,false,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);  
  479.                             //console.dir();  
  480.                             console.dir(newBottomLabels);  
  481.                             var sliderBottomLabels= new dijit.form.VerticalRuleLabels(  
  482.                                 {  
  483.                                     container: "rightDecoration",  
  484.                                     count: self.noOfLabels,  
  485.                                     labels: newBottomLabels,  
  486.                                     style: "width:2em;font-size:75%;color:gray;",  
  487.                                     //class:self.sliderBottomLabel  
  488.                                 },  
  489.                                 rulesNodeLabelsBottom);  
  490.                                 domClass.add(rulesNodeLabelsBottom, self.bottomLabelCssClass);  
  491.                                 //console.dir(dojo.query(rulesNodeLabelsBottom)[0]);  
  492.                         }     
  493.                           
  494.                         var slider = new dijit.form.VerticalSlider({  
  495.                                     name: self.sliderId,  
  496.                                     value: self.defaultValue,  
  497.                                     minimum: self.minimum,  
  498.                                     maximum: self.maximum,  
  499.                                     discreteValues: _totleStep,  
  500.                                     intermediateChanges: self.intermediateChanges,  
  501.                                     //showButtons:self.showButtons,  
  502.                                     showButtons:false,  
  503.                                     //style: "position:relative",  
  504.                                     style: "height:500px;",  
  505.                                     //class:self.SliderCssClass,  
  506.                                     onChange: function(value){  
  507.                                     //console.dir(value);  
  508.                                     if (self.showCustomTopLabel == true) {  
  509.                                         var topLabelDisplay="";  
  510.                                             if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )  
  511.                                             {  
  512.                                                 var customObj=self.customSliderArray[value];  
  513.                                                 value=http://www.mamicode.com/customObj;
  514.                                                 topLabelDisplay=self._formatLabels(value.id,self.labelTopFormat);  
  515.                                             }  
  516.                                             else  
  517.                                             {  
  518.                                                 topLabelDisplay= self._formatLabels(value,self.labelTopFormat);  
  519.                                                                                                   
  520.                                             }  
  521.                                             dojo.byId(self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;  
  522.                                         }  
  523.                                         self.onsliderChange(value);  
  524.                                     }  
  525.   
  526.                                 }, sliderNode);  
  527.                                 slider.startup();  
  528.                                 self._sliderObj=slider;  
  529.                                 var defaultBegain=0;  
  530.                                 if(self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )  
  531.                                 {  
  532.                                     defaultBegain=self._formatLabels(self.customSliderArray[slider.value].label,self.labelTopFormat);  
  533.                                 }  
  534.                                 else  
  535.                                 {  
  536.                                     defaultBegain=self._formatLabels(slider.value,self.labelTopFormat);  
  537.                                 }  
  538.                                 if (self.showCustomTopLabel) {  
  539.                                     dojo.create("span", {id: self.sliderId+"_sp_topLabel",class:self.customTopLabelCssClass, innerHTML: defaultBegain}, dojo.query(".dijitSliderMoveable",dojo.byId(self.sliderId))[0]);  
  540.                                 }  
  541.                     }catch(e){console.dir(e);}  
  542.                 });  
  543.         }  
  544.         return self._sliderObj;  
  545.     },  
  546.     setSliderValue:function(v){  
  547.         this._sliderObj.setValue(v);  
  548.     },  
  549.     getValue:function(){  
  550.         return this._sliderObj.value;  
  551.     },  
  552.     playPause:function() {  
  553.     console.dir(this);  
  554.     var seft=this;  
  555.         if (this._intervalObj) {  
  556.             clearInterval(this._intervalObj);  
  557.             this._intervalObj = null;  
  558.         } else {  
  559.             this._intervalObj=setInterval(function(){  
  560.             //console.dir();  
  561.                 seft.next();  
  562.             },this.thumbMovingRate);  
  563.         }  
  564.     },  
  565.     stop:function(){  
  566.         clearInterval(this._intervalObj);  
  567.     },  
  568.     next:function(){  
  569.     //console.dir(self._sliderObj);  
  570.         var currentValue=http://www.mamicode.com/this._sliderObj.value;  
  571.         var increaseValue=http://www.mamicode.com/currentValue+1;
  572.         if(increaseValue>this.maximum)  
  573.         {  
  574.             if(this.sliderLoop)  
  575.             this.setSliderValue(this.minimum);  
  576.             else  
  577.             clearInterval(this._intervalObj);  
  578.         }  
  579.         else  
  580.         {  
  581.             this.setSliderValue(increaseValue);  
  582.         }  
  583.     },  
  584.     previous:function(){  
  585.         var currentValue=http://www.mamicode.com/this._sliderObj.value;  
  586.         var preValue=http://www.mamicode.com/currentValue-1;
  587.         if(preValue>=this.minimum)  
  588.         {  
  589.             this.setSliderValue(preValue);  
  590.         }  
  591.           
  592.     },  
  593.     _labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,format,isTop){  
  594.         //var newLabelsArray=[];  
  595.           
  596.         try  
  597.         {  
  598.             var labelImageCssClass=this.labelImageCssClass;  
  599.             var newArray=[];  
  600.             if (labelsArray==null) {          
  601.                 var balLabels = noOfLabels-1;  
  602.                   
  603.                 if(showImageLabel)  
  604.                 {  
  605.                     if(showSingleImageLabel)  
  606.                     {  
  607.                         var firstValue=http://www.mamicode.com/this._formatLabels(this.minimum,format);  
  608.                         firstValue=http://www.mamicode.com/this.imageOnly?"":firstValue;  
  609.                         if(isTop)  
  610.                         firstValue=http://www.mamicode.com/firstValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>";  
  611.                         else  
  612.                         firstValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>"+firstValue;  
  613.                         newArray.push(firstValue);  
  614.                         var increment = (this.maximum-this.minimum)/balLabels;  
  615.                         var firstNum = this.minimum;  
  616.                         var indexImagcss=0;  
  617.                         for (var i=1; i<noOfLabels-1; i++) {  
  618.                             indexImagcss=i+1;  
  619.                             firstNum = firstNum + increment;  
  620.                             var arryValue=http://www.mamicode.com/this._formatLabels(firstNum,format);  
  621.                             arryValue=http://www.mamicode.com/this.imageOnly?"":arryValue;  
  622.                             if(isTop)  
  623.                             arryValue=http://www.mamicode.com/arryValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>";  
  624.                             else  
  625.                             arryValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>"+arryValue;  
  626.                             //labelsArray  
  627.                             newArray.push(arryValue);  
  628.                         }  
  629.                         var lastValue=http://www.mamicode.com/this._formatLabels(this.maximum,format);  
  630.                         lastValue=http://www.mamicode.com/this.imageOnly?"":lastValue;  
  631.                         if(isTop)  
  632.                         lastValue=http://www.mamicode.com/lastValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>";  
  633.                         else  
  634.                         lastValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>"+lastValue;  
  635.                         //labelsArray  
  636.                         newArray.push(lastValue);  
  637.                     }  
  638.                     else  
  639.                     {  
  640.                         var firstValue=http://www.mamicode.com/this._formatLabels(this.minimum,format);  
  641.                         firstValue=http://www.mamicode.com/this.imageOnly?"":firstValue;  
  642.                         if(isTop)  
  643.                         firstValue=http://www.mamicode.com/firstValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>";  
  644.                         else  
  645.                         firstValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>"+firstValue;  
  646.                         //labelsArray  
  647.                         newArray.push(firstValue);  
  648.                         var increment = (this.maximum-this.minimum)/balLabels;  
  649.                         var firstNum = this.minimum;  
  650.                         var indexImagcss=0;  
  651.                         for (var i=1; i<noOfLabels-1; i++) {  
  652.                             indexImagcss=i+1;  
  653.                             firstNum = firstNum + increment;  
  654.                             var arryValue=http://www.mamicode.com/this._formatLabels(firstNum,format);  
  655.                             arryValue=http://www.mamicode.com/this.imageOnly?"":arryValue;  
  656.                             if(isTop)  
  657.                             arryValue=http://www.mamicode.com/arryValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=http://www.mamicode.com/‘"+imageLabelsArray[i]+"‘/></div>";  
  658.                             else  
  659.                             arryValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=http://www.mamicode.com/‘"+imageLabelsArray[i]+"‘/></div>"+arryValue;  
  660.                             //labelsArray  
  661.                             newArray.push(arryValue);  
  662.                         }  
  663.                         var lastValue=http://www.mamicode.com/this._formatLabels(this.maximum,format);  
  664.                         lastValue=http://www.mamicode.com/this.imageOnly?"":lastValue;  
  665.                         if(isTop)  
  666.                         lastValue=http://www.mamicode.com/lastValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘   src=http://www.mamicode.com/‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>";  
  667.                         else  
  668.                         lastValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘ src=http://www.mamicode.com/‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>"+lastValue;  
  669.                         //lastValue=http://www.mamicode.com/lastValue+"<div><img src=http://www.mamicode.com/‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>"  
  670.                         //labelsArray  
  671.                         newArray.push(lastValue);  
  672.                     }  
  673.                 }  
  674.                 else  
  675.                 {  
  676.       
  677.                     var firstValue=http://www.mamicode.com/this._formatLabels(this.minimum,format);               
  678.                     //labelsArray  
  679.                     newArray.push(firstValue);  
  680.                   
  681.                     var increment = (this.maximum-this.minimum)/balLabels;  
  682.                     var firstNum = this.minimum;              
  683.                     for (var i=1; i<noOfLabels-1; i++) {                   
  684.                         firstNum = firstNum + increment;  
  685.                           
  686.                         var arryValue=http://www.mamicode.com/this._formatLabels(firstNum,format);                    
  687.                         //labelsArray  
  688.                         newArray.push(arryValue);  
  689.                     }  
  690.                     var lastValue=http://www.mamicode.com/this._formatLabels(this.maximum,format);                
  691.                     //labelsArray  
  692.                     newArray.push(lastValue);  
  693.                 }  
  694.               
  695.             }  
  696.             else  
  697.             {  
  698.                 //alert(labelsArray);  
  699.                 if(showImageLabel)  
  700.                 {  
  701.                     if(showSingleImageLabel)  
  702.                     {  
  703.                         for(var i=0;i<labelsArray.length;i++)  
  704.                         {  
  705.                             if(labelsArray[i]!=null)  
  706.                             {  
  707.                                 var labelValue=http://www.mamicode.com/this._formatLabels(labelsArray[i],format);  
  708.                                 labelValue=http://www.mamicode.com/this.imageOnly?"":labelValue;  
  709.                                 if(isTop)  
  710.                                 labelValue=http://www.mamicode.com/labelValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>";  
  711.                                 else  
  712.                                 labelValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=http://www.mamicode.com/‘"+imageLabelsArray[0]+"‘/></div>"+labelValue;  
  713.                                 newArray.push(labelValue);  
  714.                             }  
  715.                             else  
  716.                             {  
  717.                                 newArray.push(" ");  
  718.                             }  
  719.                               
  720.                         }  
  721.                     }  
  722.                     else  
  723.                     {  
  724.                         for(var i=0;i<labelsArray.length;i++)  
  725.                         {  
  726.                             if(labelsArray[i]!=null)  
  727.                             {  
  728.                                 var labelValue=http://www.mamicode.com/this._formatLabels(labelsArray[i],format);  
  729.                                 labelValue=http://www.mamicode.com/this.imageOnly?"":labelValue;  
  730.                                 if(isTop)  
  731.                                 labelValue=http://www.mamicode.com/labelValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=http://www.mamicode.com/‘"+imageLabelsArray[i]+"‘/></div>";  
  732.                                 else  
  733.                                 labelValue=http://www.mamicode.com/"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=http://www.mamicode.com/‘"+imageLabelsArray[i]+"‘/></div>"+labelValue;  
  734.                                 newArray.push(labelValue);  
  735.                             }  
  736.                             else  
  737.                             {  
  738.                                 newArray.push(" ");  
  739.                             }  
  740.                         }  
  741.                           
  742.                     }  
  743.                 }  
  744.                 else  
  745.                 {  
  746.                     for(var i=0;i<labelsArray.length;i++)  
  747.                     {  
  748.                         if(labelsArray[i]!=null)  
  749.                         {  
  750.                             var labelValue=http://www.mamicode.com/this._formatLabels(labelsArray[i],format);  
  751.                             newArray.push(labelValue);  
  752.                         }     
  753.                         else  
  754.                         {  
  755.                             newArray.push(" ");  
  756.                         }  
  757.                           
  758.                     }  
  759.                 }  
  760.                 //console.dir(newArray);  
  761.                 //labelsArray=newArray;  
  762.                 //console.dir(newArray);  
  763.             }  
  764.         }  
  765.         catch(e){console.dir(e);}  
  766.           
  767.         return newArray;  
  768.     },  
  769.     _formatLabels:function(label,format){  
  770.             return format.replace(this.replaceFlag,label);  
  771.     },  
  772.     _getself:function(){  
  773.         return self;  
  774.     },  
  775.     showPlayPauseBtn:function(){  
  776.         dojo.query("[widgetid="+this.sliderId+"_playpauseButtonNodeID]").style("display","block");  
  777.     },  
  778.     hidePlayPauseBtn:function(){  
  779.         dojo.query("[widgetid="+this.sliderId+"_playpauseButtonNodeID]").style("display","none");  
  780.     },  
  781.     showPreBtn:function(){  
  782.         //self.sliderId+"_preButtonNodeID"  
  783.         dojo.query("[widgetid="+this.sliderId+"_preButtonNodeID]").style("display","block");  
  784.     },  
  785.     hidePreBtn:function(){  
  786.         dojo.query("[widgetid="+this.sliderId+"_preButtonNodeID]").style("display","none");  
  787.     },  
  788.     showNextBtn:function(){  
  789.         //sliderId+"_nextButtonNodeID"  
  790.         dojo.query("[widgetid="+this.sliderId+"_nextButtonNodeID]").style("display","block");  
  791.     },  
  792.     hideNextBtn:function(){  
  793.         dojo.query("[widgetid="+this.sliderId+"_nextButtonNodeID]").style("display","none");  
  794.     },  
  795.     destroy:function(){  
  796.     //console.dir(this._nextButton);  
  797.     //self.sliderId+"_nextButtonNode"  
  798.         if(this._sliderObj)  
  799.             this._sliderObj.destroy();  
  800.         if(dojo.byId(this.sliderId+"_nextButtonNode"))  
  801.             dojo.destroy(this.sliderId+"_nextButtonNode");  
  802.         if(dojo.byId(this.sliderId+"_playpauseButtonNode"))  
  803.             dojo.destroy(this.sliderId+"_playpauseButtonNode");  
  804.         if(dojo.byId(this.sliderId+"_preButtonNode"))  
  805.             dojo.destroy(this.sliderId+"_preButtonNode");  
  806.         dojo.destroy(this.sliderId);  
  807.     }  
  808. });  



 

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

 

[html] view plain copy
 
  1. <html>  
  2. <head>  
  3. <title>test slider</title>  
  4. <link rel="stylesheet" href=http://www.mamicode.com/"http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">  
  5.   
  6. <link rel="stylesheet" href=http://www.mamicode.com/"http://js.arcgis.com/3.13/esri/css/esri.css">  
  7. <script>dojoConfig = {parseOnLoad: true}</script>  
  8.             <script src=http://www.mamicode.com/"http://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js"></script>  
  9.             <script src=http://www.mamicode.com/"MyCustomSlider.js"></script>  
  10.             <script src=http://www.mamicode.com/"Map.js"></script>  
  11. <style>  
  12. #testSlider .sliderCustomTopLabel{  
  13.     position: absolute;  
  14.             top: -22px;  
  15.               
  16.             color: red;  
  17.             font: 11px Arial bold;  
  18.              white-space: nowrap;  
  19. }  
  20. #testSlider2 .sliderCustomTopLabel{  
  21.     position: absolute;  
  22.             top: -22px;  
  23.               
  24.             color: red;  
  25.             font: 11px Arial bold;  
  26.              white-space: nowrap;  
  27. }  
  28. #testSlider .ies-Slider{  
  29. position:relative;  
  30.     width:500px;  
  31.     top:50px;  
  32. }  
  33.   
  34. #testSlider2 .ies-Slider{  
  35. position:relative;  
  36.     width:500px;  
  37.     top:100px;  
  38. }  
  39.   
  40. #testSlider .sliderButtomLabel{  
  41. color:red;  
  42. }  
  43. #testSlider .sliderLabelImage  
  44. {  
  45.     width:30px;  
  46.     height:30px;  
  47. }  
  48. </style>  
  49.   
  50. </head>  
  51. <body class="claro">  
  52. <input type="button" value=http://www.mamicode.com/"test" onclick="newslider()"/>  
  53. <input type="button" value=http://www.mamicode.com/"test destroy" onclick="destroy()"/>  
  54. <input type="button" value=http://www.mamicode.com/"showplaypause" onclick="showplaypause()"/>  
  55. <div id="testSlider"></div>  
  56. <div id="testSlider2"></div>  
  57. </body>  
  58. <script>  
  59.   
  60. //require(["dojo/parser", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels"]);  
  61. function getUniqueId (prefix) {  
  62.         var uniqueId = (new Date()).getTime();  
  63.         return (prefix || ‘id‘) + (uniqueId++);  
  64.     }  
  65. var slider=new mapComponent.MyCustomSlider({  
  66.     labelFooterFormat:"# eWeek",  
  67.     noOfLabels:5,  
  68.     minimum: 1,  
  69.     maximum: 10,  
  70.     divId:"testSlider",  
  71.     sliderLoop: false,  
  72.     showCustomTopLabel:false,  
  73.     //imageOnly:false,  
  74.     showBottomMark:true,  
  75.     showTopMark:true,  
  76.     showTopLabel:true,  
  77.     bottomImageLabels:["http://eventmedia.eurecom.fr/dashboard/img/explore.png"],  
  78.     sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderV  
  79.     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}],  
  80.     onsliderChange:function(value){  
  81.     console.dir(value);  
  82.     console.dir("yilei testaa=="+value.id + "  " + value.label);  
  83.     }  
  84. });  
  85. obj=slider.createSlider();  
  86.   
  87. function destroy()  
  88. {  
  89.     slider.destroy();  
  90. }  
  91. function showplaypause()  
  92. {  
  93.     slider2.showPlayPauseBtn();  
  94. }  
  95. var slider2;  
  96. function newslider()  
  97. {  
  98.     slider2=new mapComponent.MyCustomSlider({  
  99.     labelFooterFormat:"# eWeek",  
  100.     noOfLabels:3,  
  101.     divId:"testSlider2",  
  102.     minimum: 1,  
  103.     maximum: 10,  
  104.     sliderName:"new",  
  105.     sliderLoop: false,  
  106.     //showCustomTopLabel:false,  
  107.     //imageOnly:false,  
  108.         showPlayPause:false,  
  109.     showPre:true,  
  110.     showNext:true,  
  111.       
  112.     sliderType:"CustomSliderH",//VerticalSlider//CustomSliderH//HorizontalSlider//CustomSliderV  
  113.     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"}],  
  114.     onsliderChange:function(value){  
  115.     console.dir("yilei bb test=="+value.id + "  " + value.label);  
  116.     }  
  117. });  
  118. slider2.createSlider();  
  119. console.dir(slider.getself());  
  120. console.dir(slider2.getself());  
  121. }  
  122.   
  123. </script>  
  124. </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::

 

[javascript] view plain copy
 
  1. function Map(linkItems) {   
  2.     this.current = undefined;   
  3.     this._size = 0;   
  4.     if(linkItems === false){  
  5.         this.disableLinking();   
  6.     }   
  7. }  
  8. /** 
  9.  * get the map 
  10.  * @return current object 
  11.  */  
  12. Map.noop = function() {   
  13.     return this;   
  14. };   
  15. /** 
  16.  * illegal 
  17.  * @return 
  18.  */  
  19. Map.illegal = function() {   
  20.     throw new Error("illegal use");   
  21. };   
  22. /** 
  23.  *  
  24.  * @param obj 
  25.  * @param foreignKeys 
  26.  * @return 
  27.  */  
  28. Map.from = function(obj, foreignKeys) {   
  29.     var map = new Map;   
  30.     for(var prop in obj) {   
  31.         if(foreignKeys || obj.hasOwnProperty(prop)){  
  32.             map.put(prop, obj[prop]);   
  33.         }   
  34.     }   
  35.     return map;   
  36. };   
  37. /** 
  38.  * stop usemap 
  39.  * @return 
  40.  */  
  41. Map.prototype.disableLinking = function() {   
  42.     this.link = Map.noop;   
  43.     this.unlink = Map.noop;   
  44.     this.disableLinking = Map.noop;   
  45.     this.next = Map.illegal;   
  46.     this.key = Map.illegal;   
  47.     this.value = Map.illegal;   
  48.     this.clear = Map.illegal;   
  49.     return this;   
  50. };   
  51. /** 
  52.  * return hash vallue expl:number 123 
  53.  * @param value key/value 
  54.  * @return 
  55.  */  
  56. Map.prototype.hash = function(value) {   
  57.     return (typeof value) + ‘ ‘ + (value instanceof Object ? (value.__hash || (value.__hash = ++arguments.callee.current)) : value.toString());   
  58. };   
  59. /** 
  60.  * return map size 
  61.  * @return 
  62.  */  
  63. Map.prototype.size = function() {   
  64.     return this._size;  
  65. };   
  66.   
  67. Map.prototype.hash.current = 0;   
  68. /** 
  69.  * get Value from key 
  70.  * @param key 
  71.  * @return 
  72.  */  
  73. Map.prototype.get = function(key) {   
  74.     var item = this[this.hash(key)];   
  75.     return item === undefined ? undefined : item.value;   
  76. };   
  77. /** 
  78.  *put the value to map 
  79.  * @param key 
  80.  * @param value 
  81.  * @return 
  82.  */  
  83. Map.prototype.put = function(key, value) {   
  84.     var hash = this.hash(key);   
  85.     if(this[hash] === undefined) {   
  86.         var item = { key : key, value : value };   
  87.         this[hash] = item;   
  88.         this.link(item);   
  89.         ++this._size;   
  90.     }else{  
  91.         this[hash].value = value;  
  92.     }   
  93.     return this;   
  94. };   
  95. /** 
  96.  * remove value from key 
  97.  * @param key 
  98.  * @return 
  99.  */  
  100. Map.prototype.remove = function(key) {   
  101.     var hash = this.hash(key);   
  102.     var item = this[hash];   
  103.     if(item !== undefined) {   
  104.         --this._size;   
  105.         this.unlink(item);   
  106.         delete this[hash];   
  107.     }   
  108.     return this;   
  109. };   
  110. /** 
  111.  * clear  ap 
  112.  * @return 
  113.  */  
  114. Map.prototype.clear = function() {   
  115.     while(this._size){  
  116.         this.remove(this.key());   
  117.     }   
  118.     return this;   
  119. };   
  120. /** 
  121.  * proc map 
  122.  * @param item 
  123.  * @return 
  124.  */  
  125. Map.prototype.link = function(item) {   
  126.     if(this._size == 0) {   
  127.         item.prev = item;   
  128.         item.next = item;   
  129.         this.current = item;   
  130.     }else {   
  131.         item.prev = this.current.prev;   
  132.         item.prev.next = item;   
  133.         item.next = this.current;   
  134.         this.current.prev = item;  
  135.     }   
  136. };   
  137. Map.prototype.unlink = function(item) {   
  138.     if(this._size == 0){   
  139.         this.current = undefined;  
  140.     }else {   
  141.         item.prev.next = item.next;   
  142.         item.next.prev = item.prev;   
  143.         if(item === this.current){  
  144.             this.current = item.next;   
  145.         }   
  146.     }   
  147. };   
  148. /** 
  149.  * get next one 
  150.  * @return 
  151.  */  
  152. Map.prototype.next = function() {   
  153.     this.current = this.current.next;   
  154.     return this;  
  155. };   
  156. /** 
  157.  * get the key 
  158.  * @return 
  159.  */  
  160. Map.prototype.key = function() {   
  161.     return this.current.key;   
  162. };   
  163. /** 
  164.  *get the value 
  165.  * @return 
  166.  */  
  167. Map.prototype.value = function() {   
  168.     return this.current.value;   
  169. };  



 

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

技术分享

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);
}

 

不贴图了，慢慢试吧

二次封装dojo slider


联系
我们