arcgis的timeslider是对dojo slider二次封装，
项目需要，所有Map用统一样式的slider，所以写了一个common的dojo class，统一调用生成slider，作为对timeslider再次封装，感觉挺好用。

这个slider不一定要在Map里使用，还可以在其他地方调用。只是要包含arcgis的js包,

先上JavaScript class的code:

  1. /**
  2. * yilei create for IES  timeslider
  3. *
  4. */
  5. //dojo.provide("mapSlider.MyTimeslider");
  6. dojo.declare("mapSlider.MyTimeSlider",null,{
  7. map: null,
  8. startDate:null,
  9. endDate:null,
  10. divId:"myTimeSlider",
  11. timeUnit:"esriTimeUnitsHours",
  12. labelImg:"",
  13. // Can set the Array of custom Label, if not set will display the labels
  14. labels:[],
  15. labelFooterDateFormat: "dd MMM yyyy HH:mm",
  16. labelTopDateFormat: "dd MMM yyyy HH:mm",
  17. timeExtent:null,
  18. //width:500,
  19. timeSliderCssClass: "timeSlider",
  20. topLabelCssClass:"sliderTopLabel",
  21. // -1, Unlimited, otherwise specific values
  22. noOfLabels: 3,
  23. timesliderType:"temp",
  24. sliderId:"tempId",
  25. showTopLabel: true,
  26. showPlayPauseBtn:true,
  27. showPreviousNextBtn:true,
  28. timeSlider:null,
  29. onsliderChange:function(timeExtentObj){},
  30. defaultIndex:0,
  31. _self:null,
  32. _unitTimeArray:{
  33. "esriTimeUnitsYears":0,
  34. "esriTimeUnitsMonths":0,
  35. "esriTimeUnitsWeeks":0,
  36. "esriTimeUnitsDays":1000 * 3600 * 24,
  37. "esriTimeUnitsHours":1000 * 3600,
  38. "esriTimeUnitsMinutes":1000 * 60,
  39. "esriTimeUnitsSeconds":1000,
  40. "esriTimeUnitsMilliseconds":0
  41. },
  42. /**********constructor function for init*************/
  43. constructor:function(params){
  44. dojo.mixin(this, params);
  45. _self=this;
  46. this.timeExtent=new esri.TimeExtent();
  47. //_self._startDate=params.startDate;
  48. //_self._endDate=params.endDate;
  49. //_self._divName=params.divName;
  50. //_self._timeUnit=params.timeUnit;
  51. this.sliderId=getUniqueId(this.timesliderType);
  52. //params.timeUnit?_self._timeUnit=params.timeUnit:"";
  53. //params.width?_self._width=params.width:"";
  54. },
  55. createSlider:function(){
  56. try
  57. {
  58. // Destroy the div and then create
  59. //dojo.query("[id^="+this.timesliderType+"]")[0].destroy();
  60. // Create new Div and add to divSlidersContainer
  61. var tsDiv = dojo.create("div", null, dojo.byId(this.divId));
  62. //alert(this._width);
  63. this.timeSlider = new esri.dijit.TimeSlider({
  64. //style: "width: "+this.width+"px;",
  65. class:this.timeSliderCssClass,
  66. id: this.sliderId,
  67. options: {
  68. excludeDataAtLeadingThumb: true
  69. }
  70. },tsDiv);
  71. this.timeExtent.startTime = this.startDate;
  72. this.timeExtent.endTime = this.endDate;
  73. if (this.labels.length == 0) {
  74. this.labels.push(this.startDate.Format(this.labelFooterDateFormat));
  75. var balLabels = this.noOfLabels-1;
  76. var diff = this.endDate.getTime() - this.startDate.getTime();
  77. var increment = diff/balLabels;
  78. var firstTime = this.startDate.getTime();
  79. for (var i=1; i<this.noOfLabels-1; i++) {
  80. firstTime = firstTime + increment;
  81. this.labels.push((new Date(firstTime)).Format(this.labelFooterDateFormat));
  82. }
  83. this.labels.push(this.endDate.Format(this.labelFooterDateFormat));
  84. }
  85. this.timeSlider.setLabels(this.labels);
  86. this.timeSlider.setThumbCount(1);
  87. this.timeSlider.setThumbIndexes([this.defaultIndex]);
  88. this.timeSlider.setLoop(false);
  89. this.timeSlider.singleThumbAsTimeInstant(true);
  90. this.timeSlider.createTimeStopsByTimeInterval(this.timeExtent,1,this.timeUnit);
  91. if(!this.showPlayPauseBtn)this.timeSlider.playPauseBtn.destroy();
  92. if(!this.showPreviousNextBtn){this.timeSlider.previousBtn.destroy();this.timeSlider.nextBtn.destroy();}
  93. this.timeSlider.startup();
  94. //alert(this.endDate.Format(this.labelFooterDateFormat));
  95. var defaultBegainTime=this.timeSlider.getCurrentTimeExtent().startTime.Format(this.labelTopDateFormat);
  96. if (this.showTopLabel == true) {
  97. dojo.create("span", {id: this.sliderId+"_sp_topLabel",class:this.topLabelCssClass, innerHTML: defaultBegainTime}, dojo.query(".dijitSliderMoveable")[0]);
  98. }
  99. dojo.connect(this.timeSlider, "onTimeExtentChange",function(evt){
  100. //console.dir(evt);
  101. if (_self.showTopLabel == true) {
  102. var topLabelDisplay= evt.startTime.Format(_self.labelTopDateFormat);
  103. //alert(topLabelDisplay);
  104. dojo.byId(_self.sliderId+"_sp_topLabel").innerHTML = topLabelDisplay;
  105. }
  106. _self.onsliderChange(evt);
  107. });
  108. return this.timeSlider;
  109. }
  110. catch(e){console.dir(e);return null;}
  111. },
  112. _testsub:function(){
  113. console.dir(_self);
  114. alert(this.topLabelCssClass);
  115. }
  116. });

