پیمایش بین چند تب

پیمایش بین چند تب

در این آموزش قصد داریم تا به شما نحوه ایجاد یک پلاگین رو بدیم که در آن شما میتونید بین چند تب مختلف حرکت کنید و در هر تب مطلب مختلفی رو به نمایش دربیاورید.

برای مشاهده لینک وارد شود

خوب مثل همیشه کار رو با نوشتن کدهای HTML شروع می کنیم.

demo.html

همانطور که در بالا مشاهده میکنید کدهای مربوط به تب ها توسط جی کوئری هنگام بارگذاری اولیه صفحه در داخل تگ قرار داده میشوند.اینکار به شما کمک میکنه تا در آینده هر تعداد که تب خواستید به صفحه وارد کنید.(فقط در بخش جاوااسکریپت کدها را وارد میکنید.)

demo.html

  • Tab two
  • برای هر تب این بارگذاری صورت خواهد گرفت.هر تگ li شامل عنصر موقعیت و لینک مربوط به هر مطلب میباشد.شما همچنین میتوانید تبها را هر کجای صفحه که خواستید نمایش بدهید.شما همچنین باید به کلاس green که کار تنظیمات فونت رو انجام میده نیز توجه داشته باشید.

    i12

    در این بخش از آموزش به تشریح کدهای مربوط به استایل ها می کنیم.

    styles.css – Part 1

    .tabContainer{
        /* The UL */
        float:right;
        padding-right:13px;
    }
    
    #contentHolder{
        background-color:#EEEEEE;
        border:2px solid #FFFFFF;
        height:300px;
        margin:20px;
    
        color:#444444;
        padding:15px;
    }
    
    #tabContent{
        background-color:#333;
        border:1px solid #444;
        margin-top:-15px;
        width:100%;
    }
    
    #tabContent, .tabContainer li a,#contentHolder{
        -webkit-box-shadow:0 0 2px black;
        -moz-box-shadow:0 0 2px black;
        box-shadow:0 0 2px black;
    }
    
    .tabContainer li{
        /* This will arrange the LI-s next to each other */
        display:inline;
    }
    
    .tabContainer li a,.tabContainer li a:visited{
        /* Styling the hyperlinks of the tabs as colorful buttons */
    
        float:left;
        font-size:18px;
    
        /* display:block allows for additinal CSS rules to take effect, such as paddings: */
        display:block;
    
        padding:7px 16px 1px;
        margin:4px 5px;
        height:29px;
    
        /* Giving positioning */
        position:relative;
    
        /* CSS3 text-shadow */
        text-shadow:1px 1px 1px #CCCCCC;
    }
    

    ما در اینجا تعدادی کد css برای زیبایی به صفحه اضافه کردیم.ابتدا با استفاده از خاصیت box-shadow به زیر تب ها ،tabContent، #contentHolder#یک سایه  اضافه کردیم.بعد از این ما با استفاده از خاصیت text-shadow به متن های تب ها یک سایه خفیف اعمال می کنیم.

    styles.css – Part 2

    #overLine{
        /* The line above the active button. */
        position:absolute;
    
        height:1px;
        background-color:white;
        width:90px;
    
        float:left;
        left:1px;
        top:-5px;
        overflow:hidden;
    }
    
    #main{
        margin:0 auto;
        position:relative;
        width:700px;
    }
    
    ul .left{
        /* The left span in the hyperlink */
    
        height:37px;
        left:0;
        position:absolute;
        top:0;
        width:10px;
    }
    
    ul .right{
        /* The right span in the hyperlink */
    
        height:37px;
        right:0;
        position:absolute;
        top:0;
        width:10px;
    }
    
    /* Styling the colors individually: */
    
    ul a.green{	background:url(img/green_mid.png) repeat-x top center;	color:#24570f;}
    ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
    ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}
    
    /* .. Analogical styles for the red, blue and orange color .. */
    
    /* The hover states: */
    ul a:hover{	background-position:bottom center; text-decoration:none;}
    ul a:hover span.left{ background-position:left bottom;}
    ul a:hover span.right{ background-position:right bottom;}
    
    .preloader{
        display:block;
        margin:120px auto;
    }
    

    در بخش دوم کدهای css ما تنظیماتی را برای لینک ها انجام دادیم که به دلیل سادگی نیازی به توضیح ندارند.

    i12

    در این بخش از آموزش به کدهای جی کوئری میپردازیم.در ابتدای کار ما کتابخانه جی کوئری را به صفحه اضافه می کنیم.

    demo.html

    
    
    
    
    

    کاری که ما در بالا انجام دادیم وارد کردیم نسخه قبلی جیکوئری از CDN گوگل و بلافاصله بعد از آن فایل script.js  را که شامل تمام کدهای اسکریپت ما است را وارد کردیم.

    در زیر به شرح کارهایی که جیکوئری انجام میدهد می پردازیم:

    ۱-هنگام بازشدنصفحه در مرورگر بیننده،کتابخانه جی کوئری از گوگل دانلود میشود.

    ۲-()document).ready)$،برای به اجرا در آوردن توابع پس از اتمام بارگذاری صفحه

    ۳-اشیای تب ها توسط متد  ()each.$ تکرار میشوند و یک تگ li منحصر به فرد ایجادشده و به <tabContainer <UL.اضافه میشود.

    ۴-ایونت ها منتظر هستند تا با کلیک روی تب ها آنها را عوض بکنند.

    حالا کدها رو در زیر مشاهده می کنید.

    script.js – Part 1

    $(document).ready(function(){
        /* This code is executed after the DOM has been completely loaded */
    
        /* Defining an array with the tab text and AJAX pages: */
    
        var Tabs = {
            'Tab one'	: 'pages/page1.html',
            'Tab two'	: 'pages/page2.html',
            'Tab three'	: 'pages/page3.html',
            'Tab four'	: 'pages/page4.html'
        }
    
        /* The available colors for the tabs: */
        var colors = ['blue','green','red','orange'];
    
     	/* The colors of the line above the tab when it is active: */
        var topLineColor = {
            blue:'lightblue',
            green:'lightgreen',
            red:'red',
            orange:'orange'
        }
    
        /* Looping through the Tabs object: */
        var z=0;
        $.each(Tabs,function(i,j){
            /* Sequentially creating the tabs and assigning a color from the array: */
    
            var tmp = $('
  • '+i+'
  • '); /* Setting the page data for each hyperlink: */ tmp.find('a').data('page',j); /* Adding the tab to the UL container: */ $('ul.tabContainer').append(tmp); })

    شما میتونید تب دلخواه خودتون را با وارد کردن یک شی جدید به اشیای تب ها(tabs object) ایجاد کنید.بخش چپ نام تب را نگه میدارد و بخش راست نیز آدرس آجاکس رو نگه میدارد که در تگ contentHolder# نمایش داده خواهد شد.در بخش دوم کد ما به عملکرد jQuery 1.4 میپردازیم،

    script.js – Part 2

     /* Caching the tabs into a variable for better performance: */
        var the_tabs = $('.tab');
    
        the_tabs.click(function(e){
    
            /* "this" points to the clicked tab hyperlink: */
            var element = $(this);
    
     		/* If it is currently active, return false and exit: */
            if(element.find('#overLine').length) return false;
    
     		/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    
            var bg = element.attr('class').replace('tab ','');
    
     		/* Removing the line: */
            $('#overLine').remove();
    
     		/* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */
    
            $('
    ',{ id:'overLine', css:{ display:'none', width:element.outerWidth()-2, background:topLineColor[bg] || 'white' }}).appendTo(element).fadeIn('slow'); /* Checking whether the AJAX fetched page has been cached: */ if(!element.data('cache')) { /* If no cache is present, show the gif preloader and run an AJAX request: */ $('#contentHolder').html(''); $.get(element.data('page'),function(msg){ $('#contentHolder').html(msg); /* After page was received, add it to the cache for the current hyperlink: */ element.data('cache',msg); }); } else $('#contentHolder').html(element.data('cache')); e.preventDefault(); }) /* Emulating a click on the first tab, so that the content area is not empty: */ the_tabs.eq(0).click(); });

    به نحوه استفاده متد ()data در بین کدها توجه کنید.این متد با استفاده از فراخوانی دو متد  (‘#selector’).data(‘label’,”String Data”)$ یک داده به هر عنصر اختصاص می دهد.این یک رشته متن به عنصر اختصاص می دهد که ما بعدا میتوانیم با استفاده از فراخوانی متد data به دسترسی داشته باشیم.

    i12

    پایان

    +5
    -1


    هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
    طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

    درباره‌ی مدیر سایت

    در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

    دیدگاه خود را بنویسید

    آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

    *


    هفت + 4 =

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>