Skip to content

Instantly share code, notes, and snippets.

View devdays's full-sized avatar

Bruce D Kyle devdays

View GitHub Profile
@devdays
devdays / setWidgetOption.js
Last active August 29, 2015 14:16
Your widget responds to changes of an option
View setWidgetOption.js
_setOption: function (key, value) {
var oldValue = this.options[key];
// Check for a particular option being set
if (key === "className") {
// Gather all the elements we applied the className to
this.filterInput.parent().add(this.filterElems)
// Switch the new className in for the old
@devdays
devdays / _destroyInYourWidget.js
Created February 26, 2015 19:42
Clean up in your widget
View _destroyInYourWidget.js
_destroy: function () {
// Use the destroy method to reverse everything your plugin has applied
this.filterInput.parent().remove();
// Remove any classes, including CSS framework classes, that you applied
this.filterElems.removeClass("ui-widget-content ui-helper-hidden ui-state-active " + this.options.className);
return this._super();
},
@devdays
devdays / 1-ourTriggerInYourWidget.js
Created February 26, 2015 19:05
Ways of invoking and receiving a Trigger in a widget
View 1-ourTriggerInYourWidget.js
// in your widget
// call the callback event named 'hover' the client code
this._trigger( "hover",
// send e as the original event back as part of the callback
e /* e.type == "mouseenter" */, {
// return the uiObject e.Target in the hovered parameter of the event
// you could also respond with data that the user might need
hovered: $( e.target )
});
@devdays
devdays / filterableCallback.html
Created February 26, 2015 18:33
Widget client callback sample
View filterableCallback.html
<script>
var myFilterable = $("#myFilterable").filterable({
visible: function (event, data) {
console.log("filterable visible")
}
});
$("#myFilterable").filterable({ className: "myClass" });
</script>
@devdays
devdays / private-hover.js
Created February 26, 2015 17:48
Private hover method for widget
View private-hover.js
_hover: function (event) {
$(event.target).toggleClass("ui-state-active", e.type === "mouseenter");
this._trigger("hover", event, {
hovered: $(e.target)
});
},
@devdays
devdays / public-filter.js
Last active August 29, 2015 14:16
Sample code to user filter input from jQuery UI Widget
View public-filter.js
filter: function (event) {
// Debounce the keyup event with a timeout, using the specified delay
clearTimeout(this.timeout);
// like setTimeout, only better!
this.timeout = this._delay(function () {
var re = new RegExp(this.filterInput.val(), "i"),
visible = this.filterElems.filter(function () {
@devdays
devdays / create.js
Last active August 29, 2015 14:16
Sample create function in widget
View create.js
_create: function() {
// this.element -- a jQuery object of the element the widget was invoked on.
// this.options -- the merged options hash
// Cache references to collections the widget needs to access regularly
this.filterElems = this.element.children()
.addClass( "ui-widget-content " + this.options.className );
this.filterInput = $( "<input type='text'>" )
@devdays
devdays / aj.filterable.widget.js
Last active August 29, 2015 14:16
Filterable widget control shell
View aj.filterable.widget.js
/*
From http://ajpiano.com/widgetfactory/#slide9
*/
(function( $ ) {
// The jQuery.aj namespace will automatically be created if it doesn't exist
$.widget( "aj.filterable", {
// These options will be used as defaults
@devdays
devdays / click-handler.js
Created February 24, 2015 22:52
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.
},
@devdays
devdays / destroyTheWidget.js
Created February 24, 2015 00:22
Destroy the Widget
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);