Question

我正在编写一个带左右按钮的简单Range Slider插件。

我正在使用jQuery ui滑块。

所以在幻灯片或点击时我想调用插件中的外部函数。

插件代码：

(function($) {
    $.fn.rangeSliders = function(customText){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               calculate(ui.value);
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            //calculate(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            calculate(s.slider('value'));
        });
    }
}(jQuery));

在我的HTML中使用插件

<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders();

我收到错误消息称计算未定义。

你能不能给我一个很好的方法来获取这个值或者在插件中调用外部函数。

Answer 1

您可以为插件添加新参数：

(function($) {
    $.fn.rangeSliders = function(customText, myCalc){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               if($.isFunction(myCalc))
                   myCalc(s.slider('value'));
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
        });
    }
}(jQuery));

现在您可以像这样更改您的页面：

<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders(undefined, calculate);

请注意，我将undefined作为customText的第一个参数传递，因此它仍在处理，就像您将其称为$('$slider1').rangeSliders();一样，但仍然让您有机会输入自定义文本。 calculate函数作为第二个参数传递。请注意仅使用NAME传递它，不要在末尾添加（）。

在jQuery插件中调用外部函数

1 个答案: