二次封装dojo slider

Posted 2020-08-28 疯子加天才

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了二次封装dojo slider相关的知识，希望对你有一定的参考价值。

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

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

[javascript] view plain copy

/**
* yilei
* custom dojo slider
* Note:>>!! sliderType got 2 type there are "HorizontalSlider" and "VerticalSlider", they use same setting.
* The Top setting will became Left setting and the Buttom setting will became Right setting
* when the sliderType set to "VerticalSlider"
---------------------------------------------------
* For example:
* The topLabels array is setting to display the top Graduation for "HorizontalSlider", it is setting to dispay the
* left Graduation for "VerticalSlider" also.
-----------------------------------------------------
* This slider not suport image label for "VerticalSlider" now.....
*custom obj example::
*10 5 4 53 50
*
* { [id: 1, label:10],
* [id:2, label: 5],
* [id:3, label: 4],.....
* }
* need map.js suport
*/
dojo.declare("mapComponent.MyCustomSlider",null,{
minimum:null,
maximum:null,
stepIncrement:1, //PANI
customSliderArray: null, //[]
divId:"",
intermediateChanges:true,
showButtons:true,//only for VerticalSlider or CustomSliderV
sliderClass:"",
replaceFlag:"#",
sliderName:"temp",
sliderId:"tempId",
SliderCssClass: "ies-Slider",
labelImageCssClass:"sliderLabelImage",
sliderType:"HorizontalSlider",
/********HorizontalSlider and VerticalSlider and CustomSliderV and CustomSliderH**************/
showCustomTopLabel: true, //It is show custom label at left side on VerticalSlider
showTopLabel:false, //It is show label at left side on VerticalSlider
showBottomMark:false, //It is show Graduation at right side on VerticalSlider
showTopMark:false, //It is show Graduation at left side on VerticalSlider
showBottomLabel:true, //It is show label at right side on VerticalSlider
noOfTopLabels:3, //It is setting total labels number at left side on VerticalSlider
topLabels:null, //.....same to verticalslider
noOfLabels:3, // Old noOfBottomlabels
bottomlabels:null,
labelFooterFormat: "#",
labelTopFormat: "#",
customTopLabelCssClass:"sliderCustomTopLabel",
toplabelCssClass:"sliderTopLabel",
topMarkCssClass:"sliderTopMark",
bottomLabelCssClass:"sliderBottomLabel",
bottomMarkCssClass:"sliderBottomMark",
showTopImageLabel:false,
showBottomImageLabel:true,
showSingleTopImageLabel:true,
showSingleBottomImageLabel:true,
showPlayPause:true,
showPre:true,
showNext:true,
topImageLabels:["dropDownArrow_grey.png"],
bottomImageLabels:["dropDownArrow_grey.png"],
imageOnly:false,
sliderLoop:false,
thumbMovingRate:500,
/********HorizontalSlider and VerticalSlider**************/
onsliderChange:function(timeExtentObj){},
defaultValue:0,
increase:1,
self:null,
_totleStep:0,
_customType:null,
_sliderObj:null,
_intervalObj:null,
_playPauseButton:null,
_nextButton:null,
_preButton:null,
_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>",
/**********constructor function for init*************/
constructor:function(params){
dojo.mixin(this, params);
if((this.sliderType=="CustomSliderH" || this.sliderType=="CustomSliderV" )&&(this.customSliderArray && this.customSliderArray.length>0) )
{
if (this.showTopLabel == true)
{this.topLabels=[];}
if (this.showBottomLabel == true)
{this.bottomlabels=[];}
if (this.customSliderArray) {
if (this.customSliderArray.length > 0) {
this.minimum = 0;
this.maximum = this.customSliderArray.length-1;
}
}
// Setting Labels
console.log("this.maximum - " + this.maximum);
console.log("this.minimum - " + this.minimum);
var val = this.minimum;
if (this.customSliderArray) {
var obj=this.customSliderArray[this.minimum];
val = obj.label;
}
if (this.showTopLabel == true)
{this.topLabels.push(val);}
if (this.showBottomLabel == true)
{this.bottomlabels.push(val);}
//var increment = parseInt(((this.maximum - this.minimum)+1) / (this.noOfLabels-2));
//var increment = parseInt((this.maximum - this.minimum-1) / (this.noOfLabels-2));
console.log((this.maximum - this.minimum) / (this.noOfLabels-1));
var increment = Math.round((this.maximum - this.minimum) / (this.noOfLabels-1));
console.log("increment - " + increment);
var firstNum=this.minimum;
var map=new Map();
for(var f=0;f<this.noOfLabels-2;f++)
{
firstNum=firstNum+increment;
map.put(firstNum,firstNum);
}
for(var t=1;t<this.customSliderArray.length-1;t++)
{
var temp=map.get(t);
if(temp)
{
if (this.showTopLabel == true)
this.topLabels.push(this.customSliderArray[temp].label);
if (this.showBottomLabel == true)
this.bottomlabels.push(this.customSliderArray[temp].label);
map.remove(t);
}
else
{
if (this.showTopLabel == true)
this.topLabels.push(null);
if (this.showBottomLabel == true)
this.bottomlabels.push(null);
}
}
map=null;
var val = this.maximum;
if (this.customSliderArray) {
var obj=this.customSliderArray[this.maximum];
val = obj.label;
}
if (this.showTopLabel == true)
this.topLabels.push(val);
if (this.showBottomLabel == true)
this.bottomlabels.push(val);
if(this.sliderType=="CustomSliderH")
{
this._customType="H";
}
else if(this.sliderType=="CustomSliderV")
{
this._customType="V";
}
}
if(this.defaultValue==0)this.defaultValue=this.minimum;
self=this;
_totleStep=(this.maximum-this.minimum+1)/this.increase;
this.sliderId=getUniqueId(this.sliderName);
//alert(this.customSliderArray.length);
},
createSlider:function(){
var self=this;
if(this.sliderType=="HorizontalSlider" || this._customType=="H")
{
require(["dojo/parser", "dijit/form/HorizontalSlider", "dijit/form/HorizontalRule", "dijit/form/HorizontalRuleLabels","dojo/dom-class","dijit/form/Button","dojo/dom-attr"],
function(parser,HorizontalSlider,HorizontalRule,HorizontalRuleLabels,domClass,Button,domAttr){
parser.parse();
try
{
// Destroy the div and then create
dojo.destroy(dojo.query("[id^="+self.sliderName+"]"));
// Create new Div and add to divSlidersContainer
//var sliderNode = dojo.byId(this.divId);
//alert(this.divId);
//domClass.add(dojo.byId(_self.divId),"ttt");
self._wrapString=self._wrapString.replace(/sliderId/g,self.sliderId);
//console.dir(self._wrapString);
dojo.place(self._wrapString,dojo.byId(self.divId));
dojo.addClass(dojo.byId(self.sliderId),self.SliderCssClass)
//domAttr.set(dojo.query(".esriTimeSlider")[0],"id",self.sliderId);
//dojo.query(".tsTmp");
new Button({
//label: "Click me!",
id:self.sliderId+"_playpauseButtonNodeID",
iconClass:"tsButton tsPlayButton",
showLabel:false,
style:{"margin-top":"-20px","display":"none"},
onClick: function(){
// Do something:
//self._playPauseButton.destory();
console.dir(self);
domAttr.set(this,"iconClass",self._intervalObj?"tsButton tsPlayButton":"tsButton tsPauseButton");
self.playPause();
}
}, self.sliderId+"_playpauseButtonNode").startup();
//self._playPauseButton = dijit.byId(self.sliderId+"_playpauseButtonNode");
new Button({
//label: "Click me!",
id:self.sliderId+"_preButtonNodeID",
iconClass:"tsButton tsPrevButton",
showLabel:false,
style:{"margin-top":"-20px","display":"none"},
onClick: function(){
// Do something:
//alert("ggg");
self.previous();
}
}, self.sliderId+"_preButtonNode").startup();
//self._preButton = dijit.byId(self.sliderId+"_preButtonNode");
new Button({
//label: "Click me!",
id:self.sliderId+"_nextButtonNodeID",
iconClass:"tsButton tsNextButton",
showLabel:false,
style:{"margin-top":"-20px","display":"none"},
onClick: function(){
// Do something:
//alert("hhhh");
console.dir(self);
self.next();
}
}, self.sliderId+"_nextButtonNode").startup();
//self._nextButton=dijit.byId(self.sliderId+"_nextButtonNode");
var sliderNode=dojo.create("div",null,dojo.query(".tsTmp",dojo.byId(self.sliderId))[0]);
//sliderNode.id=self.sliderId;
if(self.showTopLabel&&!self.showCustomTopLabel)
{
//alert("show Top");
var rulesNodeLabelsTop = dojo.create("div", null, sliderNode);
//_labelsPackage:function(noOfLabels,labelsArray,showImageLabel,showSingleImageLabel,imageLabelsArray,isTop)
var newtopLabels=self._labelsPackage(self.noOfTopLabels,self.topLabels,self.showTopImageLabel,self.showSingleTopImageLabel,self.topImageLabels,self.labelTopFormat,true);
var labelsHeight="1em";
if(self.showTopImageLabel)
labelsHeight="2em";
if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )
markCount=self.customSliderArray.length;
else
markCount=self.noOfTopLabels;
var sliderLabelsTop= new dijit.form.HorizontalRuleLabels(
{
container: "topDecoration",
count: markCount,
labels: newtopLabels,
style: "height:"+labelsHeight+";font-size:75%;color:gray;white-space: nowrap;",
//class:self.toplabelCssClass
},
rulesNodeLabelsTop);
domClass.add(rulesNodeLabelsTop, self.toplabelCssClass);
if(self.showTopMark)
{
var rulesNodeTop = dojo.create("div", null, sliderNode);
var sliderRuleTop= new dijit.form.HorizontalRule(
{
container: "topDecoration",
count: markCount,
style: "height:1em;font-size:75%;color:gray;",
//class:self.topMarkCssClass
},
rulesNodeTop);
domClass.add(rulesNodeTop, self.topMarkCssClass);
}
}
if(self.showBottomLabel)
{
if(self.showBottomMark)
{
var markCount=0;
//alert(self.sliderType);
//alert(self.customSliderArray.length);
if((self.sliderType=="CustomSliderH" || self.sliderType=="CustomSliderV" )&&(self.customSliderArray && self.customSliderArray.length>0) )
markCount=self.customSliderArray.length;
else
markCount=self.noOfLabels;
var rulesNodeBottom = dojo.create("div", null, sliderNode);
var sliderBottomRule= new dijit.form.HorizontalRule(
{
container: "bottomDecoration",
count: markCount,
style: "height:1em;font-size:75%;color:gray;",
//class:self.bottomMarkCssClass
},
rulesNodeBottom);
domClass.add(rulesNodeBottom, self.bottomMarkCssClass);
}
// sliderNode.appendChild(rulesNode);
var rulesNodeLabelsBottom = dojo.create("div", null, sliderNode);
//alert(self.bottomlabels.length);
var newBottomLabels=self._labelsPackage(self.noOfLabels,self.bottomlabels,self.showBottomImageLabel,self.showSingleBottomImageLabel,self.bottomImageLabels,self.labelFooterFormat,false);
//alert(self.bottomlabels.length);
&n
以上是关于二次封装dojo slider的主要内容，如果未能解决你的问题，请参考以下文章

转为前端工程师

iOS(Swift) 基于 Moya 的二次封装

axios 二次封装

010 selenium 二次封装

react axios的二次封装

easyspa angular二次封装框架介绍