<!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.3/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.3/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() {

                // 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>

</body>

</html>

运行结果:

JQuery UI Widget Factory官方Demo的更多相关文章

  1. 使用 jQuery UI Widget Factory 编写有状态的插件（Stateful Plugins）

    使用 jQuery UI Widget Factory 编写有状态的插件(Stateful Plugins) Note 这一章节的内容是基于 Scott Gonzalez 一篇博客 Building ...

  2. 通过扩展jQuery UI Widget Factory实现手动调整Accordion高度

    □ 实现Accordion高度一致 <head> <meta name="viewport" content="width=device-width&q ...

  3. jQuery UI Widget Factory

    https://learn.jquery.com/jquery-ui/widget-factory/ The jQuery UI Widget Factory is an extensible bas ...

  4. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  5. Jquery ui widget开发

    Jquery ui 提供了一些基本的widget,但是他提供了很好的机制来创建widget.在jquery css framework中包含了基本的css样式(视觉和感觉诸如颜色,字体大小,图标等), ...

  6. jQuery UI Widget(1.8.1)工作原理--转载

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  7. jQuery UI Widget 原理

    先看下代码的相关注释: /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/abo ...

  8. jQuery UI Widget(1.8.1)工作原理

    /*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...

  9. jquery.ui.widget详解

    案例详解 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

随机推荐

  1. RegExp类型和text()方法

    ECMAScript通过RegExp类型来支持正则表达式 RegExp 实例方法:text() 它接受一个字符串参数,在模式与该参数匹配的情况下返回true,否则返回false,通常用在if语句中 / ...

  2. Oracle 课程二之Oracle数据库逻辑结构

    完成本课程的学习后,您应该能够: •数据库总体的逻辑结构 •深入理解数据库最小存储单元block •理解行迁移和行链接 •理解高水位线 •Drop.truncate.delete区别   1.数据库的 ...

  3. POJ 1173 Find them, Catch them

    题意:有两个帮派,每个人只属于一个帮派,m次操作,一种操作告诉你两个人不是一个帮派的,另一种操作问两个人是不是在一个帮派. 解法:并查集+向量偏移.偏移量表示和根节点是不是同一帮派,是为0,不是为1. ...

  4. hdu 3038 How Many Answers Are Wrong（种类并查集）2009 Multi-University Training Contest 13

    了解了种类并查集,同时还知道了一个小技巧,这道题就比较容易了. 其实这是我碰到的第一道种类并查集,实在不会,只好看着别人的代码写.最后半懂不懂的写完了.然后又和别人的代码进行比较,还是不懂,但还是交了 ...

  5. android总结

    针对Android有以下几点需要注意: 1.是不是应该把数据刷新操作放在onResume()中?     @Override     public void onResume() {          ...

  6. c#写入Mysql中文显示乱码 解决方法 z

    mysql字符集utf8,c#写入中文后,全部显示成?,一个汉字对应一个? 解决方法:在数据库连接字符串中增加字符集的说明,Charset=utf8,如 MySQLConnection con = n ...

  7. WIND2003 安装Zend studio 报错

    在安装zend stutio是系统报错,貌似是签章检验没有通过,去查了一下网上的解决方式多种多样,经过验证后发现以下可以解决我的问题特做记录 机器配置是E2160+4G 异常信息是:File c:\W ...

  8. Xamarin Mono Android Ios 安装、破解(4.12)

    一.Windows下面的安装 1. 安装环境介绍: Win8.1 企业版64位.VS2013,mono-android-4.12.02001,下面的安装过程都是在VS2013已经安装成功之后的操作,本 ...

  9. QT-【转】Qt 4迁移至Qt 5

    将Qt 4代码迁移到Qt 5还是比较简单的.实际上,在Qt 5开发过程中就已经注意了与Qt 4代码保持兼容性. 与Qt 3到Qt 4的迁移不同,Qt 5的核心类库并没有做大的API的修改,只有几个新的 ...

  10. [HIve - LanguageManual] Hive Operators and User-Defined Functions (UDFs)

    Hive Operators and User-Defined Functions (UDFs) Hive Operators and User-Defined Functions (UDFs) Bu ...