هایپر سورس

مرجع کاربردی برنامه نویسان ایـــرانی

اموزش ساخت تب حرفه ای و زیبا با جی کوئری

در این آموزش قصد داریم یک تب بسیاز زیبا به کمک جی کوئری ایجاد کنیم در عین سادگی ، حرفه ای و زیبا می باشد

 برای این کار ما نیاز داریم از جی کوئری در پروژه خود استفاده کنیم که شما می توانید از فایل جی کوئری موجود در این وبسایت استفاده کنید

<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
قیمیت : رایگان​

برای دانلود فایل با لینک مستقیم اینجا کلیک کنید​

cialis online coupon open cialis manufacturer coupon 2016
cialis cvs coupon cialis cheap cialis

تخفیف میخواهید یا کد تخفیف دارید ؟

دریافت

قیمت آموزش : 0 تومان
قیمت با تخفیف : تومان
عنوان محصول : اموزش ساخت تب حرفه ای و زیبا با جی کوئری

چگونه میتوانم این محصول را با تخفیف دریافت نمایم ؟

  • 1) اگر عضو سایت باشید، 5% تخفیف در محصول اعمال میشود (برای اعمال شدن این مورد میبایست وارد حساب کاربری خود شوید)
  • 2) اگر موجودی حساب شما بالاتر از 0 تومان باشد، 10% تخفیف بر روی محصول اعمال خواهد شد (این مبلغ برای این محصول میباشد)
  • 3) در صورتی که در سایت به عنوان کاربر نویسنده باشید و حداقل 3 پست داشته باشید، 10% تخفیف اعمال خواهد شد
  • مشاهده وضعیت تخفیف ها برای این محصول
  • در صورتی که تمامی شرایط بالا را داشته باشید میتوانید این محصول را باقیمت 0 تومان دریافت نمایید.
  • همچنین میتوانید با وارد کردن کد تخفیف، از میزان تخفیف کد و شرایط بالا بصورت همزمان استفاده کنید

بستن
در صورتی که سوالی راجع به این آموزش دارید در بخش نظرات همین پست مطرح و از ارسال ان از بخش ارتباط با ما خود داری نمائید

هم اکنون نـــظر بدهید

HyperSourCe.ir

info@hypersource.ir

کلیه حقوق برای وب سایت هایپر سورس محفوظ است
CopyRight ©2014-2018
ارتباط با ما
نام شما
ایمیل
موبایل
آیدی تلگرام
رمز عبور را فراموش کرده ام

محصولقیمتبا تخفیف

لطفا منتظر بمانید. . .

پیام سیستم