jQuery 위젯에서 옵션을 설정하는 방법 서버 측 변수 (JSON 파일)의 값을 가진 팩토리

Question

JSON 파일 변수 값을 사용하여 위젯에 대한 옵션을 설정하고 싶습니까? json 파일을 클라이언트 측에 전달하는 방법은 무엇입니까?

코드

는 달성 할 _getCreateOptions 함수를 사용하는 것이다 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> 

Answer 1

한 용액으로부터 복사된다.

가 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 call을 수행하여 서버 측에서 json 데이터를 검색 할 수 있습니다. 같은 뭔가 :

• 예를 들어 colorizeOptions JS VAR에서 (아약스 호출 또는 다른 방법을 통해) 위젯 초기화하기 전에 원격 데이터를로드 :

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

  또 다른 해결책은 될 수있다.

• 는 작성시 위젯 $('selector').colorize(colorizeOptions)이 데이터를 전달