0

最近、Bootstrap のデフォルトの動作を根本的なレベルで変更したい状況に出くわしました。Modalクラスにカスタム メソッドを追加して、他のストックModalメソッド と同じようにカスタム メソッドを呼び出せるようにしたいと思います。

$('#my-modal').modal('myMethod', myParameter);

Modalのコンストラクターに関数を追加することで、これが機能します。

$.fn.modal.Constructor.prototype.myMethod = function (myParameter) {
  ...
}

ただし、myParameter変数は渡されていません。myParameterカスタム Bootstrap メソッドにアクセス/渡すにはどうすればよいですか?

4

2 に答える 2

0

これを行う方法を見つけましたが、残念ながら、Bootstrap ソースへの変更が必要です。実際のメソッド呼び出しを行うコードは次のとおりです。

$.fn.modal = function (option) {
  return this.each(function () {
    var $this = $(this)
      , data = $this.data('modal')
      , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
    if (!data) $this.data('modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option]()
    else if (options.show) data.show()
  })
}

これを変更するには、7 行目 (ソース コードの 206 行目) を変更して、最初に外側の関数に渡された追加のパラメーターを渡す必要があります。さらに、jQuery の.each()関数の反復ごとに、元の引数を指定する必要があります。作業コードは次のとおりです。

$.fn.modal = function (option) {
  return this.each(function () {
    var $this = $(this)
      , data = $this.data('modal')
      , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
    if (!data) $this.data('modal', (data = new Modal(this, options)))
    if (typeof option == 'string') data[option].apply($this.data('modal'), Array.prototype.slice.call(arguments, 1)); // pass the parameters on
    else if (options.show) data.show()
  }, arguments) // execute each iteration with the original parameters
}

この変更によって望ましくない副作用が生じないように、まだ実験を続けていますが、今のところ、すべてが期待どおりに機能しています。よりエレガントなソリューションは大歓迎です。

于 2013-03-06T22:42:16.903 に答える
0

これをそのまま行う方法はありません。関数を呼び出すためにモデルが使用するコードは、パラメーターを考慮しません。

  $.fn.modal = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('modal')
        , options = $.extend({}, $.fn.modal.defaults, $this.data(), typeof option == 'object' && option)
      if (!data) $this.data('modal', (data = new Modal(this, options)))
      if (typeof option == 'string') data[option]() // <-- here
      else if (options.show) data.show()
    })
  }

Bootstrap がインスタンスを格納する場所であるため、 にメソッドを追加し、を介してインスタンスを$.fn取得するのが最善の策です。Model$(this).data('modal')

$.fn.foo = function (param) {
    return this.each(function () {
        var model = $(this).data('modal');

        // blah blah blah
    });
}
于 2013-03-06T20:04:25.147 に答える