آموزش ساخت تب جی کوئری و سی اس اس

در این مطلب از سایت بیست اسکریپت ساخت یک تب زیبا با استفاده از فناوری جی کوئری و سی اس اس را آموزش میدهیم. در کد نویسی اسکریپت حاضر از جی کوئری و سی اس اس استفاده شده و با طرح و فرم مدرن و زیبایی که دارد نمای متفاوتی را به وبسایت شما هدیه می دهد. هم اکنون جهت مشاهده آموزش با ما باشد.

بخش اول 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 :

استایلی که در این بخش به عناصر تعریف شده یک استایل ساده است که فقط برای اصلاح ظاهر برگه ها هست و به راحتی می تونید این بخش رو مناسب طراحی خود تغییر دهید. این استایل را به فایل مورد نظر اضافه کنید.

#example-one {
    background: #eee;
    padding: 10px;
    margin: 0 0 15px 0;
    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
}
#example-one .nav {
    overflow: hidden;
    margin: 0 0 10px 0;
}
#example-one .nav li {
    width: 97px;
    float: left;
    margin: 0 10px 0 0;
}
#example-one .nav li.last {
    margin-right: 0;
}
#example-one .nav li a {
    display: block;
    padding: 5px;
    background: #959290;
    color: white;
    font-size: 10px;
    text-align: center;
    border: 0;
}
#example-one .nav li a:hover {
    background-color: #111;
}
#example-one ul {
    list-style: none;
}
#example-one ul li a {
    display: block;
    border-bottom: 1px solid #666;
    padding: 4px;
    color: #666;
}
#example-one ul li a:hover, #example-one ul li a:focus {
    background: #fe4902;
    color: white;
}
#example-one ul li:last-child a {
    border: none;
}
#example-one li.nav-one a.current, ul.featured li a:hover {
    background-color: #0575f4;
    color: white;
}
#example-one li.nav-two a.current, ul.core li a:hover {
    background-color: #d30000;
    color: white;
}
#example-one li.nav-three a.current, ul.jquerytuts li a:hover {
    background-color: #8d01b0;
    color: white;
}
#example-one li.nav-four a.current, ul.classics li a:hover {
    background-color: #FE4902;
    color: white;
}

(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>