Skip to content

Instantly share code, notes, and snippets.

Avatar

Bruce D Kyle devdays

View GitHub Profile
@devdays
devdays / click-handler.js
Created Feb 24, 2015
Handling clicks in jQuery UI Widget
View click-handler.js
_create: function () {
...
this._on(this.elTitle, {
click: "_titleClick" // Note: function name must be passed as a string!
});
},
_titleClick: function (event) {
console.log(this); // 'this' is now the widget instance.
},
View destroyTheWidget.js
(function ($) {
$.widget("custom.clicker", {
// the rest of the clicker is omitted
destroy: function () {
this.element.text("");
// Call the base destroy function.
$.Widget.prototype.destroy.call(this);
View CallingTheTrigger.html
<script>
var theClicker = $("#myClicker").clicker({
isUpdated: function (event, data) {
console.log("isOneHundredOne");
alert("Is " + data.myValue);
}
});
theClicker.clicker({ newValue: 101 });
</script>
View callingWidgetWithSetOptions
myClicker.clicker( { currentValue: 100 } );
newCurrentValue = myClicker.clicker("currentValue");
alert(newCurrentValue);
@devdays
devdays / addMethod.js
Created Feb 23, 2015
Calling the Add Method
View addMethod.js
(function ($) {
$.widget("custom.clicker", {
// Default options.
options: {
startingValue: 0,
_currentValue : 0
},
// _create and other methods to access properties ommitted ..
@devdays
devdays / callingGettersAndSetters.html
Created Feb 23, 2015
Getting the startingValue, getting or setting the currentValue in a jQuery UI Widget
View callingGettersAndSetters.html
<script>
// initializing the startingValue
var myClicker = $("#myClicker").clicker({ startingValue: 4 });
// getting the startingValue
alert(myClicker.clicker("startingValue"));
// setting the currentValue
myClicker.clicker("currentValue", 7);
// getting the currentValue
@devdays
devdays / jquerywidget-clicker-0.0.1.js
Created Feb 23, 2015
jQuery widget create with default options values
View jquerywidget-clicker-0.0.1.js
(function ($) {
$.widget("custom.clicker", {
// Default options.
options: {
startingValue: 0
},
_create: function () {
var startingValue = this.options.startingValue;
View jquerywidget-clicker-0.0.1.js
(function ($) {
$.widget("custom.clicker", {
_create: function () {
var startingValue = this.options.startingValue;
this.element.text("The starting value is " + startingValue);
}
});
}(jQuery));
@devdays
devdays / passingOptionValues.js
Created Feb 23, 2015
Passing option values to the widget
View passingOptionValues.js
$("#myClicker").clicker( {
startingValue: 4
});
@devdays
devdays / clickewidget.html
Last active Aug 29, 2015
Page to host clicker widget
View clickewidget.html
<!DOCTYPE html>
<html>
<head>
<title>Clicker</title>
</head>
<body>
<div id="myClicker">
</div>
<script src="Scripts/jquery-2.1.3.js"></script>