خرید هاست ارزدیجیتال
حراجی دامنه های ویژهمشاهده





تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

CSS , HTML5 , اسکریپت ها , جی کوئری , ديگر اسكريپتها , متفرقه

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

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

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

کد بالا برای دو تب بندی نوشته شده است.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 10 CSS , HTML5 , اسکریپت ها , جی کوئری , ديگر اسكريپتها , متفرقه
لینک کوتاه مطلب : https://www.20script.ir/?p=8275
کلمات کلیدی پست :
مطالب مرتبط
43,247آموزش ساخت متن چشمک زن در Html با استفاده از jQuery تاریخ : 2015/06/30
13,166دانلود افزونه ساخت فرم تماس در وردپرس Contact Form Builder تاریخ : 2016/03/5
9,976اسکریپت لیست کارها به صورت ایجکس تاریخ : 2013/10/21
17,389اسکریپت نمایش 360 درجه ای محصول Easy 360 Product Viewer تاریخ : 2015/02/20
9,780اسکریپت ساخت تصاویر جعلی به سبک شبکه های اجتماعی تاریخ : 2016/06/1
13,171دانلود قالب فتوگرافی و نمونه کار Photolio نسخه 1.7.7 برای وردپرس تاریخ : 2015/10/10
14,294اسلایدر پس زمینه به صورت جی کوئری تاریخ : 2016/08/3
11,302دانلود قالب فوق العاده Enviar برای میهالیسم تاریخ : 2015/08/31
10,346دانلود قالب وردپرس رستوران و کافه Nosh نسخه 2.2.2 تاریخ : 2015/05/7
10,608افزونه وردپرس پخش کننده صوتی Royal نسخه 3.0 تاریخ : 2015/05/7
11,910دانلود قالب فروشگاهی Suave نسخه 1.6.1 برای وردپرس تاریخ : 2016/02/9
8,744اسکریپت مدیریت FTP به صورت آنلاین phpWebFTP تاریخ : 2019/10/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file