آموزش ایجاد تب بندی با جی کوئری

2 دیدگاه

در این مطلب آموزش ایجاد تب بندی با جی کوئری را برای کاربران عزیز قرار داده ایم. ایجاد تب بندی با جی کوئری یکی از مواردی بوده که همه ماها مطمئنا حداقل یک بار رو باهاش برخورد داشتیم و توی طرح ها و سایت ها مون خواستیم که از اون استفاده کنیم. از طرف دیگه بحث امروز طراحی وب دنیا، طرح های واکنش گرا یا responsive هست. در این پست یک تب بندی ریسپانسیو با جی کوئری را برای کاربران عزیز قرار داده ایم. لازم به ذکر است که یکی از بهترین و ساده ترین پلاگین هایی که میشه برای این منظور استفاده کرد افزونه‌ی Responsive Tabs می باشد.

جهت مشاهده آموزش ایجاد تب بندی با جی کوئری به ادامه مطلب مراجعه نمایید.

گام اول : ساختار HTML

اولین قدم مثل همیشه تعیین ساختار html ی هست که باید استفاده کنیم.

<div id="responsiveTabsDemo">
    <ul>
        <li><a href="#tab-1"> .... </a></li>
        <li><a href="#tab-2"> .... </a></li>
        <li><a href="#tab-3"> .... </a></li>
    </ul>
 
    <div id="tab-1"> ....... </div>
    <div id="tab-2"> ....... </div>
    <div id="tab-3"> ....... </div>
</div>

<ul>

</ul>

</div>

html مون از دو بخش تشکیل شده، بخش اول یک لیست هست که برای دکمه های تب ها استفاده می شه و بخش دوم تگ های div با آی دی های منحصر به فرد هستند که محتوای تب ها داخل اون ها نمایش داده خواهد شد.

گام دوم : کدهای CSS

کدهای سی اس اسی که استفاده می‌کنیم دو بخش هستند. بخش اول یک نباید تغییری توش بدین مربوط به ریسپانسیو کردن مون هست.

.r-tabs .r-tabs-nav {
    margin: 0;
    padding: 0;
}
 
.r-tabs .r-tabs-tab {
    display: inline-block;
    margin: 0;
    list-style: none;
}
 
.r-tabs .r-tabs-panel {
    padding: 15px;
    display: none;
}
 
.r-tabs .r-tabs-accordion-title {
    display: none;
}
 
.r-tabs .r-tabs-panel.r-tabs-state-active {
    display: block;
}
 
/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
    .r-tabs .r-tabs-nav {
        display: none;
    }
 
    .r-tabs .r-tabs-accordion-title {
        display: block;
    }
}

.r-tabs .r-tabs-nav {

margin: 0;

padding: 0;

}

.r-tabs .r-tabs-tab {

display: inline-block;

margin: 0;

list-style: none;

}

.r-tabs .r-tabs-panel {

padding: 15px;

display: none;

}

.r-tabs .r-tabs-accordion-title {

display: none;

}

.r-tabs .r-tabs-panel.r-tabs-state-active {

display: block;

}

/* Accordion responsive breakpoint */

@media only screen and (max-width: 768px) {

.r-tabs .r-tabs-nav {

display: none;

}

.r-tabs .r-tabs-accordion-title {

display: block;

}

و بخش دوم استایل ظاهری هست که به کار میدیم:

.r-tabs {
    position: relative;
}
 
.r-tabs .r-tabs-nav {
    border-bottom: 1px solid #ccc;
}
 
.r-tabs .r-tabs-nav .r-tabs-tab {
    position: relative;
    top: 1px;
}
 
.r-tabs .r-tabs-nav .r-tabs-anchor {
    background: #00aadd;
    margin-bottom: 3px;
    padding: 10px 12px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
}
 
.r-tabs .r-tabs-nav .r-tabs-state-active {
    background-color: #fff;
    margin-bottom: -1px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
 
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
    opacity: 0.5;
}
 
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
    color: #00aadd;
    background-color: #fff;
}
 
