<!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. html input readonly 和 disable的区别

    Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容.但是它们之间有着微小的差别,总结如下: Readonly只针对input(text / password)和textar ...

  2. PLSQL Developer报“动态执行表不可访问，本会话的自动统计被禁止”的解决方案

    现象与提示: 第一次用PLSQL Developer连接数据库,若用sys用户登录并操作则正常,若用普通用户比如haishu登录并创建一个表则报错"动态执行表不可访问,本会话的自动统计被禁止 ...

  3. [Everyday Mathematics]20150204

    设 $k_0>0$, $\phi:[k_0,\infty)\to[0,\infty)$ 是有界递减函数, 并且 $$\bex \phi(k)\leq \frac{A}{(k-h)^\al}\ph ...

  4. sql语句中获取datetime任何部分

    sql语句中获取datetime的日期部分 sql语句中 经常操作操作datetime类型数据.今天在写一个存储过程的时候需要将 一个datetime的值的 日期部分提取出来.网上有许多这方面的介绍. ...

  5. Leave Morningstar

    Today, closed 4++ years developer life (2009.11.17-2014.02.28) in MorningStar Shenzhen Office Austra ...

  6. 将数据库从普通文件系统迁移到ASM中

    数据库存储的是普通的文件系统,现在将数据库迁移到ASM存储中. 准备ASM环境: [oracle@kel ~]$ asmcmd ASMCMD> ls ASM/ KEL/ ASMCMD> 在 ...

  7. 无序数组a，求a[i]-a[j]的最大值，且i<j

    一道面试题:对于无序数组a,求a[i]-a[j]的最大值,其中i<j package test; import java.util.Arrays; public class FindMax { ...

  8. 坚持自学的第二天，bootstrap初入门

    前言 昨天,初步学完了jekyll目录结构与Liquid语法的应用与认识. 日志 今天刚入门,做了一个bootstrap导航栏,但是选中状态不行,找了JS中写好的API,写法与视频中讲的有点不一样,但 ...

  9. C++ 我想这样用（五）

    上一篇说了[C with Class]语法的第一部分,下面继续第二部分: 第二部分:面向过程的编程风格 什么是面向过程我想如果你还不知道,那你绝对不是C程序员!其实我个人感觉面向过程.模块式的C编程风 ...

  10. [Hive - LanguageManual] Describe

    Describe Describe Database Describe Table/View/Column Display Column Statistics Describe Partition D ...