| Felix Meschberger | 529eb5a | 2009-09-15 11:37:08 +0000 | [diff] [blame] | 1 | // JavaScript Document |
| 2 | // Tab World From BenchSketch.com |
| 3 | // Benchsketch.com/bquery/tab.html for documentation |
| 4 | // You can use it FREE!!! Yay. |
| 5 | // Let me know how it works, or send suggestions, comments, requests to benchsketch@gmail.com |
| 6 | // Thanks |
| 7 | |
| 8 | (function($){ |
| 9 | $.fn.extend({ |
| 10 | |
| 11 | // tabworld function |
| 12 | tabworld: function(options){ |
| 13 | |
| 14 | // Get the user extensions and defaults |
| 15 | var opts = $.extend({}, $.fn.tabworld.defaults, options); |
| 16 | |
| 17 | // Content location |
| 18 | if(opts.contloc=="none"){ |
| 19 | contloc=$(this).parent(); |
| 20 | }else{ |
| 21 | contloc=opts.contloc; |
| 22 | } |
| 23 | // Content location |
| 24 | if(opts.tabloc=="none"){ |
| 25 | tabloc=$(this).parent(); |
| 26 | }else{ |
| 27 | tabloc=opts.tabloc; |
| 28 | } |
| 29 | |
| 30 | // better define some stuff for safety |
| 31 | var newli="",newdiv=""; |
| 32 | |
| 33 | // Start Building Tabs |
| 34 | return this.each(function(i){ |
| 35 | |
| 36 | |
| 37 | //start developing basis |
| 38 | now=$(this); |
| 39 | nowid=now.attr("id"); |
| 40 | now.addClass(opts.color); |
| 41 | |
| 42 | // tab maker function |
| 43 | // $("#"+nowid+" li").each(function(i){ // lets hide that for now |
| 44 | $("#"+nowid+" > li").each(function(i){ |
| 45 | |
| 46 | tabli = $(this); |
| 47 | // taba = $('#'+nowid+" > li q"); |
| 48 | taba = tabli.children("q"); |
| 49 | $(this).addClass("removeme"); |
| 50 | tabcont = taba.html(); |
| 51 | $(".removeme q").remove(); |
| 52 | licont = tabli.html(); |
| 53 | $(this).remove(); |
| 54 | |
| 55 | newli += "<li rel='"+nowid+"-"+i+"'><a>"+licont+"</a></li>"; |
| 56 | newdiv += "<div id='"+nowid+"-"+i+"'>"+tabcont+"</div>"; |
| 57 | |
| 58 | }); |
| 59 | |
| 60 | // Something weird to gain the location |
| 61 | now.remove(); |
| 62 | $(tabloc).append("<ul id='"+nowid+"-tabworld' class='"+opts.color+"'>"+newli+"</ul>"); |
| 63 | // Fix the ul |
| 64 | // $("#"+nowid).append(newli); |
| 65 | // Find the Parent then append the divs |
| 66 | // var parent = $("#"+nowid).parent(); |
| 67 | newdiv = "<div id='"+nowid+"content' class='tabcont'><div class='"+opts.area+"'>"+newdiv+"</div></div>"; |
| 68 | newdiv = newdiv.replace(/\/>/,">"); |
| 69 | $(contloc).append(newdiv); |
| 70 | |
| 71 | |
| 72 | // Find the default |
| 73 | ndef = nowid+"-"+opts.dopen; |
| 74 | ncon = nowid+"content ."+opts.area+" > div"; |
| 75 | $('#'+ncon).hide(); |
| 76 | $('#'+ndef).show(); |
| 77 | //$('#'+ndef+" > div").show(); |
| 78 | |
| 79 | deftab = $('li[rel='+ndef+"]"); |
| 80 | deftab.addClass(opts.tabactive); |
| 81 | deftab.children("a").addClass(opts.tabactive); |
| 82 | // Seperate function to start the tabbing |
| 83 | $("#"+nowid+"-tabworld >li").click(function(){ |
| 84 | here=$(this); |
| 85 | nbound=here.attr("rel"); |
| 86 | |
| 87 | // Make the active class / remove it from others |
| 88 | $("#"+nowid+"-tabworld > li").removeClass(opts.tabactive); |
| 89 | $("#"+nowid+"-tabworld > li a").removeClass(opts.tabactive); |
| 90 | here.addClass(opts.tabactive); |
| 91 | $("."+opts.tabactive+">a").addClass(opts.tabactive); |
| 92 | |
| 93 | // The real action! Also detirmine transition |
| Felix Meschberger | 6754bab | 2009-09-22 09:54:28 +0000 | [diff] [blame] | 94 | if(!opts.speed){ |
| 95 | $('#'+ncon+':visible').hide(); |
| 96 | $('#'+nbound).find("div").show(); |
| 97 | $('#'+nbound).show(); |
| 98 | }else if(opts.transition=="slide"){ |
| Felix Meschberger | 529eb5a | 2009-09-15 11:37:08 +0000 | [diff] [blame] | 99 | $('#'+ncon+':visible').slideUp(opts.speed, function(){ |
| 100 | $('#'+nbound).find("div").show(); |
| 101 | $('#'+nbound).slideDown(opts.speed); |
| 102 | }); |
| 103 | }else if (opts.transition=="fade"){ |
| 104 | $('#'+ncon+':visible').fadeOut(opts.speed, function(){ |
| 105 | $('#'+nbound).find("div").show(); |
| 106 | $('#'+nbound).fadeIn(opts.speed); |
| 107 | }); |
| 108 | }else{ |
| 109 | $('#'+ncon+':visible').hide(opts.speed, function(){ |
| 110 | $('#'+nbound).find("div").show(); |
| 111 | $('#'+nbound).show(opts.speed); |
| 112 | }); |
| 113 | } |
| 114 | |
| 115 | }); |
| 116 | |
| 117 | });// end return each (i) |
| 118 | }// end tabworld |
| 119 | })// end $.fn.extend |
| 120 | |
| 121 | // Defaults |
| 122 | $.fn.tabworld.defaults = { |
| 123 | mislpace:'none', |
| 124 | speed:'fast', |
| 125 | color:'menu', |
| 126 | area:'space', |
| 127 | tabloc:'none', |
| 128 | contloc:'none', |
| 129 | dopen:0, |
| 130 | transition:'fade', |
| 131 | tabactive:'tabactive' |
| 132 | }; // end defaults |
| 133 | |
| 134 | })(jQuery);// end function($) |