Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Filterable widget control shell
/*
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
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":
break;
}
// 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>
<html>
<head>
<title>Filterable Widget</title>
<link href="Content/themes/base/theme.css" rel="stylesheet" />
</head>
<body>
<h1>Type here</h1>
<div id="myFilterable">
</div>
<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>
<script>
$("#myFilterable").filterable({ className: "myClass" } );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment