View Filterable-0.0.3.html
<!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.
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) {
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
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();
},
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 )
});
View filterableCallback.html
<script>
var myFilterable = $("#myFilterable").filterable({
visible: function (event, data) {
console.log("filterable visible")
}
});
$("#myFilterable").filterable({ className: "myClass" });
</script>
View private-hover.js
_hover: function (event) {
$(event.target).toggleClass("ui-state-active", e.type === "mouseenter");
this._trigger("hover", event, {
hovered: $(e.target)
});
},
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 () {
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'>" )
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