CODEWITHSUNDEEP
jqueryjquery-uijquery-plugins
Hello-World
Hello-World

Reputation: 9555

jquery widget factory setOptions and setOption

Can you please help I'm trying to understand the concept of setOptions and setOption in the widget factory.

In the code below I thought that if I changed the option color this.options.green += 1; then the _setOption would fire as there was a change to the options property.

Can you please help me understand the concept of setOptions and setOption as I read the documentation but am struggling. thanks for the help.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Widget - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <!--<link rel="stylesheet" href="/resources/demos/style.css">-->
  <style>
  .custom-colorize {
    font-size: 20px;
    position: relative;
    width: 75px;
    height: 75px;
  }
  .custom-colorize-changer {
    font-size: 10px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  </style>
  <script>
      $(function () {

          $.widget("custom.colorize", {
              // default options
              options: {
                  red: 255,
                  green: 0,
                  blue: 0,
              },

              // the constructor
              _create: function () {
                  this.element.addClass("custom-colorize");

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


                  this._on(this.changer, {click: "editMyColour"});
                  this._drawShape();
              },

              editMyColour: function (event) {
                  this.options.green += 1;
                  //alert('test');
                  //this._drawShape();
              },

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

                  //this._trigger("change");
              },

              // _setOptions is called with a hash of all options that are changing
              // always refresh when changing options
              _setOptions: function () {
                  // _super and _superApply handle keeping the right this-context
                  this._superApply(arguments);
                  this._drawShape();
              },

              // _setOption is called for each individual option that is changing
              _setOption: function (key, value) {

                  this._super(key, value);
              }
          });

          // initialize with default options
          $("#my-widget1").colorize();



          // click to set options after initialization
          $("#black").click(function () {
              //$(":custom-colorize").colorize("option", {
              $('#my-widget1').colorize("option",{
                  red: 0,
                  green: 0,
                  blue: 0
              });
          });
      });
  </script>
</head>
<body>

<div>
  <div id="my-widget1">color me</div>
  <button id="disable">Toggle disabled option</button>
  <button id="black">Go black</button>
</div>


</body>
</html>

Upvotes: 0

Views: 6736

Answers (1)

Ted
Ted

Reputation: 14937

this.options is accessing the options object directly. It is just an object--nothing is listening for a change to it. To do what you thought would happen, you would call _setOption, like this._setOption('green', this.options.green + 1);. The _setOption function is called when setting the option externally, like $('#my-widget1').colorize("option", "red", 0});

Upvotes: 3

Related Questions