二次封装dojo slider

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

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

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

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

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

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. Map.prototype.hash.current = 0;
67. /**
68. * get Value from key
69. * @param key
70. * @return
71. */
72. Map.prototype.get = function(key) {
73. var item = this[this.hash(key)];
74. return item === undefined ? undefined : item.value;
75. };
76. /**
77. *put the value to map
78. * @param key
79. * @param value
80. * @return
81. */
82. Map.prototype.put = function(key, value) {
83. var hash = this.hash(key);
84. if(this[hash] === undefined) {
85. var item = { key : key, value : value };
86. this[hash] = item;
87. this.link(item);
88. ++this._size;
89. }else{
90. this[hash].value = value;
91. }
92. return this;
93. };
94. /**
95. * remove value from key
96. * @param key
97. * @return
98. */
99. Map.prototype.remove = function(key) {
100. var hash = this.hash(key);
101. var item = this[hash];
102. if(item !== undefined) {
103. --this._size;
104. this.unlink(item);
105. delete this[hash];
106. }
107. return this;
108. };
109. /**
110. * clear  ap
111. * @return
112. */
113. Map.prototype.clear = function() {
114. while(this._size){
115. this.remove(this.key());
116. }
117. return this;
118. };
119. /**
120. * proc map
121. * @param item
122. * @return
123. */
124. Map.prototype.link = function(item) {
125. if(this._size == 0) {
126. item.prev = item;
127. item.next = item;
128. this.current = item;
129. }else {
130. item.prev = this.current.prev;
131. item.prev.next = item;
132. item.next = this.current;
133. this.current.prev = item;
134. }
135. };
136. Map.prototype.unlink = function(item) {
137. if(this._size == 0){
138. this.current = undefined;
139. }else {
140. item.prev.next = item.next;
141. item.next.prev = item.prev;
142. if(item === this.current){
143. this.current = item.next;
144. }
145. }
146. };
147. /**
148. * get next one
149. * @return
150. */
151. Map.prototype.next = function() {
152. this.current = this.current.next;
153. return this;
154. };
155. /**
156. * get the key
157. * @return
158. */
159. Map.prototype.key = function() {
160. return this.current.key;
161. };
162. /**
163. *get the value
164. * @return
165. */
166. Map.prototype.value = function() {
167. return this.current.value;
168. };

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

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

不贴图了，慢慢试吧