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


آخرین ارسال های تالار مشاهده انجمن
شمسی سازی Bookings for WooCommerce 0 پاسخ 41 بازدید Google Scholar 1 پاسخ 877 بازدید افزونه پرداخت با تتر 2 پاسخ 1035 بازدید درج اگهی تبلیغاتی چگونه است؟ 0 پاسخ 3 بازدید Open Journal Systems (OJS) 0 پاسخ 1706 بازدید ارز ووکامرس 2 پاسخ 1380 بازدید افزونه گرافیست 1 پاسخ 1281 بازدید آموزش تغییر استایل بخش مدیریت سفارشات 1 پاسخ 1822 بازدید خرابی قالب سایت اسکریپت ها 2 پاسخ 1763 بازدید لینک قالب کلینیک بهداشتی پزشکی Medizco برای وردپرس 1 پاسخ 1227 بازدید
تبلیغات
تبلیغات تبلیغات

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

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
کلمات کلیدی پست :
مطالب مرتبط
12,306افزونه نمایش گوگل آنالیز در داشبورد وردپرس Google Analytics Dashboard for WP تاریخ : 2016/02/16
13,833دانلود تمامی قالب های الگانت تمز + افزونه ها تاریخ : 2019/05/11
67,565اسکریپت مدیریت ارتباط با مشتری Perfex نسخه 3.0.0 تاریخ : 2022/12/21
14,104اسکریپت آپلود سنتر و اشتراک فایل فایل BitDrop تاریخ : 2015/03/28
11,149اسکریپت آواتار ساز Face Builder نسخه 1.0.4 تاریخ : 2016/06/2
7,672اسکریپت فضای آنلاین نگهداری تصاویر ImgHosting تاریخ : 2020/08/6
13,060قالب زیبای مدیریت وب سایت NEON به صورت HTML تاریخ : 2015/01/2
7,710اسکریپت شبکه اجتماعی SocialBuzz نسخه 1.1 تاریخ : 2016/04/5
15,578اسکریپت دایرکتوری فایل PHP FileList فارسی تاریخ : 2015/03/11
13,896اسکریپت خبرخوان اتوماتیک RSS Auto Pilot نسخه 2.5 تاریخ : 2016/05/30
16,623قالب میربانی هاستینگ Geek Host فارسی به صورت HTML تاریخ : 2015/03/24
7,306افزودن خودکار کدهای دلخواه به انتهای مطالب در وردپرس تاریخ : 2016/04/20
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file
تبلیغات