jQuery tab system tutorial | SP Foundationbd

এবার একটি Tab system তৈরী করে দেখাচ্ছি

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title> SPFoundationbd Tab System tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css" />

06.<script src="/jquery_latest.js" type="text/javascript"></script>

07.<script src="/script.js" type="text/javascript"></script>

08.</head>

  1. 10.<body>

11.<div id="tab_system">

12.<ul id="tab_bar">

13.<li>

14.<a href="#">Current Hits</a>

15.</li>

16.<li>

17.<a href="#">Our Favourites</a>

18.</li>

19.<li>

20.<a href="#">All Time</a>

21.</li>

22.</ul>

23.<ul id="current" class="tab_list">

24.<li>

25.<a href="http://www.spfoundationbd.com">Who behind behind this | About us</a>

26.</li>

27.<li>

28.<a href="http://www. spfoundationbd.com">HTML tutorials</a>

29.</li>

30.<li>

31.<a href="http://www. spfoundationbd.com">Jquery Tutorials</a>

32.</li>

33.<li>

34.<a href="http://www. spfoundationbd.com">Contact us if need</a>

35.</li>

36.</ul>

37.<ul id="favorite" class="tab_list">

38.<li>

39.<a href="http://www. spfoundationbd.com"></a>

40.</li>

41.<li>

42.<a href="http://www. spfoundationbd.com">this is our favorite post</a>

43.</li>

44.<li>

45.<a href="http://www. spfoundationbd.com">Short Sale Info</a>

46.</li>

47.<li>

48.<a href="http://www. spfoundationbd.com">Testimonials</a>

49.</li>

50.<li>

51.<a href="http://www. spfoundationbd.com">Contact</a>

52.</li>

53.</ul>

54.<ul id="all_time" class="tab_list">

55.<li>

56.<a href="http://www. spfoundationbd.com">Mortgage Forgiveness Debt Relief Act</a>

57.</li>

58.<li>

59.<a href="http://www. spfoundationbd.com">5 Reasons to Hire Us</a>

60.</li>

61.<li>

62.<a href="http://www. spfoundationbd.com">this is our favorite post</a>

63.</li>

64.<li>

65.<a href="http://www. spfoundationbd.com">this is our fav post 2</a>

66.</li>

67.</ul>

68.</div>

69.</body>

70.</html>

style.css ফাইল

01.body{

02.font-family:Verdana;

03.font-size:13px;

04.}

05.ul{

06.padding:0;

07.margin:5px 0 0 0;

08.}

09.#tab_system{

10.width:400px;

11.margin:0 auto;

12.overflow:hidden;

13.border:1px solid #ccc;

14.border-radius:5px;

15.padding:10px;

16.}

17.18.19.#tab_bar{

20.float:left;

21.}

22.#tab_bar li  .running{

23.background:#fff;

24.border-top:1px solid #ccc;

25.border-right:1px solid #ccc;

26.border-left:1px solid #ccc;

27.color:#000;

28.}

  1. 30. 31.#tab_bar li{

32.list-style:none;

33.float:left;

  1. 35. 36.}

37.#tab_bar li a{

38.padding:5px;

39.text-decoration:none;

40.background:#333;

41.border:#111;

42.color:#fff;

43.}

44.#tab_bar li a:nth-child(1),#tab_bar li a:nth-child(2){

45.margin-right:2px;

46.}

47.#tab_system .tab_list li{

48.list-style:none;

49.}

50.#tab_system .tab_list{

51.float:left;

52.border-left:1px solid #ccc;

53.border-right:1px solid #ccc;

54.border-bottom:1px solid #ccc;

55.min-width:260px;

56.}

57.#tab_system .tab_list li a{

58.padding:5px;

59.text-decoration:none;

60.display:block;

61.float:left;

62.clear:both;

63.}

64.#tab_system .tab_list li a:hover{

65.text-decoration:underline;

66.}

script.js ফাইল

01.//tab slider jquery code

02.$(document).ready(function(){//Default view

03.$('#current').show();

04.$('#tab_bar li:nth-child(1) a').addClass('running');

05.$('#favorite,#all_time').hide();

06.$('#tab_bar li:nth-child(1) a').click(function(event){//Fire when Current hit clicks

07.event.preventDefault();

08.$(this).addClass('running');

09.$('#tab_bar li:nth-child(2) a,#tab_bar li:nth-child(3) a').removeClass('running');

10.$('#current').fadeIn(500);

11.$('#favorite,#all_time').hide();

12.});

13.$('#tab_bar li:nth-child(2) a').click(function(event){//Fire when All time clicks

14.event.preventDefault();

15.$(this).addClass('running');

16.$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(3) a').removeClass('running');

17.$('#favorite').fadeIn(500);

18.$('#current,#all_time').hide();

19.});

20.$('#tab_bar li:nth-child(3) a').click(function(event){//Fire when Favorite clicks

21.event.preventDefault();

22.$(this).addClass('running');

23.$('#tab_bar li:nth-child(1) a,#tab_bar li:nth-child(2) a').removeClass('running');

24.$('#all_time').fadeIn(500);

25.$('#favorite,#current').hide();

26.});

27.});

ব্যাখ্যা:এখানে নতুন দুটি function ব্যবহার হয়েছে একটি হচ্ছে preventDefault(). এটা event অবজেক্টের একটি মেথড,এখানে এর কাজ হচ্ছে যখনই ফাকা লিংকে click হবে  তখন সে ডিফল্ট একশন রুখে দেবে।এটা না থাকলে আমাদের উপরে ফাকা লিংক (href="#" থাকলে ফাকা লিংক) ৩টিতে click করলে কাজ হত তবে ক্লিকের পর পেজ reset হওয়ার মত একটু নড়েচড়ে উঠত যা বিরক্তিকর।

fadeIn() এবং fadeOut() মেথডদুটি যথাক্রমে show() এবং hide() এর মতই শুধু দৃশ্যমান বা অদৃশ্যমান হওয়ার সময় একটু উজ্জল হবে।

এই মেথডে প্রথম প্যারামিটার হিসেবে কোন সংখ্যা (যেটা স্পিড নির্দেশ করবে) এবং এরপর যেকোন কলব্যাক function দিতে পারেন।