PDA

View Full Version : اضافه کردن کنترل ها به تب های ساخته شده با jquery



sara_aryanfar
پنج شنبه 21 مهر 1390, 12:45 عصر
باسلام من در سایت خودم از کد زیر برای ایجاد تب استفاده کردم البته این فقط یک قطعه از کد هست می خوام بدونم چطوری باید برای هر تب کنترل های خودمو اضافه کنم که اون کنترل ها فقط داخل اون تب دیده بشن

<ul id="navigation">
<li class="one"><a href="#">Details</a></li>
<li class="two"><a href="#">Schedule</a></li>
<li class="three selected"><a href="#">Speakers</a></li>
<li class="four"><a href="#">Sponsors</a></li>
<li class="five"><a href="#">Register</a></li>
<li class="shadow"></li>
</ul>

mahdioo12194
پنج شنبه 21 مهر 1390, 13:50 عصر
همان طور که شما hyperlink اضافه کردید کنترل های دیگه هم همین طور اضافه می شوند!



<li class="one"><a href="#">Details</a><input id="Checkbox1" type="checkbox" /></li>

sara_aryanfar
پنج شنبه 21 مهر 1390, 15:08 عصر
با این کد که چک باکس به هدر تب من اضافه میشه در حالی که من می خوام تعداد زیادی کنترل داخل تب قرار بگیرن

mahdioo12194
پنج شنبه 21 مهر 1390, 15:34 عصر
مگه هدر هم داره؟!!!! این کد به عنوان نمونه اولین تب است برای تب های بعدی هم باید هر کنترلی که می خواهید به همین شکل اضافه کنید!!!!!!!!!!

sara_aryanfar
پنج شنبه 21 مهر 1390, 16:30 عصر
منظور من از هدر اون سر برگ های تب هست بعد از استفاده از کد شما اینطوری میشه نگاه کنید
76553

sara_aryanfar
پنج شنبه 21 مهر 1390, 16:51 عصر
در واقع این تب باید چیز های متفاوتی رو نشون بدن مثلا داخل یکی باتن باشه داخل دیگری نه احتمالا من با content مشکل دارم

mahdioo12194
پنج شنبه 21 مهر 1390, 16:56 عصر
من منظور شما رو از داخل تب نمی فهمم!! الان چک باکس داخله تبه دیگه!!!

m.soleimani
پنج شنبه 21 مهر 1390, 18:18 عصر
با این کد که چک باکس به هدر تب من اضافه میشه در حالی که من می خوام تعداد زیادی کنترل داخل تب قرار بگیرن

یه نمونه از تبی رو که توی ذهنتون دارین توی paint طراحی کنید تا بقیه متوجه منظور شما بشن./

sara_aryanfar
پنج شنبه 21 مهر 1390, 19:31 عصر
ببینید در سایت زیر وقتی مثلا روی ایرانسل کلیک می کنید یه تعداد گزینه میاد و وقتی روی همراه اول کلیک میشه یه تعداد دیگه

http://ekart.ir/

m.soleimani
پنج شنبه 21 مهر 1390, 19:52 عصر
یه تگ div هست که کنترل‌ها رو توش قرار دادن توی رویداد کلیک تب هم از حالت هاید خارجش می‌کنن شما هم برای هر کدوم از این تب‌ها می‌تونی همین کار رو انجام بدی اگر بد توضیح دادم بگو شاد و پیروز باشید./

sara_aryanfar
پنج شنبه 21 مهر 1390, 20:04 عصر
کنترل های داخلش متفاوت هست چطوری میشه اینکارو کرد یعنی برای هر شارژ یه دایو گذاشته؟

Mahnet
پنج شنبه 21 مهر 1390, 20:14 عصر
با سلام
برای ساخت tab روش های مختلفی هست و این به سلیقه ی برنامه نویس مربوط میشه که چطور اون رو طراحی کنه، با هم یه مثال ساده رو مرور میکنیم ...
tab رو به دو بخش تقسیم میکنیم:
1) navigation
2) content

