JQuery Plugins Tutorials and Guide

Top 10 jQuery Plugins for Bootstrap

October 10, 2017 by Krishna Srinivasan Leave a Comment

Bootstrap is a great, popular framework that can be used to create beautiful, responsive sites for just about any purpose. Because the framework is so popular, there are a lot of open source jQuery plugins that have been developed to go hand-in-hand with it. Check out this list of the best, most useful free jQuery plugins that will seamlessly integrate with your site that’s built on Bootstrap.

1. jqBootstrapValidation

Looking for an easy to use, lightweight Bootstrap form validation plugin for your project? Look no further. jqBootstrap Validation is free, easy to install, has a handful of pre-configured settings for you to choose from, and includes over a dozen different ways to validate your forms.

2. Bootstrap Multiselect

Add the option to include checkboxes where your user can make multiple selections to any input field. The plugin is fully customizable in terms of styling, but it comes with a minimalist design and theme that will surely go with any design.

3. Bootstrap Show Password

This plugin is a great choice if you’re looking for something that will give your users the option to actually see the password they’re typing in rather than dots or stars. The plugin includes a cool eyeball icon that toggles the show and hides en event for the password field.

4. Bootstrap Toggle

Turn any checkbox input field into a cool toggle option with this lightweight plugin for Bootstrap. It also gives you the option of disabling some toggles so they can’t be turned on and off (essentially, the boxes can’t be checked).

5. Bootstrap Color Picker Sliders

This unique and fun plugin allows you to add a color picker to your site. It gives you the option to pick out your colors using a classic color swatch panel, cool interactive sliders, or individual color swatches.

6. Clockface

Give your users the ability to see and change the time using this clockface plugin. You also have the option to disable the plugin so that your users can only see the time and won’t have access to the clockface.

8. DateTime Picker

The DateTimePicker plugin allows you to give your users the ability to choose just about any date and time they desire. You can display the calendars in a decade, year, month, week, day, or hour views.

9. Summernote

This plugin is a great way to add a simple WYSIWYG (what you see is what you get) editor to your site. It’s open source and easy to customize.

10. Bootstrap Star Rating

The Bootstrap star rating plugin is one that allows you to add a rating functionality to your websites. You have the option to rate things from 1 – 5 stars, or to give them no rating.

5 jQuery Plugins for Form Validation

November 1, 2016 by Krishna Srinivasan Leave a Comment

Writing your own custom validation rules is sometimes necessary, but it can also be really time-consuming. Any of the following lightweight plugins will do most of the validation code writing for you.

1. quickValidation.js

quickValidation allows you to define the validation rules directly within the HTML input tags. You can also use this plugin to insert custom some custom error text.

2. Ketchup Plugin

Ketchup comes with 18 validations, but you can easily expand on these by writing your own (or tweaking the existing ones). The plugin is also really lightweight.

3. jQuery Validation Plugin

This client side validation plugin has many validations methods included with the install, but as with the Ketchup plugin, it’s pretty easy to write your own.

4. Validatr

Validatr uses HTML input attributes to perform validation and will use native validation wherever possible.

5. jQuery Super Labels Plugin

This plugin is a lot like the ones listed above, except it comes with a little bit of smooth animation. When an input item is focused on, the label will slide to the left of the input, and then the label will fade out after a value is entered.

JQuery – How To Add Icon in the Dropdown List Box

June 6, 2014 by Krishna Srinivasan Leave a Comment

This tutorial explains how to set icon in the drop down list box in jQuery. The following example shows setting icon for particular values in the drop down menu list. In this example, we are using two groups within select element. We could see that, we have set data (‘active’) to 0; it means that options which are defined with data-active=0, only those options will display with dot circle icon with green color.

The select2 is a jQuery based replacement for select boxes. It gives some extra functionality and makes select boxes more users friendly. If you want to use this functionality, then you have to import the plugin in your web page. It provides support for searching, remote data sets and infinite scrolling of results. Let’s see the example how to set the icon in the dropdown list.

JQuery Select2 Plugin Example

[code lang=”xml”]
<html>
<head>
<title>JQuery-Setting Icon in the Dropdown List Box</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ivaynberg.github.io/select2/select2-3.4.5/select2.js" type="text/javascript"></script>
<link href="http://ivaynberg.github.io/select2/select2-3.4.5/select2.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<style>
body {
padding: 10px;
}
.fa-dot-circle-o {
float: right;
line-height: 20px;
color:green;
}
</style>
</head>
<body>
<select id="myval" style>
<optgroup label="My First Group">
<option value="0" data-active="0">Hello!!!</option>
<option value="1" data-active="1">Dot Circle 1</option>
<option value="2" data-active="0">Dot Circle 2</option>
</optgroup>
<optgroup label="My Second Group">
<option value="2" data-active="0">Dot Circle 3</option>
<option value="3" data-active="1">Dot Circle 4</option>
<option value="3" data-active="0">Dot Circle 5</option>
</optgroup>
</select>
<script>
$("#myval").select2({
width: "50%",
formatResult: function (state) {
if (!state.id) return state.text;
if ($(state.element).data(‘active’) == "0") {
return state.text + "<i class=’fa fa-dot-circle-o’></i>";
} else {
return state.text;
}
},
formatSelection: function (state) {
if ($(state.element).data(‘active’) == "0") {
return state.text + "<i class=’fa fa-dot-circle-o’></i>";
} else {
return state.text;
}
}
});
</script>
</body>
</html>
[/code]

As shown in the above script, we have included external resources select2.js, select2.css and font-awesome.css to run the program correctly. The .select2 is a jQuery based replacement for select boxes which provides support for searching, scrolling of result etc and font-awesome gives scalable vector icons that can be customized instantly such as size, color or anything can be done with use of CSS.
We are using two groups within select element. We could see that, we have set data (‘active’) to 0; it means that options which are defined with data-active=0, only those options will display with dot circle icon with green color.
In script we are using select2 jQuery plugin which uses id of the select element to display dropdown list box. It also uses formatResult method which formats the item for display in the input box once it is selected. Each line is row of data which passes to formatResult method and formatSelection method is used to change the look of the selected element in the document.
Moving forward, formatResult function contains parameter called state which checks for data active=0. The elements which matches with data active=0, returns with green color dot circle in the dropdown list box and as mentioned in the above statement, the formatSelection used to change look of the matched element in the document.

JQuery Select2 Plugin Demo

When you run the above example, you would get the following output:

Run JQuery Select2 Plugin Demo