جشنواره نوروزی سون لرن

طراحی باکس وب تب دار با jQuery (بدون افزونه)

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۱ آذر ۱۳۹۲

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

دموی باکس وب با منوی تب دار (اختصاصی سون لرن)

فهرست محتوای این مقاله

بخش HTML

<div class="box">
 <ul class="tabs">
 <li><a href="#content1" class="active" >آخرین ها</a></li>
 <li><a href="#content2" >پربازدید ها</a></li>
 <li><a href="#content3" >تصادفی</a></li>
 </ul>
 <div class="content">
 <div id="content1">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 <div id="content2">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 <div id="content3">
 <ul class="post-list" >
 <li><a href="#" >برای خواندن مطلب اول کلیک کنید</a></li>
 </ul>
 </div>
 </div>
 </div>

کد‌های HTML به صورت بالا تغییر دادیم،کلاس box از آموزش قبلی باقی مونده،ما یه لیست نامرتب برای گزینه‌های منو  اضافه کردیم و عناوین مورد نظر رو براش مشخص کردیم؛برای قسمت محتوای هر تب یه تگ div مشخص کردیم و یه شناسه با عنوان مثلا content1 یا content2 و ... بهش اختصاص دادیم و همه اینارو داخل یه تگ div دیگه با کلاس content قرار دادیم،توجه کنید که برای تگ‌های لینک قسمت منو مقدار خاصیت href رو برابر شناسه هر کدوم از تگ‌های div داخل تگ div با کلاس content قرار دادیم.داخل هر کدوم از محتوا‌ها هم یه لیست ایجاد کردیم که قراره لیست محصولا یا مطالب یا هر چیز دیگه رو به کاربر نشون بده (خلاصه محتوای مورد نظر خودتون داخلش قرار میگیره).

کد‌های jQuery

jQuery(document).ready(function(){

 jQuery('.content div:not(:first)').hide();

 jQuery('ul.tabs li a').on('click',function(){
 if(jQuery(this).hasClass('active')){return false;}
 jQuery('ul.tabs li a').removeClass('active');
 jQuery(this).addClass('active');
 var href=jQuery(this).attr('href');
 var split=href.split('#');
 jQuery('.content div').hide();
 jQuery('.content div#'+split[1]).slideDown(300);
 return false;
 });

});

خوب در قسمت کد‌های جاوا اسکریپت اول از همه تگ‌های داخل تگ content رو به جز اولی مخفیشون کردیم.بعدش برای رویداد کلیک روی هر کدوم از لینک‌های قسمت منو (تگ ul) تابعی رو نوشتیم که داخل این تابع مشخص کردیم اگه لینکی که داره کلیک میشه همین لینک هست هیچ کاری انجام نده (برای جلوگیری از بارگذاری مجدد کد‌ها مخصوصا اگه برای دریافت محتوا  از ای جکس استفاده بشه)،بعدش از همه لینک‌ها کلاس active رو برداشتیم (برای اینه که لینک فعال قبلی رو غیر فعال کنیم) و به لینک فعلی کلاس active رو اضافه کردیم،بعد ما مقدار خاصیت href لینک فعلی رو گرفتیم و داخل متغییر href قرار دادیم حالا href رو با دستور split به یه آرایه خرد کردیم (توی قسمت html توضیح دادیم که خاصیت href رو با مقداری شبیه content1 یا content2 و ... مشخص کردیم،این کار به این خاطر بود که موقع کلیک کردن روی لینک‌ها مشخص کنیم کدوم تگ content لود بشه)،بعد ما تمام تگ‌های div داخل content رو مخفی میکنیم و با دستور بعدی content مورد نظر رو لود میکنیم (با توجه به کد،مقدار اندیس 1 آرایه split مقادیری مثل content1 یا content2 و ... داره بنابراین کد یه خط مونده با آخر این مقدار رو دریافت میکنه و تگ مورد نظر رو با افکت slideDown نشون میده،خواستین افکت‌های دیگه هم بذارید(مثل fade یا bounce)).

کد‌های CSS

کد‌های استایل رو با توجه به سلیقه خودتون می‌تونید تغییر بدید.

.tabs{
 list-style: none;
 margin: 0;
 padding: 0;
 position: absolute;
 top:-29px;
 right:-1px;

}
.tabs li{
 float: right;
 margin-left: 3px;
}
.tabs li a{
 text-decoration: none;
 font-size:10pt;
 padding:6px 15px;
 background-color:#a00;
 color:#FFF;
}
.tabs li a.active{
 background-color:#0a0;
 color:#FFF;
}
.content div{
 margin-top:5px;
 font-size: 9pt;
 padding: 5px;
}
.post-list{
list-style: none;
margin-right: 10px;
}
.post-list li{
 padding-top: 10px;
}
.post-list li a{
 text-decoration: none;
 color:#888;
 font-size: 10pt;
 transition: all .1s;
 -webkit-transition: all .1s;
 -moz-transition: all .1s;
 -o-transition: all .1s;
 -ms-transition: all .1s;
}
.post-list li a:hover{
 background-color: #a00;
 padding: 5px 15px;
 color:#FFF;
 border-radius: 3px;
 font-weight: bold;
}

امیدوارم که مفید باشه براتون 🙂

