Bruce D Kyle devdays
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- | |
| From http://ajpiano.com/widgetfactory/ | |
| Copyright 2014 Bruce D Kyle | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $("#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
/ setWidgetOption.js
Last active
August 29, 2015 14:16
Your widget responds to changes of an option
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _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
/ 1-ourTriggerInYourWidget.js
Created
February 26, 2015 19:05
Ways of invoking and receiving a Trigger in a widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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 ) | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script> | |
| var myFilterable = $("#myFilterable").filterable({ | |
| visible: function (event, data) { | |
| console.log("filterable visible") | |
| } | |
| }); | |
| $("#myFilterable").filterable({ className: "myClass" }); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _hover: function (event) { | |
| $(event.target).toggleClass("ui-state-active", e.type === "mouseenter"); | |
| this._trigger("hover", event, { | |
| hovered: $(e.target) | |
| }); | |
| }, |
devdays
/ public-filter.js
Last active
August 29, 2015 14:16
Sample code to user filter input from jQuery UI Widget
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 () { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| _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'>" ) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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 |
NewerOlder