حالا به ازای هر تگ li داخل navigation یه تگ li داخل content با خصوصیت id هم نام قرار میدیم و همه اونا رو غیر از یکی مخفی میکنیم و id اونی که نمایش داده میشه رو جایی ذخیره کنیم ...
زمانی که روی یه li داخل navigation کلیک میکنی اول li نمایش داده شده ی داخل content رو مخفی کن و بعد li داخل content فعلی رو نشون بده و id این رو باز هم ذخیره کن ...
هیچ الزامی نیست که از li با ul استفاده کنی و میتونی با div هم کار کنی این فقط یه مثال بود ...
این هم demo برای مشکل شما...
موفق باشی

mahdioo12194
پنج شنبه 21 مهر 1390, 20:27 عصر
یکی کد جی کویریشو توضیح بده!!

sara_aryanfar
پنج شنبه 21 مهر 1390, 23:49 عصر
ممنون حالا این سر برگ ها رو چطوری میشه راستچین کرد

m.soleimani
جمعه 22 مهر 1390, 00:06 صبح
ممنون حالا این سر برگ ها رو چطوری میشه راستچین کرد

کلن داری کل پروژه رو از دوستان دریافت می‌کنی دوست عزیز این به ضرر شماست یکم هم خودت تلاش کنی بد نیست.
حتمن یه دلیلی داشته که دوستان از قدیم قانون کد به کسی ندادن رو گذاشتن؛ با منو شما هم مشکل نداشتن؛ دلشون برای منو شما سوخته چون اگر کد هدیه داشته باشیم دیگه تلاش نمی‌کنیم خودمون درستش کنیم پس ما هرگز برنامه نویس نمی‌شیم « میدونم منبر رفتم و شما هم حالش رو نداری و کد رو هم لازم داری. اینو برای شما گفتم و به خاطر شما چون نه چیزی از من کم می‌شه و نه چیزی اضافه و البته یه جور وظیفه نسبت به قوانین این سایت هست که همه ما خیلی دوستش داریم " در خواست کد به هر صورتی منع شده مگر این که شما کدی نوشته باشی و نیاز داشته باشی با تلاش خودت تصحیح بشه " »

شاد و پیروز باشید./

Mahnet
جمعه 22 مهر 1390, 00:17 صبح
یه تغییر کوچیک توی سورس دادم، براتون می نویسم ...
داخل تگ script فایل index.htm که فرستادم این کد رو بنویسین :

$(document).ready(function(){
var id = $('.content li').eq(0).attr('id');
$('#'+id).css({'border-bottom':'1px solid #2b477d','height':($('#'+id).height()+2)+'px'});
$('.content li').hide().eq(0).show();
$('.navigation li').bind('click', function(){
$(this).css({'border-bottom':'1px solid #2b477d','height':($(this).height()+2)+'px'});
$('#'+id).height($('#'+id).height() - 2);
id = $(this).attr('id');
$('.content li').hide();
$('.content li#'+id+'').show();
});
});

داخل css هم این رو قرار بدین :

.tab{width:350px; height:500px; margin-left:auto; margin-right:auto;}
.navigation{ list-style: none; padding: 0 7px 26px 0; margin: 0; margin-bottom:1px}
.navigation li{ float: right; margin-right: 3px; position: relative; }
.navigation a:link, .navigation a:visited{ color: #fff; display: block; font-family: Tahoma; font-size: 0.75em; text-align: left; text-decoration: none; padding: 5px;}
.navigation a:hover{color: #2b477d;}
.navigation li{ background-color: #2b477d; border:1px solid #131925; border-bottom:1px solid #2b477d}
.navigation li:hover{ background-color: #ddd; border:1px solid #888;}
.navigation, .content{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
.navigation > li{-webkit-border-radius: 5px 5px 0 0;-moz-border-radius: 5px 5px 0 0;border-radius: 5px 5px 0 0;}
.content{ list-style: none; padding: 5px; margin: 0; margin-left:-10px; color:#ddd; background-color:#2b477d; border:1px solid #131925; direction:rtl}

حالا هر وقت خواستین navigation رو راستچین یا چپچین کنین کافیه به float کلاس navigation مقدارهای right یا left بدین و به طور مشابه برای کلاس content مقدارهای rtl و ltr رو به خصیصه direction اختصاص بدین ...
موفق باشی