دانلود سورس کد

چه امتیازی به این مقاله می دید؟
نویسنده کیوان علی محمدی
یادگیرنده ی همیشگی،برنامه نویس،نویسنده،عاشق خلق چیزهای عجیب،عاشق تحلیل داده ها، مسئول بخش فنی و هم بنیان گذار در سون لرن.

نظرات کاربران

روحانی

سلام ممنون خیلی عالی بود.
چه جوری باید به صورت دیفالت content1 بسته باشه.

یعنی تا کلیک نکینم به صورت پیش فرض تمام پنجره ها بسته باشن.

کیوان علی محمدی

سلام،توی کد جی کوئری اولین خط نوشتیم که تمام content ها مخفی بشه به غیر از اولی اون کد رو به صورت زیر اصلاح کنید.

jQuery('.content div').hide();

ص

بازم ناقص اومد.
به هر حال ممنونم،
بالاخره یه جوری حلش میکنم.

سجاد دریس

کدهاتون رو توی انجمن ارسال کنید.

ص

ظاهرا شما از من مبتدی ترید!!
گفتم که این کار رو میکنم، ولی اون دو مشکل به وجود میاد!
به هر حال خسته نباشید
ممنونم

سجاد دریس

اگرم مشکلتون حل نشد می تونید از
jquery ui یا این لینک یا این لینک یا این لینک یا …..

سجاد دریس

😐
شما سورس رو تغییر دادید
سورس اصلی رو دانلود و این کار رو انجام بدین

ص

حالا که بعد از یک هفته نظر رو تایید کردید لااقل جواب سوال رو هم نمیدید؟

سجاد دریس

توی خط پنجم کدهای جی کوئری به جای عبارت click ، عبارت mouseover رو بنویسید

ص

برای مشکل بالا div های داخل contetn رو به span و p تبدیل کردم که فکر نمیکنم کار اصولی باشه.

اما لطفا بفرمایید برای اینکه تب ها با اشاره موس باز بشن و نیازی به کلیک کردن نباشه باید چه کار کرد؟ اصلا جی کوئری وارد نیستم.
من وقتی به جای click، از hover یا mouseover استفاده میکنم دو مشکل به وجود میاد:
اول اینکه با حرکت مداوم روی تب ها، همه تبها زیر هم باز میشن.
دوم اینکه با “کلیک” روی تب ها، صفحه به پایین و روی content اون تب میاد.
میشه این موارد رو هم راهنمایی کنید؟ تقریبا میخوام مثل منوی بالای سایت تسنیم بشه: http://www.tasnimnews.com/
ممنونم

ص ت

سلام
وقت به خیر

در خط 11 جی کوئری که توضیح هم دادید، همه دیوهای content مخفی میشه.
content من هم همش دیو (div) هست، و به صورت ul و li نیست. به خاطر همین contetn اصلا نمایش داده نمیشه.

میشه برای این مشکل راه حل بدید؟
ممنونم

بهرام

سلام خسته نباشید
من میخوام به جای لیست مطالب واسه کاره دیگه از این وب باکس استفاده کنم به عنوان مثال مطالب مربوط به یک پست رو در دو تب محتوا و عکس های مربوط به اون پست نمایش بدم، اما چون در این صورت تو محتوای content1,2,3 دوباره از div برای قالب بندی محتوا استفاده میشه فکر میکنم با شرط خط 3 دستورات جی کوئری به مشکل میخوره. میشه راهنمایی کنید.
مورد بعدی هم در مورد اون قسمت مربوط به خط های 9 تا 12. مگه href تگ های a ما به صورت #content1,2,3 نیست؟ خوب جایی که داریم this.href رو میگیریم هم که یه چیزی شبیه #content1 باید برگردونه دیگه که یه # هم بیشتر نداره پس دیگه چه احتیاجی به اینکه یه بار split کنیم تو آرایه بریزیم و بعد باز # رو اضافه کنیم و… اگه میشه بیشتر توضیح بدین که من نفهمیدم.

کیوان علی محمدی

سلام من برای سوال اولتون خیلی خوب متوجه نشدم میخاین چیکار کنید،برای سوال دوم هم مشکلی نیست می تونید اون کدهای اضافه رو حذف کنید.

بهرام

ممنون آقا کیوان حل شد ❓

بهرام

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

کیوان علی محمدی

سلام،باید به li های بخش تب ها float برابر left بدین تا درست بشه.

بهرام

من همین کارو کردم نشد. میشه خودتون یه تست بکنید. هم با li ها هم با خود ul تست کردم ج نداد. ممنون

کیوان علی محمدی

برای ul تب ها خاصیت right:-1 رو به مقدار left:-1 تغییر بده.

ص ت

سلام
توی post list هاتون، به href هاتون، آدرس # دادید.
آیا این split(‘#’) به این مربوط نیست؟
محتوای تب‌های من چند تا div و href داره و اینطوری ساده نیست.

کیوان علی محمدی

نه اون برای لیستی هست که عناوین تب رو داخل خودش داره،با متد split رشته مورد نظر به آرایه تبدیل میشه،ما با قسمت اولش کاری نداریم و قسمت دومش که رو میخوایم تا بر اساس اون محتوا رو نشون بدیم.

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :