চমৎকার দুইটা jQuery প্লাগিন এর ব্যাবহারঃ

চমৎকার দুইটা jQuery প্লাগিন এর ব্যাবহারঃ

   ১/ single-page-nav-master
			২/ jquery.nicescroll-master


 ******single-page-nav-master এর ব্যাবহার******
--------------------------------------------------

ধাপ-১ঃ প্রথমে এই লিঙ্ক থেকে https://github.com/ChrisWojcik/single-page-nav ,  single-page-nav-master এর প্লাগিন টি  download করলাম ।
----
ধাপ-২ঃ মুল ফোল্ডারে এর মধ্যে  প্লাগিন এর একটি ফোল্ডার নিলাম ।
-----
ধাপ-৩ঃ index.html ফাইলে body তে main.js যেখানে আছে তার উপরে প্লাগিন টি কল করলাম <script type="text/javascript" src="jquery.singlePageNav.min.js"></script>
-----
ধাপ-৪ঃ  main.js ফাইলে প্লাগিন টির কাস্তমাইজ করলাম । প্লাগিন টির অনেক গুলো প্যারামিটার আছে, চাহিদা অনুযায়ী প্যারামিটার ব্যাবহার করলাম ।
-----
  নিম্নে jQuery কোড গুলঃ
																									// One page Navigation
$(document).ready(function() {
	$('ul#nav_menu').singlePageNav({
		offset: $('div.main_menu_area').outerHeight(),
		speed: 800,
		currentClass: 'active',
		filter: ':not(.external)',
	});
});

===================================================================================================================================================

																			*******jquery.nicescroll-master এর ব্যাবহার*******
           -----------------------------------------------------------------

এই প্লাগিন দিয়ে scroll bar style করা হয় ।

ধাপ-১ঃ প্রথমে এই লিঙ্ক থেকে https://github.com/inuyaksa/jquery.nicescroll ,  jquery.nicescroll-master এর প্লাগিন টি  download করলাম ।
-----
ধাপ-২ঃ মুল ফোল্ডারে এর মধ্যে  প্লাগিন এর একটি ফোল্ডার নিলাম ।
-----
ধাপ-৩ঃ index.html ফাইলে body তে main.js যেখানে আছে তার উপরে প্লাগিন টি কল করলাম<script type="text/javascript" src="jquery.nicescroll.min.js"></script>
-----
ধাপ-৪ঃ  main.js ফাইলে প্লাগিন টির কাস্তমাইজ করলাম । প্লাগিন টির অনেক গুলো প্যারামিটার আছে, চাহিদা অনুযায়ী প্যারামিটার ব্যাবহার করলাম ।
-----
 নিম্নে jQuery কোড গুলঃ

// Nice Scroll Bar + Smooth Scroll
$(document).ready(function() {
	$("html").niceScroll({
		cursorcolor: 'red',
		cursorwidth: '10px',
		cursorborder: '1px solid #000',
		cursorborderradius: '0px',
		zindex: '99',
		scrollspeed: '60',
		mousescrollstep: '40',

	});
	$("#custom_scroll").niceScroll(".custom_scroll_content",{
		cursorcolor: 'red',
		cursorwidth: '10px',
		cursorborder: '1px solid #000',
		cursorborderradius: '0px',
		zindex: '99',
		scrollspeed: '60',
		mousescrollstep: '40',
	});
});