<!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. Dataguard三种保护模式

    Oracle Data Guard 提供三种高水平的数据保护模式来平衡成本.可用性.性能和事务保护.可以使用任意可用管理界面来轻松地设置这些模式.要确定适当的数据保护模式,企业需要根据用户对系统响应时 ...

  2. 【转】iOS类似Android上toast效果

    原文网址:http://m.blog.csdn.net/article/details?id=50478737 做过Android开发的人都知道toast,它会在界面上显示一排黑色背景的文字,用于提示 ...

  3. js除法余数

    return (Math.round(rs*100)/100); //保保留小数点后两位数: //如果要保留三位则改为:Math.round(rs*1000)/1000; //如果要保留四位则改为:M ...

  4. HDU 5489 Removed Interval

    题意:求一段序列中删掉L个连续元素后的LIS. 解法:我的想法很复杂= =怎么说呢……首先用nlogn的方法求LIS得到的序列dp的第i项的意义为上升子序列所有长度为i的序列结尾元素的最小值,那么先倒 ...

  5. Maximum Product Subarray JAVA实现

    题目描述: Find the contiguous subarray within an array (containing at least one number) which has the la ...

  6. 转载：ofstream和ifstream详细用法

    ofstream是从内存到硬盘,ifstream是从硬盘到内存,其实所谓的流缓冲就是内存空间; 在C++中,有一个stream这个类,所有的I/O都以这个“流”类为基础的,包括我们要认识的文件I/O, ...

  7. Educational Codeforces Round 15 套题

    这套题最后一题不会,然后先放一下,最后一题应该是大数据结构题 A:求连续最长严格递增的的串,O(n)简单dp #include <cstdio> #include <cstdlib& ...

  8. 在Lua里写unity游戏笔记

    gameobject.GetComponent<Transform>(); 翻译成Lua: gameObject:GetComponent (luanet.ctype (Transform ...

  9. ubuntu java jdk安装及环境变量设置

    1.下载jdk1.7.0_79 (32位操作系统)jdk-7u79-linux-i586.tar.gz (64位操作系统)jdk-7u79-linux-x64.tar.gz http://www.or ...

  10. mysql的point类型查询处理

    mysql的point类型,很蛋疼的表示更习惯于key—value的lng,lat 假设不得不处理数据库字段poi是point类型,其中的数据为 : POINT(28.2789745229671 11 ...