zoukankan      html  css  js  c++  java

  • 二次封装dojo slider

    上次的二次封装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">    <table width="100%" cellspacing="0" cellpadding="0" border="0">    <tr>    <td align="right" valign="middle"><button id="sliderId_playpauseButtonNode" type="button">Play/Pause</button></td>    <td align="center" valign="middle" width="80%" class="tsTmp"></td>    <td align="left" valign="middle" width="30"><button id="sliderId_preButtonNode"  type="button">Previous</button></td>    <td align="left" valign="middle"><button id="sliderId_nextButtonNode"  type="button">Next</button></td>    </tr>        </table>    </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: "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: ""+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: "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: "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: "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.     500px;  
    31.     top:50px;  
    32. }  
    33.   
    34. #testSlider2 .ies-Slider{  
    35. position:relative;  
    36.     500px;  
    37.     top:100px;  
    38. }  
    39.   
    40. #testSlider .sliderButtomLabel{  
    41. color:red;  
    42. }  
    43. #testSlider .sliderLabelImage  
    44. {  
    45.     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);
    }

    不贴图了，慢慢试吧
  • 相关阅读:
    mac下安装oracle客户端
    Mac下安装tomcat
    eclipse上Git使用
    深拷贝1兼容多构造函数
    Oracle查询表大小，更新或查询太慢的时候
    Redis弱密码修改
    学习参考
    c#简单类型转换As<T>
    NPM相关
    java项目和npm项目命令窗口部署方便调试
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6336479.html
Copyright © 2011-2022 走看看