0

したがって、ページの読み込み時に実行されるこのスライダー スクリプトがあり、このスライダーは多くのオプションを取ることができ、コードは次のようになります。

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

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

では、ユーザーがスクリプトを再実行せずに幅と高さの独自の引数を渡せるようにするオプションが必要な場合は、どうすればよいでしょうか? したがって、基本的には、ユーザーが渡した引数を使用するための HOOK を作成したいと考えています。

ご覧いただきありがとうございます。

4

4 に答える 4

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

これは UI ウィジェットであり、すでに jQuery を使用しているため、jQuery プラグインとしてビルドすることをお勧めします。jQuery Web サイトには、プラグインの作成方法に関するセクションがあります。このチュートリアルでは、オプションのパラメーターを渡すことで上書きできるデフォルト値を持つようにプラグインを設定する方法を示します。

于 2013-08-31T00:07:09.437 に答える
0

「ユーザー」とは、ページの訪問者ではなく、スクリプトの再利用者を意味すると想定しています。1 つの方法は、デフォルトとして使用されるグローバル オプションを彼に設定させることです。

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 に答える