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

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

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

因此，如果我希望该选项能够允许用户在不必重新运行脚本的情况下传递他们自己的宽度和高度参数，那该怎么做呢？因此，基本上我想创建一个HOOK来使用用户传递的参数（如果有的话），否则使用默认值。

谢谢你的光临。

$( '.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
     } );
} );

或者，如果所有幻灯片元素都有唯一的高度/宽度（这样可以避免用户浏览器上出现多个弹出窗口）

    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
     } );
} );

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

也许可以通过使用全局变量（slideropts对象）（如）来实现

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

注意：在slideropts之前没有var，因此该变量将具有全局作用域，并且可以通过执行类似的操作随时由任何其他JS例程进行更改

slideropts.height=120;

所有未更改的选项都将保持其旧值。

我假设"user"指的是脚本的重用者，而不是页面的访问者。一种方法是让他设置一个全局选项，作为默认选项。

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;
    }
});

相关内容

最新更新

热门标签：