1

I want to set the options for widget with JSON file variable values? How can I do it plus how do I pass the json file to the client side?

The code is being copied from the 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

一种解决方案是使用该_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函数之前完成。

在您的情况下，您_getCreateOptions可以执行ajax 调用以从服务器端检索您的 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 回答