关于同一个页面初始化两个AUIRange的问题

    var questionrange = new auiRange({
        element: document.getElementById("questionrange")
    }, function(ret) {});
    var answerrange = new auiRange({
        element: document.getElementById("answerrange")
    }, function(ret) {});
 
检查aui-range的源代码,发现第二个new auiRange将直接取代第一个auiRange中的distance,offsetLeft,tooltipWidth等,导致浮标不正常的移动。
 
*
 * AUI JAVASCRIPT PLUGIN
 * 滑动 aui-range
 * Copyright (c) 2015 auicss.com @流浪男  QQ:343757327  群:344869952
 */
 (function( window, undefined ) {
    "use strict";
    var auiRange = function(params,callback) {
        this._init(params,callback);
    };
    var time=null;
    var distance,offsetLeft,tooltipWidth;
    auiRange.prototype = {
    .....
 
特别想问,同一个页面,如何初始化两个aui-range?
 
图标移位.png
已邀请:

inianyu

赞同来自:

读了读源代码,将aui-range.js改写了一下,调整部分见加粗部分,希望对各位有帮助。
 
 
/*
 * AUI JAVASCRIPT PLUGIN
 * 滑动 aui-range
 * Copyright (c) 2015 auicss.com @流浪男  QQ:343757327  群:344869952
 */
 (function( window, undefined ) {
    "use strict";
    var auiRange = function(params,callback) {
        this._init(params,callback);
    };
    var time=null;


    /*定义移动至函数内部,不声明为public的变量,避免多个range初始化会冲突的问题
    var distance,offsetLeft,tooltipWidth;
    */


    auiRange.prototype = {
        _init: function(params,callback) {



            /*定义移动至函数内部,并重新计算*/
            var distance,offsetLeft,tooltipWidth;



            var self = this;
            distance = Math.abs(params.element.max - params.element.min);
            offsetLeft = params.element.offsetLeft;
            tooltipWidth = params.element.offsetWidth - 28;
            params.element.insertAdjacentHTML('afterend','<div class="aui-range-tip aui-hide">'+params.element.value+'</div>');
            var scaleWidth = (tooltipWidth / distance) * Math.abs(params.element.value - params.element.min);
            params.element.nextSibling.style.left = (offsetLeft + scaleWidth - 11)+'px';
            params.element.addEventListener("input",function(){
                self._showTip(params.element,callback);
            });
            params.element.addEventListener("touchmove",function(){
                self._showTip(params.element,callback);
            });
            params.element.addEventListener("touchend",function(){
                self._hideTip(params.element);
            });
        },
        _showTip: function(el,callback){


            /*定义移动至函数内部,并重新计算*/
            var distance,offsetLeft,tooltipWidth;
            distance = Math.abs(el.max - el.min);
            offsetLeft = el.offsetLeft;
            tooltipWidth = el.offsetWidth - 28;



            el.nextSibling.classList.remove("aui-hide");
            var scaleWidth = (tooltipWidth / distance) * Math.abs(el.value - el.min);
            console.log("tooltipWidth:"+tooltipWidth);
            console.log("distance:"+distance);
            console.log("scaleWidth:"+scaleWidth);
            el.nextSibling.style.left = (offsetLeft + scaleWidth - 11)+'px';
            console.log("el.nextSibling.style.left:"+el.nextSibling.style.left);
            el.nextSibling.innerText = el.value;
            callback({
                value:el.value
            });
        },
        _hideTip : function(el){
            if (time) {
                clearTimeout(time);
            }
            time = setTimeout(function() {
                el.nextSibling.classList.add("aui-hide");
            }, 1500);
        }
    }
    window.auiRange = auiRange;
})(window);
 

要回复问题请先登录注册