把上面的code存到一个文件名为MyTimeslider.js的文件中
使用slider只需要调用这个class

  1. <script src="MyTimeslider.js"></script>

divId是网页中要展示slider的位置上的<div> 的ID.

下面给出做test的HTML。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  6. <title>Hurricane Explorer</title>
  7. <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  8. <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  9. <style>
  10. html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
  11. body {
  12. background-color:#EFEFDE;
  13. overflow:hidden;
  14. font-family: "Trebuchet MS";
  15. }
  16. .pane {
  17. border: solid 1px #9CAA9C;
  18. margin: 5px;
  19. padding: 5px;
  20. }
  21. #header {
  22. background-color:#EFEFDE;
  23. color:#9CAA9C;
  24. font-size:16pt;
  25. text-align:left;
  26. font-weight:bold;
  27. padding-top:10px; padding-bottom:10px; padding-left:10px; padding-right: 10px;
  28. margin-top:0px; margin-bottom:0px;
  29. }
  30. #banner {
  31. height:40px; width:100%;
  32. }
  33. .dijitRuleMark {
  34. height: 0px;
  35. }
  36. .dijitRuleLabelH {
  37. background: url('./dropDownArrow_grey.png') 50% 0% no-repeat;
  38. height: 50px;
  39. padding-top: 15px;
  40. white-space: nowrap;
  41. }
  42. .sliderTopLabel2 {
  43. position: absolute;
  44. top: -22px;
  45. color: red;
  46. font: 11px Arial bold;
  47. white-space: nowrap;
  48. }
  49. .timeSlider
  50. {
  51. width:1000px;
  52. padding-top:30px;
  53. }
  54. </style>
  55. <script>var dojoConfig = { parseOnLoad: true };</script>
  56. <script src="http://js.arcgis.com/3.13/"></script>
  57. <script src="dateTimeFormat.js"></script>
  58. <script>
  59. dojo.require("esri.dijit.TimeSlider");
  60. </script>
  61. <script src="MyTimeslider.js"></script>
  62. <script>
  63. function getUniqueId (prefix) {
  64. var uniqueId = (new Date()).getTime();
  65. return (prefix || 'id') + (uniqueId++);
  66. }
  67. function init() {
  68. var t=new mapSlider.MyTimeSlider({
  69. startDate:new Date(2013, 0, 1 ,00,00,00),
  70. endDate:new Date(2013, 0, 4,00,00,00),
  71. divId:"timeSliderDiv",
  72. timeUnit:"esriTimeUnitsHours",
  73. topLabelCssClass:"sliderTopLabel2",
  74. timeSliderCssClass:"timeSlider",
  75. //width:1000,
  76. noOfLabels:4,
  77. timesliderType:"yileitest_",
  78. onsliderChange:function(obj){console.dir(obj);},
  79. showPlayPauseBtn:true,
  80. showPreviousNextBtn:true,
  81. labelTopDateFormat:"HH:mm",
  82. defaultIndex:48,
  83. showTopLabel:true
  84. });
  85. t.createSlider();
  86. }
  87. dojo.ready(init);
  88. </script>
  89. <body  class="claro">
  90. <div id="timeSliderDiv"></div>
  91. </body>
  92. </html>

