JQuery Slider PlugIn Effects Example with Codes
Slider PlugIn is a Effects That You can Use to Expands or Collapse a Menu or Somethings Else.
Overview: What You will Need:
You will Needs 5 Files:
index.html
style.css
script.js
sliderPlugin.js
jquery_latest.js
Note: Put All files In same Folder. Downlaod jquery_latest.js from ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
Code For index.html
<!DOCTYPE html>
<html>
<head>
<title>MegaTech24 Jquery Slider Plugin development tutorials With Source Code</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="jquery_latest.js" type="text/javascript"></script>
<script src="sliderPlugin.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="content_pane">
<h3>SEO Giude</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>Meditation</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>
Code For style.css
body{
font-family:Verdana;
font-size:13px;
}
#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{
}
Code For script.js
$(document).ready(function() {
$('h3').sliderPlugin({
duration: 500,
complete: function(){
alert('Sliding finished');
}
});
});
Code For sliderPlugin.js
(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);
Please Comments If You have any Problems.
If You Like This Article Please Like US on Facebook.
Thank You for reading My Article.
No comments:
Post a Comment
Thank You for Your Comment
Note: Only a member of this blog may post a comment.