How to create custom Jquery plugin and use it ?
.............................................................................................................................................................................
Create simple sliderPlugin code
(function($) {
$.fn.sliderPlugin = function(options) {
options = $.extend({}, $.fn.sliderPlugin.defaults,options);
return this.each(function() {
$(this)
.bind('click', function() {
$(this).next().slideToggle(
options.duration,
options.complete
);
});
});
$.fn.sliderPlugin.defaults = {
duration: 'fast',
complete: null
};
};
})(jQuery);
Save it "jquery.sliderPlugin.js" and follow the calling procedure.
.........................................................................................................................................................................
(call custom plugin)
# html(index.html)
<!DOCTYPE html>
<html>
<head>
<title>custom plugin</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<script src="jquery.sliderPlugin.js" type="text/javascript"></script>
</head>
<body>
<h2>Fill up form and hit submit</h2>
<div id="content_pane">
<h3>Information</h3>
<p id="shower" class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx.</p>
<h3>Metadata</h3>
<p class="pane_toggler">Lorem ipsum dolor sit amet, amet coram regis suam non coepit cenam veniebant est in lucem exitum vivit in. Maria cum unde tu bestias terras se ad te finis puellam ad suis alteri si. Manu in lucem exempli paupers coniunx2.</p>
</div>
</body>
</html>
................................................................................................................................................................................
#css(style.css)
body{
font-family:Verdana;
font-size:13px;
}
h2{
text-align:center;
}
#content_pane{
width:400px;
margin:0 auto;
overflow:hidden;
border:1px solid #ccc;
border-radius:5px;
padding:10px;
}
h3{
text-align:center;
padding:5px;
background:#ddd;
border:1px solid #ccc;
cursor:pointer;
}
.pane_toggler{
}
...............................................................................................................................................................................
#javascript(script.js)
$(document).ready(function () {
$('h3').sliderPlugin({
duration: 500,
complete: function(){
alert("complete");
}
});
});
.................................................................................................................................................................................