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

Question

So I have this slider script that runs on page load and this slider can take many options and the code looks something like this:

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

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

So if I wanted the option to be able to allow users to pass in their own arguments for width and height WITHOUT having to rerun the script, how can that be done? So basically I want to create a HOOK to use the user passed arguments if any otherwise use default.

Thanks for looking.

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

Or if all .slide elements have unique height/width (this avoid multiple pop up on the user browser)

    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

I would recommend building this as a jQuery plugin since it's a UI widget and you're already using jQuery. The jQuery website has a section on how to make plugins. The tutorial will show you how to set up your plugin to have default values which can be overridden by passing in optional params.

Answer 3

Maybe that can be done by using a global variable (the slideropts object) like

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

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

Note: there is no var before the slideropts so this variable will have global scope and can be changed at any time by any other JS routine by doing something like

slideropts.height=120;

All unchanged options will simply keep their old values.

Answer 4

I am assuming by "user" you mean the reuser of your script, not the visitor of the page. One way is to let him set a global option which is used as default.

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

A somewhat more complicated but more maintainable option is to use a trigger, as you mentioned.

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

The user can then override in an event handler:

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

Alternatively, you can make the decision per-slider:

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