首页
参考手册
HTML / CSS
HTML
HTML5
CSS
CSS3
Bootstrap3
Bootstrap4
Bootstrap5
Font Awesome
Foundation
JavaScript
JavaScript
HTML DOM
jQuery
AngularJS
AngularJS2
Vue.js
Vue3
React
TypeScript
jQuery UI
jQuery EasyUI
Node.js
AJAX
JSON
Echarts
Chart.js
Highcharts
Google 地图
服务端
Python
Python2.x
Linux
Docker
Ruby
Java
C语言
C++
Perl
Servlet
JSP
Lua
Rust
Scala
Go
PHP
数据结构与算法
Django
Zookeeper
设计模式
正则表达式
Maven
Verilog
ASP
AppML
VBScript
数据库
SQL
MySQL
PostgreSQL
SQLite
MongoDB
Redis
Memcached
数据分析
Python
NumPy
Pandas
Matplotlib
Scipy
R语言
Julia
移动端
Android
Swift
jQuery Mobile
ionic
Kotlin
XML 教程
XML
DTD
XML DOM
XSLT
XPath
XQuery
XLink
XPointer
XML Schema
XSL-FO
SVG
ASP.NET
ASP.NET
C#
Web Pages
Razor
MVC
Web Forms
Web Service
Web Service
WSDL
SOAP
RSS
RDF
开发工具
Eclipse
Git
Svn
Markdown
网站建设
HTTP
网站建设指南
浏览器信息
网站主机教程
TCP/IP
W3C
网站品质
技术文章
CMS建站篇
SEO运营篇
模板下载
文章汇
源代码:
下载代码
点击运行
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI 部件库(Widget Factory) - 默认功能</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/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() { // 部件定义,其中 "custom" 是命名空间,"colorize" 是部件名称 $.widget( "custom.colorize", { // 默认选项 options: { red: 255, green: 0, blue: 0, // 回调 change: null, random: null }, // 构造函数 _create: function() { this.element // 添加一个主题化的 class .addClass( "custom-colorize" ) // 防止双击来选择文本 .disableSelection(); this.changer = $( "<button>", { text: "改变", "class": "custom-colorize-changer" }) .appendTo( this.element ) .button(); // 绑定 changer 按钮上的 click 事件到 random 方法 this._on( this.changer, { // 当小部件被禁用时,_on 不会调用 random click: "random" }); this._refresh(); }, // 当创建及之后改变选项时调用 _refresh: function() { this.element.css( "background-color", "rgb(" + this.options.red +"," + this.options.green + "," + this.options.blue + ")" ); // 触发一个回调/事件 this._trigger( "change" ); }, // 一个改变颜色为随机值的公共方法 // 可通过 .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 ) }; // 触发一个事件,检查是否已取消 if ( this._trigger( "random", event, colors ) !== false ) { this.option( colors ); } }, // 自动移除通过 _on 绑定的事件 // 在这里重置其他的修改 _destroy: function() { // 移除生成的元素 this.changer.remove(); this.element .removeClass( "custom-colorize" ) .enableSelection() .css( "background-color", "transparent" ); }, // _setOptions 是通过一个带有所有改变的选项的哈希来调用的 // 当改变选项时总是刷新 _setOptions: function() { // _super 和 _superApply this._superApply( arguments ); this._refresh(); }, // _setOption 是为每个独立的改变的选项调用的 _setOption: function( key, value ) { // 防止无效的颜色值 if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) { return; } this._super( key, value ); } }); // 通过默认选项进行初始化 $( "#my-widget1" ).colorize(); // 通过两个自定义的选项进行初始化 $( "#my-widget2" ).colorize({ red: 60, blue: 60 }); // 通过自定义的 green 值和一个只允许颜色足够绿的随机的回调进行初始化 $( "#my-widget3" ).colorize( { green: 128, random: function( event, ui ) { return ui.green > 128; } }); // 点击切换 enabled/disabled $( "#disable" ).click(function() { // 为每个小部件使用自定义的选择器来找到所有的实例 // 所有的实例一起切换,所以我们可以从第一个开始检查状态 if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) { $( ":custom-colorize" ).colorize( "enable" ); } else { $( ":custom-colorize" ).colorize( "disable" ); } }); // 在初始化后,点击设置选项 $( "#black" ).click( function() { $( ":custom-colorize" ).colorize( "option", { red: 0, green: 0, blue: 0 }); }); }); </script> </head> <body> <div> <div id="my-widget1">改变颜色</div> <div id="my-widget2">改变颜色</div> <div id="my-widget3">改变颜色</div> <button id="disable">切换 disabled 选项</button> <button id="black">改为黑色</button> </div> </body> </html>
运行结果: