ویدئو های پربازدید سایت

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

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

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

<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 تومان
قیمت با تخفیف : تومان ()
عنوان محصول : اموزش ساخت تب حرفه ای و زیبا با جی کوئری

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

HyperSourCe.ir

info@hypersource.ir

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

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

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

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

پیام سیستم