Making the simplest possible jQuery plugin
In this recipe, we will create the simplest possible Bootstrap plugin, with just the most basic functionality. The intention of having such a recipe in this book is to clarify the core principles of extending Bootstrap 4 via jQuery plugins as a starting point for more complex code.
Getting ready
To get ready, you can review the completed recipe by running harp server in the chapter7/complete folder, and navigate to localhost:9000/recipe07-01. The result you see should be a simple web page, with a navbar, a heading, and a paragraph.
After previewing the result we are trying to achieve, navigate to the chapter7/start folder and open the _js.ejs, _nav.ejs, _recipe-07-01-js.ejs files in the app/partial folder. Also, one level up, in the root of the app folder, open the file titled recipe07-01.ejs.
How to do it…
- Open the currently blank
_recipe07-01-js.ejsand paste the code as follows:
// Step 1: Add an IIFE
(function($) {
// step 2 code goes here
})(jQuery...