In this post, you will learn step-by-step to build your own custom, reusable, testable jQuery UI widget.
You will extend the jQuery library with custom UI code and then use it on a page. The initial plug-in will be trivial to demonstrate the jQuery Widget Factory pattern. You will provide properties that you can change to change the look of your widget and you will provide some methods that will respond to user input.
In this post example, you will learn how to create a simple click counter. Click a button, increase the count. The idea is to show you the steps to create a jQuery UI Widget.
The Widget Factory system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points.
In this post, you will learn step-by-step to build your own custom, reusable, testable jQuery Plugin.
There are times where you will want to reuse code that performs a series of operations on a selection.
For example, you may want to embed information a span element and then have that information displayed in a references section near the end of the document. In this case, the jQuery plugin is stateless.
In the next post, Building Stateful jQuery UI Plugin Using Widget Factory, you will see how to create a stateful jQuery plugin using jQuery Widget. And you will see how the widget is a better solution for plugins that require user interaction, because the Widget factory helps you maintain state.
So how can you use the check-boxes from Font Awesome, and get the box to check/uncheck. When a user clicks, how do I show the right icon?
When checked: icon-check ; unchecked: icon-check-empty.
The basic idea is to select spans:before that is next to input you want..
If you are using less/sass, you could just include the .icon-glass:before declarations, to make it all easier to maintain & modify. Continue reading “Snippet – Using FontAwesome, Bootstrap, MVC for Checkbox, Radio Controls”
When you’re loading information using jQuery AJAX, you may want to provide visual feedback when loading data or for any action that would take time.
In this Snippet, you will learn how to:
- Load JSON data from a getJSON call to our server.
- Show and hide a spinning indicator inside a div.
- Bind the incoming data to a view model object.
- Use the view model to populate an external template.
Then once the page is loaded, it will display the data based on an external template.
And we’ll provide some tips on how you you can use the IsLoading library to display the loading indicator on top of the page while loading and on top of the div itself.
Continue reading “Single Page App – isLoading jQuery Plugin to Indicate Content Loads”
Let me explain.
Continue reading “Single Page Apps – Notes on Search Engine Optimization (SEO)”