هایپر سورس

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

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

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

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

<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 تومان بعد از پرداخت به صفحه دانلود هدایت خواهید شد
اگر میخواهید لینک دانلود را در ایمیل خود نیز داشته باشید ، ادرس ایمیلتان را هم وارد نمائید

    
در صورتی که سوالی راجع به این آموزش دارید در بخش نظرات همین پست مطرح و از ارسال ان از بخش ارتباط با ما خود داری نمائید
در صورتی که تمایل دارید بعد از درج اخرین پست در این زمینه از طریق پیامک اگاه شوید ، شماره خود را در باکس زیر بنویسید
نام شما (فارسی)
شماره موبایل
موضوع ها
در صورت امکان برای ثبت شماره خود ، از خطوط ایرانسل استفاده نمائید ، در صورتی که در خطوط همراه اول پیامک های مارا دریافت نمیکنید ، دلیل ان میتواند تلقی شدن پیامک های اگاه سازی ما از نوع تبلیغاتی توسط اپراتور شما و عدم ارسال ان در به شما باشد (این امر مواقعی اتفاق میافتد که دریافت پیام های تبلیغاتی از طرف شما یا اپراتور بلاک شده باشد)
نویسنده : ParSa رتبه کاربر : تعداد پست های کاربر : 146 این کاربر تا به حالا توسط 0 کاربر مورد تقدیر و تشکر واقع شده پیام نویسنده :


عادل پارسا هستم کارشناس مهندسی نرم افزار
کار برنامه نویسی رو از سال 86 با زبان C شروع کردم و الان بیشتر از 6 ساله که بصورت حرفه ای در زمینه طراحی وب ، برنامه نویسی ویندوز ، وب ، ربات های وبگرد و ... فعالیت دارم

فعالیت و مهارت ها :

Asp.Net MVC C# / C/C++ Android Programming (Java)
Css3 & Html5 Js & Jquery Advanced Ajax Bootstrap & ResponsiVe Design
Reporting Tools SEO Sql Server SQLite



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


ارتباط با ما

double click for close / دوبار کلیک برای بستن پنجره