در این مطلب از سایت بیست اسکریپت ساخت یک تب زیبا با استفاده از فناوری جی کوئری و سی اس اس را آموزش میدهیم. در کد نویسی اسکریپت حاضر از جی کوئری و سی اس اس استفاده شده و با طرح و فرم مدرن و زیبایی که دارد نمای متفاوتی را به وبسایت شما هدیه می دهد. هم اکنون جهت مشاهده آموزش با ما باشد.
بخش اول HTML :
خوب کد های زیر را به هر جایی از قالب خود که می خواهید اضافه کنید.
<div id="example-one"> <ul class="nav"> <li class="nav-one"><a href="#featured" class="current">تب اول</a></li> <li class="nav-two"><a href="#core">تب دوم</a></li> <li class="nav-three"><a href="#jquerytuts">تب سوم</a></li> <li class="nav-four last"><a href="#classics">تب چهارم</a></li> </ul> <div class="list-wrap"> <ul id="featured"> <li>محتوا اینجا قرار می گیرد</li> </ul> <ul id="core" class="hide"> <li>محتوا اینجا قرار می گیرد</li> </ul> <ul id="jquerytuts" class="hide"> <li>محتوا اینجا قرار می گیرد</li> </ul> <ul id="classics" class="hide"> <li>محتوا اینجا قرار می گیرد</li> </ul> </div> <!-- END List Wrap --> </div> <!-- END Organic Tabs (Example One) -->
همون طوری که مشاهده می کنید بخش HTML از یک لیست مرتب با آی دی nav و یک عنصر div با کلاس list-wrap تشکیل شده که قسمت اول برای عنوان تب ها و بخش دوم برای محتوای آن ها می باشد. به آدرس لینک های لیست nav و ID لیست های داخلی عنصر div با کلاس list-wrap دقت کنید.
بخش دوم CSS :
استایلی که در این بخش به عناصر تعریف شده یک استایل ساده است که فقط برای اصلاح ظاهر برگه ها هست و به راحتی می تونید این بخش رو مناسب طراحی خود تغییر دهید. این استایل را به فایل مورد نظر اضافه کنید.
(function($) { $.organicTabs = function(el, options) { var base = this; base.$el = $(el); base.$nav = base.$el.find(".nav"); base.init = function() { base.options = $.extend({},$.organicTabs.defaultOptions, options); // Accessible hiding fix $(".hide").css({ "position": "relative", "top": 0, "left": 0, "display": "none" }); base.$nav.delegate("li > a", "click", function() { // Figure out current list via CSS class var curList = base.$el.find("a.current").attr("href").substring(1), // List moving to $newList = $(this), // Figure out ID of new list listID = $newList.attr("href").substring(1), // Set outer wrapper height to (static) height of current inner list $allListWrap = base.$el.find(".list-wrap"), curListHeight = $allListWrap.height(); $allListWrap.height(curListHeight); if ((listID != curList) && ( base.$el.find(":animated").length == 0)) { // Fade out current list base.$el.find("#"+curList).fadeOut(base.options.speed, function() { // Fade in new list on callback base.$el.find("#"+listID).fadeIn(base.options.speed); // Adjust outer wrapper to fit new list snuggly var newHeight = base.$el.find("#"+listID).height(); $allListWrap.animate({ height: newHeight }); // Remove highlighting - Add to just-clicked tab base.$el.find(".nav li a").removeClass("current"); $newList.addClass("current"); }); } // Don't behave like a regular link // Stop propegation and bubbling return false; }); }; base.init(); }; $.organicTabs.defaultOptions = { "speed": 300 }; $.fn.organicTabs = function(options) { return this.each(function() { (new $.organicTabs(this, options)); }); }; })(jQuery);
طریقه استفاده از پلاگین بالا :
<script type='text/javascript'> $(function() { $("#example-one").organicTabs(); $("#example-two").organicTabs({ "speed": 200 }); }); </script>
- دانلود حجم 42 کیلوبایت
- پیش نمایش
- مشکلی دارید؟ جواب خود را در پست فروم بگیرید
- منبع : بیست اسکریپت لطفا رعایت کنید