jQuery Custom plugin

In order to implement the jQuery Custom Plugin add below code to HTML,

Step I:  TML Page Code

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>

I am the Custom Plug-In

<input type=”button” id=”btn” value=”Custom”/>
<hr />
<input type=”button” id=”btnevent” value=”Click Me”/>

I will be set the Background on the button Click

</body>
</html>

Step II: Add the Nuget installation package of jQuery 2.1.4

Step III: Add references of jQuery-2.1.4.min.js to Logic.JS

Step IV: Add below code to Logic.JS

/// <reference path=”../Scripts/jquery-2.1.4.min.js” />
/// <reference path=”../Scripts/jquery-ui-1.11.4.min.js” />

//1. IIFE
(function ($) {
$.fn.setColor = function (color) {
$(this).css(‘background-color’,color);
};

})(jQuery);
//click.<plugInName> : Means that the click event is suv=bscribed
//with the plug in Name
(function ($) {
$.fn.setColorEvent = function (color,ele) {
$(this).on(‘click.setColorEvent’, function () {
$(ele).css(‘background-color’, color);
});
};

})(jQuery);

Step V: Update the HTML Page code as below

<!DOCTYPE html>
<html>
<head>
<title></title>
http://../Scripts/jquery-2.1.4.min.js
http://Logic.js

$(document).ready(function () {
$(“div”).setColor(‘red’);
$(“#btn”).setColor(‘green’);
$(“#btnevent”).setColorEvent(‘yellow’, “#dv”);
});

</head>
<body>

I am the Custom Plug-In

<input type=”button” id=”btn” value=”Custom”/>
<hr />
<input type=”button” id=”btnevent” value=”Click Me”/>

I will be set the Background on the button Click

</body>
</html>

Step VI : Now run your HTML page to Browser and test on click button

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s