Can you please help I'm trying to understand the concept of
setOptions and setOption in the widget factory.
In the code below I thought that if I changed the option color
this.options.green += 1; then the _setOption would fire as there was a change to the options property.
Can you please help me understand the concept of setOptions and setOption as I read the documentation but am struggling. thanks for the help
<!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.4/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.4/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 () {
$.widget("custom.colorize", {
// default options
options: {
red: 255,
green: 0,
blue: 0,
},
// the constructor
_create: function () {
this.element.addClass("custom-colorize");
this.changer = $("<button>", {text: "change", "class": "custom-colorize-changer"}).appendTo(this.element);
this._on(this.changer, {click: "editMyColour"});
this._drawShape();
},
editMyColour: function (event) {
this.options.green += 1;
//alert('test');
//this._drawShape();
},
_drawShape: function () {
this.element.css("background-color", "rgb(" + this.options.red + "," + this.options.green + "," + this.options.blue + ")");
//this._trigger("change");
},
// _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._drawShape();
},
// _setOption is called for each individual option that is changing
_setOption: function (key, value) {
this._super(key, value);
}
});
// initialize with default options
$("#my-widget1").colorize();
// click to set options after initialization
$("#black").click(function () {
//$(":custom-colorize").colorize("option", {
$('#my-widget1').colorize("option",{
red: 0,
green: 0,
blue: 0
});
});
});
</script>
</head>
<body>
<div>
<div id="my-widget1">color me</div>
<button id="disable">Toggle disabled option</button>
<button id="black">Go black</button>
</div>
</body>
</html>this.options is accessing the options object directly. It is just an object--nothing is listening for a change to it. To do what you thought would happen, you would call _setOption, like this._setOption('green', this.options.green + 1);. The _setOption function is called when setting the option externally, like $('#my-widget1').colorize("option", "red", 0});Or call this.option({'green': this.options.green + 1})
Sưu tầm từ: http://stackoverflow.com/questions/22333716/jquery-widget-factory-setoptions-and-setoption
Không có nhận xét nào:
Đăng nhận xét