1

JSON ファイルの変数値を使用してウィジェットのオプションを設定したいですか? どうすればそれを行うことができ、jsonファイルをクライアント側に渡すにはどうすればよいですか?

コードはjQueryUI Widget Factoryからコピーされています

 <script>
  $(function() {

    $.widget( "custom.colorize", {

      // ***Need to pass option values over here***

   options: {
        red: 255,
        green: 0,
        blue: 0,


        change: null,
        random: null
      },


      _create: function() {
        this.element
          // add a class for theming
          .addClass( "custom-colorize" )
          // prevent double click to select text
          .disableSelection();

        this.changer = $( "<button>", {
          text: "change",
          "class": "custom-colorize-changer"
        })
        .appendTo( this.element )
        .button();


        this._on( this.changer, {

          click: "random"
        });
        this._refresh();
      },


      _refresh: function() {
        this.element.css( "background-color", "rgb(" +
          this.options.red +"," +
          this.options.green + "," +
          this.options.blue + ")"
        );


        this._trigger( "change" );
      },

      // ***And in the random function as well***

      random: function( event ) {
        var colors = {
          red: Math.floor( Math.random() * 256 ),
          green: Math.floor( Math.random() * 256 ),
          blue: Math.floor( Math.random() * 256 )
        };


        if ( this._trigger( "random", event, colors ) !== false ) {
          this.option( colors );
        }
      },

      _destroy: function() {
        // remove generated elements
        this.changer.remove();

        this.element
          .removeClass( "custom-colorize" )
          .enableSelection()
          .css( "background-color", "transparent" );
      },

      _setOptions: function() {

        this._superApply( arguments );
        this._refresh();
      },

      _setOption: function( key, value ) {

        if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
          return;
        }
        this._super( key, value );
      }
    });


    $( "#my-widget1" ).colorize();


    $( "#my-widget2" ).colorize({
      red: 60,
      blue: 60
    });


    $( "#my-widget3" ).colorize( {
      green: 128,
      random: function( event, ui ) {
        return ui.green > 128;
      }
    });


    $( "#disable" ).click(function() {
      if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
        $( ":custom-colorize" ).colorize( "enable" );
      } else {
        $( ":custom-colorize" ).colorize( "disable" );
      }
    });


    $( "#black" ).click( function() {
      $( ":custom-colorize" ).colorize( "option", {
        red: 0,
        green: 0,
        blue: 0
      });
    });
  });
  </script>
</head>
4

1 に答える 1

1

1 つの解決策は、_getCreateOptions関数を使用してそれを達成することです。

jquery-ui ウィジェット ファクトリ コードを見て、この_getCreateOptions関数が呼び出される場所を確認します。

_createWidget: function( options, element ) {

    [...]

    this.options = $.widget.extend( {},
        this.options,
        this._getCreateOptions(), // function you need to implement
        options );

    [...]

    this._create();
    this._trigger( "create", null, this._getCreateEventData() );
    this._init();

}

ご覧のとおり、ウィジェットoptionsは関数によって返された値とマージされます。_getCreateOptionsこれは、ウィジェットの作成時_createと_init関数の呼び出し前にのみ行われます。

あなたの場合、 ajax 呼び出し_getCreateOptionsを実行して、サーバー側から json データを取得できます。何かのようなもの ：

_getCreateOptions: function() {
    return $.get({
        url: 'http://path-to-your-json-data',
        dataType: 'json'
    })
    .done(function(jsonData) {
        return jsonData;
    })
    .fail(function() {
        // ...
    });
}

別の解決策は次のとおりです。

  • たとえば、ウィジェットの初期化の前に（ajax呼び出しまたはその他のメソッドを介して）リモートデータをcolorizeOptions js varにロードします。
  • $('selector').colorize(colorizeOptions)作成時にこのデータをウィジェットに渡します
于 2014-01-10T10:57:55.193 に答える