css中的一个图片文件dropDownArrow_grey.png是slider中向下箭头的图片，可以换成你喜欢的图片。

  1. 其中还有用到一个名为dateTimeFormat.js的文件，该文件是extend一个option给JavaScript的date object，增加了一个Format的option，

有了它，我们的slider的date format就简单很多了，

下面给出dateTimeFormat.js的code::

  1. /****************date format******************/
  2. Date.prototype.Format = function(mask) {
  3. var d = this;
  4. var zeroize = function (value, length) {
  5. if (!length) length = 2;
  6. value = String(value);
  7. for (var i = 0, zeros = ''; i < (length - value.length); i++) {
  8. zeros += '0';
  9. }
  10. return zeros + value;
  11. };
  12. return mask.replace(/"[^"]*"|'[^']*'|\b(?:d{1,4}|M{1,4}|yy(?:yy)?|([hHmstT])\1?|[lLZ])\b/g, function($0) {
  13. switch($0) {
  14. case 'd':   return d.getDate();
  15. case 'dd':  return zeroize(d.getDate());
  16. case 'ddd': return ['Sun','Mon','Tue','Wed','Thr','Fri','Sat'][d.getDay()];
  17. case 'dddd':    return ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][d.getDay()];
  18. case 'M':   return d.getMonth() + 1;
  19. case 'MM':  return zeroize(d.getMonth() + 1);
  20. case 'MMM': return ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
  21. case 'MMMM':    return ['January','February','March','April','May','June','July','August','September','October','November','December'][d.getMonth()];
  22. case 'yy':  return String(d.getFullYear()).substr(2);
  23. case 'yyyy':    return d.getFullYear();
  24. case 'h':   return d.getHours() % 12 || 12;
  25. case 'hh':  return zeroize(d.getHours() % 12 || 12);
  26. case 'H':   return d.getHours();
  27. case 'HH':  return zeroize(d.getHours());
  28. case 'm':   return d.getMinutes();
  29. case 'mm':  return zeroize(d.getMinutes());
  30. case 's':   return d.getSeconds();
  31. case 'ss':  return zeroize(d.getSeconds());
  32. case 'l':   return zeroize(d.getMilliseconds(), 3);
  33. case 'L':   var m = d.getMilliseconds();
  34. if (m > 99) m = Math.round(m / 10);
  35. return zeroize(m);
  36. case 'tt':  return d.getHours() < 12 ? 'am' : 'pm';
  37. case 'TT':  return d.getHours() < 12 ? 'AM' : 'PM';
  38. case 'Z':   return d.toUTCString().match(/[A-Z]+$/);
  39. // Return quoted strings with the surrounding quotes removed
  40. default:    return $0.substr(1, $0.length - 2);
  41. }
  42. });
  43. };

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

最新文章

  1. 关于WEB 性能优化 （摘抄）
  2. Atitit 贝叶斯算法的原理以及垃圾邮件分类的原理
  3. Snabbt.js – 极简的 JavaScript 动画库
  4. ie6兼容之绝对定位元素内容为空时高度问题
  5. Android GridView的使用
  6. jsp中普通按钮如何提交表单
  7. 为什么要Cssreset
  8. js方法调用
  9. Hdu1401-Solitaire(双向bfs)
  10. 【转载】FaceBook - How to add a Privacy Policy to your Apps？
  11. oracle server config
  12. JavaWeb项目架构之NFS文件服务器
  13. Android项目实战（四十九）：Andoird 7.0+相机适配
  14. Django标签&amp;迭代&amp;循环&amp;过滤
  15. VS2013软件的安装和单元测试
  16. 201621123001《Java程序设计》第1周学习总结
  17. ios中xib文件的用法
  18. httpModules 不起作用 modules 不起作用 血泪经验
  19. tomcat运行springboot项目war包
  20. volatile关键字是什么意思

热门文章

  1. Python笔记(二十一)_内置函数、内置方法
  2. Python笔记(十九)_继承
  3. 【ABAP系列】SAP ABAP 工单增强
  4. [BZOJ2138]stone(Hall定理，线段树)
  5. 字符串类——KMP算法的应用
  6. python-MySQL数据库--- 基础篇
  7. 故事版(storyBoard)-lllegal configuration connection cannot have a prototype objct as
  8. DevExpress 控件中设置分隔符
  9. vue项目一个页面使用多个轮播图详解
  10. Git--01 基础 - 远程仓库的使用