上次的二次封装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);
}

不贴图了，慢慢试吧

最新文章

  1. MVC4做网站后台:栏目管理2、修改栏目
  2. android setDestinationInExternalPublicDir 下载到SD卡根目录
  3. Oracle11g的delayed failed logins特性引起的性能问题
  4. 预定义宏__GNUC__和_MSC_VER
  5. js上三行下三行和添加多个附件
  6. html5定位并在百度地图上显示
  7. Ubuntu 出现 apt-get问题的解决方法
  8. 文件读写操作（含SDCard的读写）
  9. poj 2155
  10. 仿jQuery之链式调用
  11. Bootstrap登录样式
  12. Confluence安装部署
  13. 【转载】红外遥控HS0038B接法
  14. office web apps搭建与解决方案
  15. Mybatis(三) 映射文件详解
  16. 【转载】linux ls -l命令详解
  17. Java数组超出范围时如何处理多个异常？
  18. 【Ubuntu】boot空间不足
  19. Eclipse之NDK编译-- Type &#39;jint&#39; could not be resolved, and JNIEnv, jclass错误解决办法
  20. Hibernate核心对象

热门文章

  1. [LeetCode] 260. Single Number III（位操作）
  2. PAT甲级【2019年9月考题】——A1164 DijkstraSequence【30】
  3. JavaScript LoopQueue
  4. [Python3] 022 面向对象 第二弹
  5. [功能集锦] 003 - 一键生成mysql数据字典/数据库速查表
  6. Spring学习(四)--面向切面的Spring
  7. [HDU 5293]Tree chain problem(树形dp+树链剖分)
  8. P2009 跑步
  9. Pandas案例--人口密度分析
  10. 7、numpy——广播