<!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. eclipse设置自定义快捷键

    eclipse有很多强大且人性化的功能,而各项功能有时又隐藏得比较深(需要点击数次菜单才能找到),而系统提供的快捷键有时比较难记住甚至根本没有提供快捷键时,就需要自己手动设置快捷键了.设置方法有两种, ...

  2. Android-判断当前网络是否可用

    1.声明权限 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 2. ...

  3. [Everyday Mathematics]20150117

    设 $f:\bbR^{n\times n}\to\bbR$ 适合 $$\bex f(cA+B)=cf(A)+f(B),\quad f(AB)=f(BA),\quad\forall\ c\in\bbR, ...

  4. lightoj 1022

    直接算即可,特别要注意精度 #include<cstdio> #include<cmath> int main(){ int t, CASE(0); double r; sca ...

  5. 《Python CookBook2》 第四章 Python技巧 对象拷贝 && 通过列表推导构建列表

    (先学第四章) 对象拷贝 任务: Python通常只是使用指向原对象的引用,并不是真正的拷贝. 解决方案: >>> a = [1,2,3] >>> import c ...

  6. c#基类 常用数据验证的封装，数字,字符,邮箱的验证

    #region 常用数据验证的封装,数字字符的验证       /// <summary>       /// 常用数据验证的封装,数字字符的验证       /// </summa ...

  7. 数往知来C#面向对象准备〈二〉

    面向对象(OOP→Object-Oriented Programming) 1.什么是面向对象? 一种分析问题的方式. 2.面向对象三大特征: 封装(隐蔽代码实现/复用/修改方便).继承.多态. 3. ...

  8. 获取week of year的小程序

    #coding=utf8 import urllib, BeautifulSoup web=urllib.urlopen("http://whatweekisit.com/") s ...

  9. javap 可以打印出用于jni调用的java函数的签名信息

    javap可以打印出java的字节码: -c     Prints out disassembled code, i.e., the instructions that comprise the Ja ...

  10. nova --debug image-list

    nova --debug image-list DEBUG (session:) REQ: curl -g -i -X GET http://liberty-aio:35357/v3 -H " ...