Latest web development tutorials

jQuery UI Examples - Part Gallery (Widget Factory)

Use jQuery UI widgets with all the same abstraction to create stateful jQuery plugin.

For more details about the widget library (Widget Factory), check the API documentation component library (Widget Factory) .

The default function

The demo shows a simple to use component libraries (jquery.ui.widget.js) to create custom widgets.

Three blocks in a different way to initialize. Click to change their background color. View source code and comments to understand how it works. 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI widget library (Widget Factory) - The default function </ 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 () {
    // Member definitions, wherein "custom" namespace, "colorize" is the name of the member $ .widget ( "custom.colorize", {
      // Default options: {
        red: 255,
        green: 0,
        blue: 0,
 
        // Callback change: null,
        random: null
      },
 
      // Constructor _create: function () {
        this.element
          // Add a topic of class
          .addClass ( "custom-colorize")
          // Prevent double-click to select text .disableSelection ();
 
        this.changer = $ ( "<button>", {
          text: "change"
          "Class": "custom-colorize-changer"
        })
        .appendTo (this.element)
        .button ();
 
        // Bind the click event changer button to random method this._on (this.changer, {
          // When the widget is disabled, _on not called random
          click: "random"
        });
        this._refresh ();
      },
 
      () Function {: // call _refresh when you create and then change options
        this.element.css ( "background-color", "rgb (" +
          this.options.red + "," +
          this.options.green + "," +
          this.options.blue + ")"
        );
 
        // Trigger a callback / event this._trigger ( "change");
      },
 
      // Change the color to a random value // public methods can be called directly via random .colorize ( "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, check whether canceled if (this._trigger ( "random", event, colors)! == False) {
          this.option (colors);
        }
      },
 
      // Automatic removal event bound by _on here // reset other modifications _destroy: function () {
        // Remove generated elements this.changer.remove ();
 
        this.element
          .removeClass ( "custom-colorize")
          .enableSelection ()
          .css ( "background-color", "transparent");
      },
 
      // _setOptions By a hash all changed with options to invoke // when changing options are always refresh _setOptions: function () {
        // _super And _superApply
        this._superApply (arguments);
        this._refresh ();
      },
 
      // _setOption _setOption For each individual to change the options call: function (key, value) {
        // Color values ​​to prevent invalid if (/red|green|blue/.test(key) && (value <0 || value> 255)) {
          return;
        }
        this._super (key, value);
      }
    });
 
    // Initialize the default options $ ( "# my-widget1") .colorize ();
 
    // By two custom options to initialize $ ( "# my-widget2") .colorize ({
      red: 60,
      blue: 60
    });
 
    // Green by self-defined value and only allows a sufficient green color random callback to initialize $ ( "# my-widget3") .colorize ({
      green: 128,
      random: function (event, ui) {
        return ui.green> 128;
      }
    });
 
    // Click Switch enabled / disabled
    $ ( "#disable") .click (Function () {
      // Custom selectors for each widget to find all instances // All instances of switching together, so we can start from the first state to check if ($ ( ": custom-colorize") .colorize ( "option", "disabled")) {
        $ ( ": Custom-colorize") .colorize ( "enable");
      } Else {
        $ ( ": Custom-colorize") .colorize ( "disable");
      }
    });
 
    // After initialization, click the Settings option $ ( "#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"> switch disabled option </ button>
  <Button id = "black"> to Black </ button>
</ Div>
 
 
</ Body>
</ Html>