اموزش ساخت تب حرفه ای و زیبا با جی کوئری
در این آموزش قصد داریم یک تب بسیاز زیبا به کمک جی کوئری ایجاد کنیم در عین سادگی ، حرفه ای و زیبا می باشد
برای این کار ما نیاز داریم از جی کوئری در پروژه خود استفاده کنیم که شما می توانید از فایل جی کوئری موجود در این وبسایت استفاده کنید
<script src="http://www.hypersource.ir/js/jquery-2.0.3.min.js"></script>
ما در این کار 3 تب ایجاد کرده ایم و تب ها را با کلاس Hs-Tab مشخص میکنیم
<body style="padding:22px;">
<div class="Hs-Tab-Bar">
<input id="Go_Tab_1" type="button" class="Hs-Tab-Button" value="تب اول" />
<input id="Go_Tab_2" type="button" class="Hs-Tab-Button" value="تب دوم" />
<input id="Go_Tab_3" type="button" class="Hs-Tab-Button" value="تب سوم" />
</div>
<div class="HS-Tab" id="Tab-1">
<h2>محتویات تب اول</h2>
</div>
<div class="HS-Tab" id="Tab-2">
<h2>اموزش ساخت تب زیبا با جی کوئری</h2>
</div>
<div class="HS-Tab" id="Tab-3">
<h2>هایپر سورس ، مرجع کاربردی برنامه نویسان ایرانی</h2>
</div>
</body>
برای استایل دهی یک بلوک <style> در بخش <head> سند ایجاد میکنیم و کد های Css زیر را در ان کپی میکنیم
.HS-Tab {
width:330px;
height:160px;
border:1px solid #808080;
padding:12px;
text-align:right;
direction:rtl;
display:none;
border-radius: 0px 0px 12px 22px;
-moz-border-radius: 0px 0px 12px 22px;
-webkit-border-radius: 0px 0px 12px 22px;
background-color:lightblue;
}
h2 {
display:block;
}
.Hs-Tab-Bar {
width:330px;
height:30px;
background-color:#0094ff;
text-align:center;
padding:2px 12px;
border:1px solid #808080;
}
.Hs-Tab-Button {
font-size:large;
font-family:'Yekan',Arial;
cursor:pointer;
}
.Hs-Selected-Button {
background-color:#808080;
color:#fff;
}
یک بخش هم برای تعیین محل کلید تب ها برای انتخاب تب مورد نظر با کلاس Hs-Tab-Bar ایجاد کرده ایم
حال نوبت ان رسیده است تا موتور جاوااسکریپتی این تب ها را ایجاد کنیم ، بدین منظور یک بلوک <script> در بخش <head> ایجاد و کد های زیر را در ان کپی میکنیم
<script type="text/javascript">
$(document).ready(function () {
$('#Tab-1').show(220);
$('#Go_Tab_1').toggleClass('Hs-Selected-Button');
$('#Go_Tab_1').click(function () {
$('#Tab-1').show(220);
$('#Tab-2').hide(220);
$('#Tab-3').hide(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
$('#Go_Tab_2').click(function () {
$('#Tab-1').hide(220);
$('#Tab-2').show(220);
$('#Tab-3').hide(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
$('#Go_Tab_3').click(function () {
$('#Tab-1').hide(220);
$('#Tab-2').hide(220);
$('#Tab-3').show(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
});
</script>
در زیر میتوانید یک نمونه از این تب را مشاهده و با طرز کار ان اشنا شوید
برای دیدن نمونه تب اینجا کلیک کنید
همچنین میتوانید فایل پروژه را از لینک زیر دانلود کنید
مشخصات فایل :
نوع فایل : zip -> html
حجم فایل : 30 کیلو بایت
رمز فایل فشرده : www.hypersource.ir
قیمیت : رایگان
برای دانلود فایل با لینک مستقیم اینجا کلیک کنید
برای این کار ما نیاز داریم از جی کوئری در پروژه خود استفاده کنیم که شما می توانید از فایل جی کوئری موجود در این وبسایت استفاده کنید
<script src="http://www.hypersource.ir/js/jquery-2.0.3.min.js"></script>
ما در این کار 3 تب ایجاد کرده ایم و تب ها را با کلاس Hs-Tab مشخص میکنیم
<body style="padding:22px;">
<div class="Hs-Tab-Bar">
<input id="Go_Tab_1" type="button" class="Hs-Tab-Button" value="تب اول" />
<input id="Go_Tab_2" type="button" class="Hs-Tab-Button" value="تب دوم" />
<input id="Go_Tab_3" type="button" class="Hs-Tab-Button" value="تب سوم" />
</div>
<div class="HS-Tab" id="Tab-1">
<h2>محتویات تب اول</h2>
</div>
<div class="HS-Tab" id="Tab-2">
<h2>اموزش ساخت تب زیبا با جی کوئری</h2>
</div>
<div class="HS-Tab" id="Tab-3">
<h2>هایپر سورس ، مرجع کاربردی برنامه نویسان ایرانی</h2>
</div>
</body>
برای استایل دهی یک بلوک <style> در بخش <head> سند ایجاد میکنیم و کد های Css زیر را در ان کپی میکنیم
.HS-Tab {
width:330px;
height:160px;
border:1px solid #808080;
padding:12px;
text-align:right;
direction:rtl;
display:none;
border-radius: 0px 0px 12px 22px;
-moz-border-radius: 0px 0px 12px 22px;
-webkit-border-radius: 0px 0px 12px 22px;
background-color:lightblue;
}
h2 {
display:block;
}
.Hs-Tab-Bar {
width:330px;
height:30px;
background-color:#0094ff;
text-align:center;
padding:2px 12px;
border:1px solid #808080;
}
.Hs-Tab-Button {
font-size:large;
font-family:'Yekan',Arial;
cursor:pointer;
}
.Hs-Selected-Button {
background-color:#808080;
color:#fff;
}
یک بخش هم برای تعیین محل کلید تب ها برای انتخاب تب مورد نظر با کلاس Hs-Tab-Bar ایجاد کرده ایم
حال نوبت ان رسیده است تا موتور جاوااسکریپتی این تب ها را ایجاد کنیم ، بدین منظور یک بلوک <script> در بخش <head> ایجاد و کد های زیر را در ان کپی میکنیم
<script type="text/javascript">
$(document).ready(function () {
$('#Tab-1').show(220);
$('#Go_Tab_1').toggleClass('Hs-Selected-Button');
$('#Go_Tab_1').click(function () {
$('#Tab-1').show(220);
$('#Tab-2').hide(220);
$('#Tab-3').hide(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
$('#Go_Tab_2').click(function () {
$('#Tab-1').hide(220);
$('#Tab-2').show(220);
$('#Tab-3').hide(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
$('#Go_Tab_3').click(function () {
$('#Tab-1').hide(220);
$('#Tab-2').hide(220);
$('#Tab-3').show(220);
$('.Hs-Tab-Bar input').removeClass('Hs-Selected-Button');
$(this).toggleClass('Hs-Selected-Button');
});
});
</script>
در زیر میتوانید یک نمونه از این تب را مشاهده و با طرز کار ان اشنا شوید
برای دیدن نمونه تب اینجا کلیک کنید
همچنین میتوانید فایل پروژه را از لینک زیر دانلود کنید
مشخصات فایل :
نوع فایل : zip -> html
حجم فایل : 30 کیلو بایت
رمز فایل فشرده : www.hypersource.ir
قیمیت : رایگان
برای دانلود فایل با لینک مستقیم اینجا کلیک کنید
