码迷，mamicode.com
首页 > 其他好文 > 详细

二次封装dojo slider

时间：2017-01-21 09:57:40      阅读：221      评论：0      收藏：0      [点我收藏+]

标签：war   http   ecs   board   hang   ddc   type   false   sem   

上次的二次封装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==0)this.defaultValue=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=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=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=this._sliderObj.value;  
  571.         var increaseValue=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=this._sliderObj.value;  
  586.         var preValue=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=this._formatLabels(this.minimum,format);  
  608.                         firstValue=this.imageOnly?"":firstValue;  
  609.                         if(isTop)  
  610.                         firstValue=firstValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=‘"+imageLabelsArray[0]+"‘/></div>";  
  611.                         else  
  612.                         firstValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=‘"+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=this._formatLabels(firstNum,format);  
  621.                             arryValue=this.imageOnly?"":arryValue;  
  622.                             if(isTop)  
  623.                             arryValue=arryValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘  src=‘"+imageLabelsArray[0]+"‘/></div>";  
  624.                             else  
  625.                             arryValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=‘"+imageLabelsArray[0]+"‘/></div>"+arryValue;  
  626.                             //labelsArray  
  627.                             newArray.push(arryValue);  
  628.                         }  
  629.                         var lastValue=this._formatLabels(this.maximum,format);  
  630.                         lastValue=this.imageOnly?"":lastValue;  
  631.                         if(isTop)  
  632.                         lastValue=lastValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘  src=‘"+imageLabelsArray[0]+"‘/></div>";  
  633.                         else  
  634.                         lastValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘  src=‘"+imageLabelsArray[0]+"‘/></div>"+lastValue;  
  635.                         //labelsArray  
  636.                         newArray.push(lastValue);  
  637.                     }  
  638.                     else  
  639.                     {  
  640.                         var firstValue=this._formatLabels(this.minimum,format);  
  641.                         firstValue=this.imageOnly?"":firstValue;  
  642.                         if(isTop)  
  643.                         firstValue=firstValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=‘"+imageLabelsArray[0]+"‘/></div>";  
  644.                         else  
  645.                         firstValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=‘"+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=this._formatLabels(firstNum,format);  
  655.                             arryValue=this.imageOnly?"":arryValue;  
  656.                             if(isTop)  
  657.                             arryValue=arryValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=‘"+imageLabelsArray[i]+"‘/></div>";  
  658.                             else  
  659.                             arryValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+i+"‘ src=‘"+imageLabelsArray[i]+"‘/></div>"+arryValue;  
  660.                             //labelsArray  
  661.                             newArray.push(arryValue);  
  662.                         }  
  663.                         var lastValue=this._formatLabels(this.maximum,format);  
  664.                         lastValue=this.imageOnly?"":lastValue;  
  665.                         if(isTop)  
  666.                         lastValue=lastValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘   src=‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>";  
  667.                         else  
  668.                         lastValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+indexImagcss+"‘ src=‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>"+lastValue;  
  669.                         //lastValue=lastValue+"<div><img src=‘"+imageLabelsArray[imageLabelsArray.length-1]+"‘/></div>"  
  670.                         //labelsArray  
  671.                         newArray.push(lastValue);  
  672.                     }  
  673.                 }  
  674.                 else  
  675.                 {  
  676.       
  677.                     var firstValue=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=this._formatLabels(firstNum,format);                    
  687.                         //labelsArray  
  688.                         newArray.push(arryValue);  
  689.                     }  
  690.                     var lastValue=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=this._formatLabels(labelsArray[i],format);  
  708.                                 labelValue=this.imageOnly?"":labelValue;  
  709.                                 if(isTop)  
  710.                                 labelValue=labelValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=‘"+imageLabelsArray[0]+"‘/></div>";  
  711.                                 else  
  712.                                 labelValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=‘"+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=this._formatLabels(labelsArray[i],format);  
  729.                                 labelValue=this.imageOnly?"":labelValue;  
  730.                                 if(isTop)  
  731.                                 labelValue=labelValue+"<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘ src=‘"+imageLabelsArray[i]+"‘/></div>";  
  732.                                 else  
  733.                                 labelValue="<div><img class=‘"+labelImageCssClass+" "+labelImageCssClass+"0‘  src=‘"+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=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://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">  
  5.   
  6. <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">  
  7. <script>dojoConfig = {parseOnLoad: true}</script>  
  8.             <script src="http://dojotoolkit.org/reference-guide/1.10/_static/js/dojo/dojo.js"></script>  
  9.             <script src="MyCustomSlider.js"></script>  
  10.             <script src="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="test" onclick="newslider()"/>  
  53. <input type="button" value="test destroy" onclick="destroy()"/>  
  54. <input type="button" value="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

标签：war   http   ecs   board   hang   ddc   type   false   sem   

原文地址：http://www.cnblogs.com/love540376/p/6336479.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！