.r-tabs .r-tabs-panel {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin-bottom: 3px;
}
 
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
    display: block;
    padding: 10px;
    background-color: #00aadd;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    margin-bottom: 3px;
}
 
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
    opacity: 0.5;
}
 
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
    background-color: #fff;
    color: #00aadd;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin-bottom: 0;
}

.r-tabs {

position: relative;

}

.r-tabs .r-tabs-nav {

border-bottom: 1px solid #ccc;

}

.r-tabs .r-tabs-nav .r-tabs-tab {

position: relative;

top: 1px;

}

.r-tabs .r-tabs-nav .r-tabs-anchor {

background: #00aadd;

margin-bottom: 3px;

padding: 10px 12px;

display: inline-block;

text-decoration: none;

color: #fff;

font-weight: bold;

}

.r-tabs .r-tabs-nav .r-tabs-state-active {

background-color: #fff;

margin-bottom: -1px;

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

}

.r-tabs .r-tabs-nav .r-tabs-state-disabled {

opacity: 0.5;

}

.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {

color: #00aadd;

background-color: #fff;

}

.r-tabs .r-tabs-panel {

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

border-left: 1px solid #ccc;

margin-bottom: 3px;

}

.r-tabs .r-tabs-accordion-title .r-tabs-anchor {

display: block;

padding: 10px;

background-color: #00aadd;

color: #fff;

font-weight: bold;

text-decoration: none;

margin-bottom: 3px;

}

.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {

opacity: 0.5;

}

.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {

background-color: #fff;

color: #00aadd;

border-top: 1px solid #ccc;

border-right: 1px solid #ccc;

border-left: 1px solid #ccc;

margin-bottom: 0;

}

گام سوم : جی کوئری

و در نهایت باید کتابخانه جی کوئری و فایل افزونه مون رو به صفحه پیوست کنیم :

<script src="js/jquery-2.1.0.min.js"></script>
<script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>

1 2	<script src="js/jquery-2.1.0.min.js"></script> <script src="js/jquery.responsiveTabs.js" type="text/javascript"></script>

و سپس تابع رو فراخوانی می کنیم :

<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').responsiveTabs({
            rotate: false,
            startCollapsed: 'accordion',
            collapsible: 'accordion',
            setHash: true,
            disabled: [3,4]
        });
 
        $('#start-rotation').on('click', function() {
            $('#horizontalTab').responsiveTabs('active');
        });
        $('#stop-rotation').on('click', function() {
            $('#horizontalTab').responsiveTabs('stopRotation');
        });
        $('#start-rotation').on('click', function() {
            $('#horizontalTab').responsiveTabs('active');
        });
        $('.select-tab').on('click', function() {
            $('#horizontalTab').responsiveTabs('activate', $(this).val());
        });
 
    });
</script>

$(document).ready(function () {

$('#horizontalTab').responsiveTabs({

rotate: false,

startCollapsed: 'accordion',

collapsible: 'accordion',

setHash: true,

disabled: [3,4]

});

$('#start-rotation').on('click', function() {

$('#horizontalTab').responsiveTabs('active');

});

$('#stop-rotation').on('click', function() {

$('#horizontalTab').responsiveTabs('stopRotation');

});

$('#start-rotation').on('click', function() {

$('#horizontalTab').responsiveTabs('active');

});

$('.select-tab').on('click', function() {

$('#horizontalTab').responsiveTabs('activate', $(this).val());

});

</script>

برگرفته از : میهن لرن

برای تازه شدن دیر نیست.

موفق و پیروز باشید…

به این مطلب امتیاز دهید

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش پروژه محور طراحی وب سایت پزشک یاب با بوت استرپ

انتشار: ۱۳ شهریور ۱۳۹۳

آموزش ایجاد تب بندی با جی کوئری

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط