<!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. css的框架——global.css

    global.css,一般这个css文件是用于装全站主要框架css样式代码. “global”翻译为全局.全部.从翻译中大家也能理解global.css用于做什么.大站常常用于装全站公共的CSS样式选 ...

  2. 零基础编程指南(By Turtle)

    [零.基础] 1.看文章:<程序猿搜索的技巧>(未完成) [一.入门] 学习语言:VB 安装:下载VB6即可 教程:<李天生vb从入门到精通>http://www.xin372 ...

  3. C# 委托总结

    总结 委托的本质: 委托是一种特殊的数据类型,它表示某种特定类型的函数,并且可以表示多个函数,将这些函数串联起来.使用委托就好像函数调用一样. 委托实质上是一个类,编译器会根据关键字delegate自 ...

  4. [转] 使用C#开发ActiveX控件

    双魂人生 原文 使用C#开发ActiveX控件 ActiveX 是一个开放的集成平台,为开发人员.用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内 ...

  5. SQL注入中利用XP_cmdshell提权的用法(转)

    先来介绍一下子服务器的基本情况,windows 2000 adv server 中文版,据称 打过了sp3,asp+iis+mssql .首先扫描了一下子端口,呵呵,开始的一般步骤. 端口21开放: ...

  6. useful-scripts

    最近在github看到关于一些比较好的java相关脚本.vcs脚本.shell脚本.怕以后忘记了,在此做个备注. 原链接为:https://github.com/oldratlee/useful-sc ...

  7. 浏览器URL传参最大长度问题

    这几天为解决一个BUG头疼了一段时间,BUG现象如下: 一个选择人员的选择控件,当选择多个人时(50多个的时候),返回没有错误现象,而再一次打开的时候就报404错误.看到这个错误非常纳闷,无法下手,只 ...

  8. 选择学习Pomelo

    我之前的项目都是基于http做网络通信,但是做多玩家同时对战的游戏,http短连接不支持服务器的push是个问题,这样客户端就没办法收到服务器的消息. 最简单的方法是定时发起request询问服务器, ...

  9. 【原】Storm环境搭建

    2.Storm环境搭建 单机 ... 集群 ... 搭建Storm开发环境 搭建Storm开发环境主要概括为以下两步: 1.下载Storm发行稳定版,然后解压,最后把解压后的bin/文件所在目录添加到 ...

  10. Python中的高级数据结构

    数据结构 数据结构的概念很好理解,就是用来将数据组织在一起的结构.换句话说,数据结构是用来存储一系列关联数据的东西.在Python中有四种内建的数据结构,分别是List.Tuple.Dictionar ...