JQUERY PLUGINS
Plugins
A jQuery plugin is simply a new method that we use to extend jQuery's prototype object. By extending the prototype object you enable all jQuery objects to inherit any methods that you add. As established, whenever you call
jQuery() you're creating a new jQuery object, with all of jQuery's methods inherited.
jQuery is great. It’s cross-browser, easy to learn, and makes adding interactivity to your website a breeze. It also comes with plenty of plugins to do almost whatever you need it to do.
But what if you can’t find just the right plugin to suit your needs? Or you’re just looking to keep your project DRY by combining some oft-used functionality into one nice, neat package? The solution might be to roll your own plugin to meet exactly your needs.
Writing your own jQuery plugin isn’t as hard as it might seem at first. This tutorial will go through the process of writing a simple plugin, adding some options, and even perform a callback.
To Create a simple jQuery plugin as shown below and it should open on clicking the button.
{
The Given session used to knor about the JQuery PlugIns Creation
}
sample.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="JavaScript1.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
<script>
function formload() {
$("#container").hide();
$(".sam").hide();
}
function formload() {
$("#container").servicecharge("destroy").servicecharge();
$("#btn1").click(function () {
$("#container").css("border", "1px solid #333");
$("#container").css("box-shadow", "#A9A0A0 -13px -5px")
});
}
$(document).ready(function () {
$("#btn1").click(function () {
$("#container").show();
});
});
$(document).ready(function () {
$(".class").click(function () {
$("#container").hide();
});
});
</script>
<title></title>
</head>
<body onload="samp()">
<div id="container">
</div>
<input id="btn1"type="button" value="Click to View" onclick="formload()"/>
</body>
</html>
JavaScript.js (it's a Plugins Code)
(function ($) {
var methods = {
init: function ()
{ return this.each(function ()
{
var $this = $(this);
var data = $this.data('servicecharge');
if (!data)
{
var html = "<div id='form-container'>" + "<div class='heading'><label>Add/Edit Service Charge and Line of Business<span class='close' id='close' onclick='close()'><a href='HtmlPage1.html'>X</a></span><hr/><label></div>" + "<h1>Sevice Charge</h1>" + "<div id='conn'>" + "<div id='con1'>" +
"Acct System id*" + "<br />" + "Optimiz id" + "<br />" + "Rate Quantity Type*" + "<br />" + "Charge GL Code" + "<br />" + "<input type='checkbox' />" + "<br />"
+ "</div>" + "<div id='con2'>" + " <input type='text' />" + "<br />" + "accessorial" +
"<br />" + "<select><option>Option1</option><option>Option2</option></select>" +
"<br />" + "<select><option>Option1</option><option>Option2</option></select>" +
"<br />" + " <input type='text' />" + "</div>"
"</div>" + "</div>" + "</div>";
$this.append(html);
}
});
}, destroy:function () {
debugger;
return this.each(function () {
var $this = $(this);
$this.removeData('servicecharge');
$this.empty();
})
}
}
$.fn.servicecharge=function(method) {
debugger;
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('method ' + method + 'does not exists on querry.servicecharge');
}
}
})(jQuery);
stylesheet.css
*{ font-family:Verdana;
font-size:12.8px;
}
h1{
margin: 34px 2px 22px 47px;
font-size:20px;}
#container {
height:300px;
width:500px;
border:0px solid #333;
z-index:2000;
position:absolute;
margin: 132px 241px;
#close {
height:auto;
width:auto;
margin-left:190px;
z-index:3000;
font-weight:bold;
text-align:center;
}
a {
text-decoration:none;
} a:hover {
cursor:progress;
}
#form-container {
}
#con1 {
float:left;
text-align:right;line-height: 22px;
}
#con2 {
float:left;
margin-left:15px;
line-height: 21px;
}
#conn {
margin-left: 43px;
}
.heading {
background-color:#EEEEEE;
}
Thanks For Reading MY Content......
- ©Prasathvel
0 comments:
Post a Comment