Skip to content

Instantly share code, notes, and snippets.

Last active August 29, 2015 14:16
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save devdays/5116e0314cec6cbdbd97 to your computer and use it in GitHub Desktop.
Filterable widget control shell
(function( $ ) {
// The jQuery.aj namespace will automatically be created if it doesn't exist
$.widget( "aj.filterable", {
// These options will be used as defaults
options: {
className: ""
_create: function() {
// The _create method is where you set up the widget
// Keep various pieces of logic in separate methods
filter: function() {
// Methods without an underscore are "public"
_hover: function() {
// Methods with an underscore are "private"
_setOption: function( key, value ) {
// Use the _setOption method to respond to changes to options
switch( key ) {
case "length":
// and call the parent function too!
return this._superApply( arguments );
_destroy: function() {
// Use the destroy method to reverse everything your plugin has applied
return this._super();
})( jQuery );
<!DOCTYPE html>
<title>Filterable Widget</title>
<link href="Content/themes/base/theme.css" rel="stylesheet" />
<h1>Type here</h1>
<div id="myFilterable">
<div id="userSelection"></div>
<script src="Scripts/jquery-2.1.3.js"></script>
<script src="Scripts/jquery-ui-1.11.3.js"></script>
<script src="Scripts/filterable/jquery-filterable-0.0.1.js"></script>
$("#myFilterable").filterable({ className: "myClass" } );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment