jQuery UI Example - Widget Factory

Create stateful jQuery plugins using the same abstraction as all jQuery UI widgets.

For more details on the Widget Factory, see the Widget Factory API documentation.

Default Functionality

This demo shows a custom widget created using the Widget Factory (jquery.ui.widget.js).

Three blocks are initialized in different ways. Click to change their background color. View the source and comments to understand how it works.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Widget Factory - Default Functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/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 definition, where "custom" is the namespace and "colorize" is the widget name
    $.widget( "custom.colorize", {
      // Default options
      options: {
        red: 255,
        green: 0,
        blue: 0,

        // Callbacks
        change: null,
        random: null
      },

      // Constructor
      _create: function() {
        this.element
          // Add a themed class
          .addClass( "custom-colorize" )
          // Prevent text selection on double-click
          .disableSelection();

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

        // Bind the click event on the changer button to the random method
        this._on( this.changer, {
          // _on will not call random when the widget is disabled
          click: "random"
        });
        this._refresh();
      },

      // Called when created and whenever options are changed
      _refresh: function() {
        this.element.css( "background-color", "rgb(" +
          this.options.red +"," +
          this.options.green + "," +
          this.options.blue + ")"
        );

        // Trigger a callback/event
        this._trigger( "change" );
      },

      // A public method to change the color to a random value

// Can be directly called via .colorize("random") random: function(event) { var colors = { red: Math.floor(Math.random() * 256), green: Math.floor(Math.random() * 256), blue: Math.floor(Math.random() * 256) };

// Trigger an event to check if it has been canceled if (this._trigger("random", event, colors) !== false) { this.option(colors); } },

// Automatically remove events bound via _on // Reset other modifications here _destroy: function() { // Remove generated elements this.changer.remove();

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

// _setOptions is called with a hash containing all changed options // Always refresh when options are changed _setOptions: function() { // _super and _superApply this._superApply(arguments); this._refresh(); },

// _setOption is called for each individually changed option _setOption: function(key, value) { // Prevent invalid color values if (/red|green|blue/.test(key) && (value < 0 || value > 255)) { return; } this._super(key, value); } });

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

// Initialize with two custom options $("#my-widget2").colorize({ red: 60, blue: 60 });

// Initialize with a custom green value and a random callback that only allows colors that are sufficiently green $("#my-widget3").colorize({ green: 128, random: function(event, ui) { return ui.green > 128; } });

// Toggle enabled/disabled on click $("#disable").click(function() { // Use a custom selector to find all instances for each widget // All instances toggle together, so we can check the state from the first one if ($(":custom-colorize").colorize("option", "disabled")) { $(":custom-colorize").colorize("enable"); } else { $(":custom-colorize").colorize("disable"); } });

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

<div>

<div id="my-widget1">Change Color</div>
<div id="my-widget2">Change Color</div>
<div id="my-widget3">Change Color</div>
<button id="disable">Toggle Disabled Option</button>
<button id="black">Change to Black</button>
</div>

</body>
</html>

View Demo

❮ Example Progressbar Api Zindex ❯