در این مطلب آموزش ایجاد تب بندی با جی کوئری را برای کاربران عزیز قرار داده ایم. ایجاد تب بندی با جی کوئری یکی از مواردی بوده که همه ماها مطمئنا حداقل یک بار رو باهاش برخورد داشتیم و توی طرح ها و سایت ها مون خواستیم که از اون استفاده کنیم. از طرف دیگه بحث امروز طراحی وب دنیا، طرح های واکنش گرا یا 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>
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 { 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>
و سپس تابع رو فراخوانی می کنیم :
<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>
برگرفته از : میهن لرن
برای تازه شدن دیر نیست.
موفق و پیروز باشید…
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۱۳ شهریور ۱۳۹۳
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
سلام. ممنونم، لطف دارید.
از بخش دسته بندی میتونید پیدا کنید، موجود هست
اگر مقدور است لینک دانلود فایل jquery.responsiveTabs.js را داخل آموزش قرار دهید
با تشکر فراوان