Content/jqueryui/demos/widget/default.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Widget - Default functionality</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.9.1.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.position.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.button.js"></script>
	<link rel="stylesheet" href="../demos.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