二次封装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. 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：：

[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. <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::

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

不贴图了，慢慢试吧

时间： 2024-10-06 21:55:52

二次封装dojo slider的相关文章

二次封装arcgis的timeslider

arcgis的timeslider是对dojo slider二次封装,项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对timeslider再次封装,感觉挺好用. 这个slider不一定要在Map里使用,还可以在其他地方调用.只是要包含arcgis的js包, 先上JavaScript class的code: [javascript] view plain copy /** * yilei create for IES  

iOS项目相关@AFN&amp;SDWeb的二次封装

一,AFNetworking跟SDWebImge是功能强大且常用的第三方,然而在实际应用中需要封装用来复用今天就跟大家分享一下AFN&SDWeb的二次封装 1. HttpClient.h及.m .h定义了HTTP常用的四种GET POST PUT DELETE 请求 一般分别用做增删减查 定义前预处理,请求成功处理,请求失败处理的block 及带多参数w的方法声明 .m设置请求类型跟响应类型,监听网络是否有网络,如果没有,弹出网络异常的警示框 2. UIImageView+WebCache.h及

HtmlTestRunner二次封装(TestRunner.py)

将HtmlTestRunner进行二次封装,是报告生成的更方便 import HTMLTestRunner import unittest import time, os class TestRunner(object): def __init__(self, cases="./"): self.case = cases def get_all_cases(self, class_name): return unittest.defaultTestLoader.loadTestsFro

pywinauto二次封装（pywinnat.py）

将pywinauto常用方法进行封装,使得pywinauto用起来更简单 #头文件的引入 from pywinauto import application from pywinauto import clipboard import SendKeys import win32api import win32con import os, sys, time #二次封装的类 class Pywin(object): #======================= # pywin framwork

毕加索的艺术——Picasso,一个强大的Android图片下载缓存库，OkHttpUtils的使用，二次封装PicassoUtils实现微信精选

毕加索的艺术--Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选 官网: http://square.github.io/picasso/ 我们在上篇OkHttp的时候说过这个Picasso,学名毕加索,是Square公司开源的一个Android图形缓存库,而且使用起来也是非常的简单,只要一行代码就轻松搞定了,你会问,为什么不介绍一下Glide?其实Glide我有时间也是会介绍的,刚好上篇我们用到了Picasso,

加密狗复制备份 克隆 破解 OEM信息 二次封装 行业软件破解 批发零售

加密狗复制备份 加密狗模拟   加密狗破解  定制写狗程序 算法注册机 OEM信息 二次封装 汉化  行业软件破解   酒店客房管理  餐饮娱乐 美容美发  会员管理  口腔诊所 口腔医院管理 商超POS 服装鞋帽 家具生产数控 家具设计拆单 排料优化 家居设计销售 药店管理 汽配汽修汽贸4S店管理 财务进销存 OA办公 企业积分制管理 电脑行业管理系统 客户管理...等各行业管理软件批发零售 合作联系QQ:309889372 部分产品列表展示 部分产品分类展示: 服装设计类行业: 主要针对服装

也谈Volley的二次封装

产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectRequest已经导致Activity或Fragment层中耦合了大量的数据解析代码,同时当多处调用同一接口时,类似的数据解析代码还不可复用,导致大量重复代码的出现,已经让我越发地无法忍受.基于此,最近思考着对Volley原生的JSONObjectRequest(因为产品中目前和服务器交互所有的接口,

OkHttp框架从入门到放弃，解析图片使用Picasso裁剪，二次封装OkHttpUtils，Post提交表单数据

OkHttp框架从入门到放弃,解析图片使用Picasso裁剪,二次封装OkHttpUtils,Post提交表单数据 我们这片博文就来聊聊这个反响很不错的OkHttp了,标题是我恶搞的,本篇将着重详细的分析,探索OkHttp这个框架的使用和封装 一.追其原理 Android系统提供了两种HTTP通信类 HttpURLConnection HttpClient Google推荐使用HttpURLConnection,这个没必要多说,事实上,我这篇写的应该算是比较晚了,很多优秀的博文都已经提出了这些观

Android-Volley网络通信框架（二次封装数据请求和图片请求（包含处理请求队列和图片缓存））

1.回想 上篇 使用 Volley 的 JsonObjectRequest 和 ImageLoader 写了 电影列表的样例 2.重点 (1)封装Volley 内部 请求 类(请求队列,数据请求,图片请求,图片缓存) (2)封装 Response.Listener 和 Response.ErrorListener 回调函数 (3)用法 3.文件夹介绍 3.1 GsonRequset.java 自己定义Gson请求,直接将 Json字符串  实例化为 对象 3.2 VolleyApplicatio