Просмотр архива Генератор форм


<?php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Widget - Default functionality</title>
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
    <script src="../../jquery-1.9.0.js"></script>
    <script src="../../ui/jquery.ui.core.js"></script>
    <script src="../../ui/jquery.ui.position.js"></script>
    <script src="../../ui/jquery.ui.widget.js"></script>
    <script src="../../ui/jquery.ui.button.js"></script>
    <link rel="stylesheet" href="../demos.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() {
        // the widget definition, where "custom" is the namespace,
        // "colorize" the widget name
        $.widget( "custom.colorize", {
            // default options
            options: {
                red: 255,
                green: 0,
                blue: 0,

                // callbacks
                change: null,
                random: null
            },

            // the constructor
            _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();

                // bind click events on the changer button to the random method
                this._on( this.changer, {
                    // _on won't call random when widget is disabled
                    click: "random"
                });
                this._refresh();
            },

            // called when created, and later when changing options
            _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 called directly 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, check if it's canceled
                if ( this._trigger( "random", event, colors ) !== false ) {
                    this.option( colors );
                }
            },

            // events bound via _on are removed automatically
            // revert 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 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._refresh();
            },

            // _setOption is called for each individual option that is changing
            _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 customized options
        $( "#my-widget2" ).colorize({
            red: 60,
            blue: 60
        });

        // initialize with custom green value
        // and a random callback to allow only colors with enough green
        $( "#my-widget3" ).colorize( {
            green: 128,
            random: function( event, ui ) {
                return ui.green > 128;
            }
        });

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

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

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

<div class="demo-description">
<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
</div>
</body>
</html>

?>