آموزش JQuery (قسمت ۹)

آموزش-jquery-قسمت-۹

در قسمت قبل آموزش JQuery در مورد نحوه استفاده از دستور Fade و انواع ویژگی های آن گفتم و فهمیدین که توسط این دستور می توانید انیمیشن های ظاهر و آشکار شدن را انجام دهید ولی حالا می خوام با دستور Slide هم آشناتون بکنم که وظیفه ظاهر و آشکار کردن عناصر ایجاد شده را بر عهده دارد که انیمیشن اجرایی این دستور کمی متفاوت می باشد.در این بخش یک مثال کاربردی براتون قرار میدم که هم نحوه استفاده از این دستور را یاد بگیرید و هم یک مثال واقعی برنامه نویسی با زبان JQuery‌ رو ببینید.

دستور Slide دارای ۳ حالت زیر می باشد.

  • slideUp - جهت پنهان کردن عناصر استفاده می شود و به صورت انیمیشنی طول عنصر کم شده و 0 می شود.
  • slideDown - جهت آشکار کردن عناصر  استفاده می شود و به صورت انیمیشن طول عنصر از 0 به طول تعریف شده می رسد.
  • slideToggle - جهت آشکار و پنهان کردن عناصر استفاده می شود به صورتی که عناصری که پنهان هستند را آشکار و عناصر آشکار را پنهان می کند.

کدهای HTML : 

<ul id='dr-according'>
    <li>
        <b> عنوان اصلی </b>
        <p> متن کامل </p>
    </li>
    <li>
        <b> عنوان اصلی </b>
        <p> متن کامل </p>
    </li>
    <li>
        <b> عنوان اصلی </b>
        <p> متن کامل </p>
    </li>
    <li>
        <b> عنوان اصلی </b>
        <p> متن کامل </p>
    </li>
</ul>

کدهای CSS : 

<style>
    #dr-according {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    
    #dr-according li {
        width: 250px;
        background-color: #e8e8e8;
        padding: 5px;
        text-align: center;
        margin-bottom: 5px;
        color: #7c7c7c;
    }
    
    #dr-according li:hover {
        cursor: pointer;
    }
    
    #dr-according li b {
        font-size: 16px;
    }
    
    #dr-according li p {
        font-size: 14px;
        text-align: justify;
        direction: rtl;
        display: none;
    }
</style>

کدهای JQuery : 

<script>
    $(document).ready(function() {
        $('#dr-according li').on('click', function() {
            $('li p').slideUp(700);
            $('li b').css({'color':'#7c7c7c'});
            $(this).find('p').slideDown(700);
            $(this).find('b').css({'color':'#D63031'});
        });
    })
</script>

در کدهای بالا ما توسط HTML - CSS - JQuery توانستیم یک منو کشویی (according) ایجاد کنیم که در طراحی ui سایت کاملا ابزار کاربردی و پراستفاده هست که طریقه ایجاد آن را براتون گفتم و برای یاد گیری بهتر نیز خودتان می توانید امتحان کنید.

در این آموزش سعی کردم در کنار آموزش، یک مثال واقعی و کاربردی براتون بزنم که در صورت نیاز در پروژه های خودتان نیز استفاده کنید.

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


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