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





وینگو مارکت
تبلیغات
تبلیغات
تبلیغات تبلیغات
تبلیغات تبلیغات

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

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
کلمات کلیدی پست :
مطالب مرتبط
13,612اسکریپت فرم های آماده واکنش گرا و بوت‌ استرپ Classic تاریخ : 2018/06/11
13,064اسکریپت پیشرفته عضویت و مدیریت کاربران Kekatu تاریخ : 2018/07/19
9,983قالب وبلاگی Baskerville برای وردپرس تاریخ : 2016/03/25
9,138افزودن خودکار کدهای دلخواه به انتهای مطالب در وردپرس تاریخ : 2016/04/20
6,568اسکریپت هاستینگ رستوران ها iFood تاریخ : 2021/12/25
16,497پلاگین EventOn تقویم رویداد ها نسخه 2.2.6 برای وردپرس تاریخ : 2014/03/13
22,522اسکریپت طالع بینی ازدواج با حروف ابجد تاریخ : 2015/01/23
13,333دانلود قالب مهرنگار برای وردپرس تاریخ : 2015/09/22
2,304دانلود اسکریپت OpenAI Davinci – اسکریپت تولید محتوا با کمک هوش مصنوعی تاریخ : 2024/07/15
24,734اسکریپت فارسی چت پیشرفته ArrowChat نسخه 1.7.2 تاریخ : 2014/09/22
6,840اسکریپت پلتفرم کیف پول دیجیتال Xcash تاریخ : 2023/05/2
11,766اسکریپت ترجمه گر وب سایت iTranslate نسخه ۱.۲ تاریخ : 2015/01/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب