Question

所以我有一个在页面加载时运行的滑块脚本，这个滑块可以有很多选项，代码看起来像这样：

$( '.slider' ).each( function() {
     var $height = 100; // default
     var $width = 100; // default

     $( this ).slider( {
          height: $height,
          width: $width
     } );
} );

因此，如果我希望该选项能够允许用户传入自己的宽度和高度参数而不必重新运行脚本，那怎么办呢？所以基本上我想创建一个HOOK来使用用户传递的参数，否则使用默认值。

感谢您的光临。

Answer 1

$( '.slider' ).each( function() {
     var $height = prompt("Please enter the height:","Your Height");
     var $width = prompt("Please enter the width:","Your Width"); 

     $( this ).slider( {
          height: $height,
          width: $width
     } );
} );

或者，如果所有.slide元素都具有唯一的高度/宽度（这样可以避免在用户浏览器上弹出多个）

    var slideHeight=prompt("Please enter the height:","Your Height");
    var slideWidth=prompt("Please enter the Width:","Your Width");

  $( '.slider' ).each( function() {
     var $height = parseInt(slideHeight)>0?parseInt(slideHeight):100;
     var $width =parseInt(slideWidth)>0?parseInt(slideWidth):100;


     $( this ).slider( {
          height: $height,
          width: $width
     } );
} );

Answer 2

我建议将其构建为jQuery插件，因为它是一个UI小部件，你已经在使用jQuery了。 jQuery网站有一个关于如何制作插件的部分。本教程将向您展示如何设置插件以具有可通过传入可选参数来覆盖的默认值。

Answer 3

也许可以通过使用全局变量（slideropts对象）来完成，如

$( '.slider' ).each( function() {
     slideropts={height:100,width:100};

     $( this ).slider( slideropts );
} );

注意：var之前没有slideropts所以这个变量将具有全局范围，并且可以通过任何其他JS例程随时更改

slideropts.height=120;

所有未更改的选项都会保留旧值。

Answer 4

我假设“用户”是指您的脚本的重新使用者，而不是页面的访问者。一种方法是让他设置一个全局选项，用作默认选项。

var options = $.extend({}, {height: 100, width: 100}, $.slideroptions);
$('.slider').each(function() {
    $(this).slider(options);
});

如你所提到的，一个更复杂但更易于维护的选项是使用触发器。

var event = new $.Event('slider.init');
event.options = {height: 100, width: 100};
$(window).trigger(event);
$('.slider').each(function() {
    $(this).slider(event.options);
});

然后，用户可以在事件处理程序中覆盖：

$(window).on('slider.init', function(event) {
    event.options.height = 90;
});

或者，您可以根据每个滑块做出决定：

$('.slider').each(function() {
    var event = new $.Event('slider.init');
    event.options = {height: 100, width: 100};
    $(this).trigger(event);
    $(this).slider(event.options);
});

$(window).on('slider.init', function(event) {
    if ($(this).is('.long-slider') {
        event.options.height = 90;
    }
});

如何将用户参数传递给要运行的JS脚本？

4 个答案: