打开主菜单

艾尔洁泽

"; //将htmlString 转为DOM树 var SlideBarContainer = document.getElementById(data.id); SlideBarContainer.innerHTML = html; var SlideBarDiv = document.getElementById("lideBarDiv_" + data.id); var SlideBarLine = document.getElementById("SlideBarLine_" + data.id); var Slider = document.getElementById("SliderBlock_" + data.id); //记录Dom树 data.dom = {}; data.dom.SlideBarContainer = SlideBarContainer;//滑动条容器 data.dom.SlideBarDiv = SlideBarDiv;//滑动条DIV 用于容纳滑条 和 滑块 data.dom.SlideBarLine = SlideBarLine;//滑动条 data.dom.Slider = Slider;//滑动条 滑块 data.ifBool = false;//初始化是否按下滑块标记 为 false window.SliderBarUtilsData[data.id] = data;//注册该滑动条 //闭包 ( function(id){ if(window.SliderBarUtilsData[id] == null){//检查对象是否存在 return; } //注册鼠标按下和松开的事件 var start = function(e) { if(window.SliderBarUtilsData[id] != null){ e.stopPropagation(); window.SliderBarUtilsData[id].ifBool = true; } } var end = function(e) { if(window.SliderBarUtilsData[id] != null){ window.SliderBarUtilsData[id].ifBool = false; } } //鼠标按下方块 window.SliderBarUtilsData[id].dom.Slider.addEventListener("touchstart", start); window.SliderBarUtilsData[id].dom.Slider.addEventListener("mousedown", start); //鼠标松开 window.addEventListener("touchend", end); window.addEventListener("mouseup", end); //注册滑动事件 var move = function(e) { if(window.SliderBarUtilsData[id] == null){ return; }//如果对象不存在 var myData = window.SliderBarUtilsData[id];//滑动条数据集 var SlideBarLineId = myData.dom.SlideBarLine;//滑动条DOM //在按下的情况下 if(myData.ifBool) { if(!e.touches) { //兼容移动端 var x = e.clientX; } else { //兼容PC端 var x = e.touches[0].pageX; } //获取元素的绝对位置 function getPosition(node) { var left = node.offsetLeft; //获取元素相对于其父元素的left值var left var top = node.offsetTop; current = node.offsetParent; // 取得元素的offsetParent while(current != null) {// 一直循环直到根元素 left += current.offsetLeft; top += current.offsetTop; current = current.offsetParent; } return {"left": left,"top": top}; } //计算滑块位置 var lineDiv_left = getPosition(SlideBarLineId).left; //长线条的横坐标 var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值 if(minDiv_left >= SlideBarLineId.offsetWidth - 15) { minDiv_left = SlideBarLineId.offsetWidth - 15; } if(minDiv_left 1){//有value的情况下 按value的长度滑动 var halfWidth = (SlideBarLineId.offsetWidth - 15) / (myData.value.length - 1) / 2;//滑动过一半就进一 index = parseInt(((minDiv_left + halfWidth ) / (SlideBarLineId.offsetWidth - 15) ) * (myData.value.length - 1));//计算第几个 percentageInt = parseFloat(index / (myData.value.length - 1) * 100).toFixed(2);//计算半分比 }else if(myData.value != null && myData.value.length == 1){//如果只有一个参数 index = 0;//默认为唯一的那个 percentageInt = 100.0;//进度为100% }else{//没有参数则只计算半分比 percentageInt = parseFloat((minDiv_left / (SlideBarLineId.offsetWidth - 15)) * 100).toFixed(2);//百分比 } myData.index = index;//记录选择了第几个 if(myData.onSlide != null){//是否有回调 var onSlideData = myData.onSlide(index != null ? myData.value[index]:null,percentageInt,myData);//执行回调 获取回调返回值 //如果返回false 则不更新滑动条 if(onSlideData == null || ((typeof onSlideData=='boolean') && onSlideData.constructor==Boolean && onSlideData)){ if(myData.dom.Slider != null){//设置拖动后小方块的left值 myData.dom.Slider.style.left = "calc("+percentageInt+"% - 7px)"; } if(myData.dom.SlideBarLine != null){//设置拖动后小方块的left值 myData.dom.SlideBarLine.style.backgroundImage = "repeating-linear-gradient(90deg,#c99336 0%, #c99336 "+percentageInt+"% , #e3dcd1 "+percentageInt+"% , #e3dcd1 100%)"; } } }else{ if(myData.dom.Slider != null){//设置拖动后小方块的left值 myData.dom.Slider.style.left = "calc("+percentageInt+"% - 7px)"; } if(myData.dom.SlideBarLine != null){//设置拖动后小方块的left值 myData.dom.SlideBarLine.style.backgroundImage = "repeating-linear-gradient(90deg,#c99336 0%, #c99336 "+percentageInt+"% , #e3dcd1 "+percentageInt+"% , #e3dcd1 100%)"; } } } } //注册拖动事件 window.addEventListener("touchmove", move); window.addEventListener("mousemove", move); } )(data.id); //计算初始值 var percentageInt = 0.0;//初始化滑块位置为0 if(data.index != null){//设定滑动条初始值 if(data.value != null && data.value.length > 1){//如果用户输入了value var index = parseInt(data.index);//格式化index if(isNaN(index)){ index = 0; }//非数字则为0 percentageInt = parseFloat(index / (data.value.length - 1) * 100).toFixed(2);//计算半分比 }else if(data.value != null && data.value.length == 1){ percentageInt = 100.0;//初始化滑块位置为0 }else{//未设置value 则认为index是滑动条半分比 var index = parseFloat(data.index).toFixed(2);//格式化index if(!isNaN(index)){ index = 0.0 }//非数字则为0 if(index > 100.0){ index = 100.0; }//大于100% 则为 100 percentageInt = index;//设置初始值 } } //设置初始值 if(data.dom.Slider != null){ //设置拖动后小方块的left值 data.dom.Slider.style.left = "calc("+percentageInt+"% - 7px)"; } if(data.dom.SlideBarLine != null){ //设置拖动后小方块的left值 data.dom.SlideBarLine.style.backgroundImage = "repeating-linear-gradient(90deg,#c99336 0%, #c99336 "+percentageInt+"% , #e3dcd1 "+percentageInt+"% , #e3dcd1 100%)"; } data.onSlide(index,percentageInt,data);//调用回调方法 }