জেকোয়েরি ট্যাব সিস্টেম (jQuery tab system tutorial)
এবার একটি ট্যাব সিস্টেম তৈরী করে দেখাচ্ছি
index.html ফাইল
01.<!DOCTYPE html>02.<html>03.<head>04.<title>Webcoachbd 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>09. 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.free-bangladesh.com">Who behind behind this | About us</a>26.</li>27.<li>28.<a href="http://www.free-bangladesh.com">HTML tutorials</a>29.</li>30.<li>31.<a href="http://www.free-bangladesh.com">Jquery Tutorials</a>32.</li>33.<li>34.<a href="http://www.free-bangladesh.com">Contact us if need</a>35.</li>36.</ul>37.<ul id="favorite" class="tab_list">38.<li>39.<a href="http://www.free-bangladesh.com"></a>40.</li>41.<li>42.<a href="http://www.free-bangladesh.com">this is our favorite post</a>43.</li>44.<li>45.<a href="http://www.free-bangladesh.com">Short Sale Info</a>46.</li>47.<li>48.<a href="http://www.free-bangladesh.com">Testimonials</a>49.</li>50.<li>51.<a href="http://www.free-bangladesh.com">Contact</a>52.</li>53.</ul>54.<ul id="all_time" class="tab_list">55.<li>56.<a href="http://www.free-bangladesh.com">Mortgage Forgiveness Debt Relief Act</a>57.</li>58.<li>59.<a href="http://www.free-bangladesh.com">5 Reasons to Hire Us</a>60.</li>61.<li>62.<a href="http://www.free-bangladesh.com">this is our favorite post</a>63.</li>64.<li>65.<a href="http://www.free-bangladesh.com">this is our fav post 2</a>66.</li>67.</ul>68.</div>69.</body>70.</html>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.}29. 30. 31.#tab_bar li{32.list-style:none;33.float:left;34. 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.}01.//tab slider jquery code02.$(document).ready(function(){//Default view03.$('#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 clicks07.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 clicks14.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 clicks21.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.});fadeIn() এবং fadeOut() মেথডদুটি যথাক্রমে show() এবং hide() এর মতই শুধু দৃশ্যমান বা অদৃশ্যমান হওয়ার সময় একটু উজ্জল হবে।
এই মেথডে প্রথম প্যারামিটার হিসেবে কোন সংখ্যা (যেটা স্পিড নির্দেশ করবে) এবং এরপর যেকোন কলব্যাক ফাংশন দিতে পারেন।
0 মন্তব্য(গুলি):
Post a Comment