Skip to content

Instantly share code, notes, and snippets.

Avatar

Bruce D Kyle devdays

View GitHub Profile
@devdays
devdays / private-hover.js
Created Feb 26, 2015
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 / _destroyInYourWidget.js
Created Feb 26, 2015
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 / filterableCallback.html
Created Feb 26, 2015
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 / client.js
Last active Aug 29, 2015
Client code for displaying widget
View client.js
$("#cheeses").filterable({
className: "cheese",
create: function() { $("#register").addClass("ui-widget-header cheese").show(); },
filtered: function(e, ui) {
var t = 0;
ui.visible.each(function() { t = t + parseFloat($(this).data("price")); });
console.log( t );
total.text(t.toFixed(2));
},
setOption: function(e, ui) {
@devdays
devdays / 1-ourTriggerInYourWidget.js
Created Feb 26, 2015
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 / create.js
Last active Aug 29, 2015
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 / public-filter.js
Last active Aug 29, 2015
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 / aj.filterable.widget.js
Last active Aug 29, 2015
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 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 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));