0

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

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

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

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

感谢您的关注。

4

4 回答 4

0 
$( '.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
     } );
} );
于 2013-08-31T00:05:14.237 回答
0

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

于 2013-08-31T00:07:09.437 回答
0

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

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

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

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

slideropts.height=120;

所有未更改的选项将仅保留其旧值。

于 2013-08-31T09:30:45.190 回答
0

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

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;
    }
});
于 2013-08-31T10:09:24.357 回答