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

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

در این بخش از آموزش JQuery میخوام با رویداد Toggle‌ آشنا بشید ولی قبل از این باید با Hide و Show آشنا بشید.همانطور که از اسمشان پیداست برای پنها و ظاهر کردن عناصر استفاده می شوند.برای مثال می خواهیم با زدن یک دکمه متن مورد نظر پنهان و یا آشکار شود.خب برای این کار باید از کدهای Hide و Show استفاده کنید که موضوع آموزش این بخش هم همین خواهد بود.

موضوع آموزش : برنامه ای که با زدن دکمه، متن مورد نظر پنها و آشکار شود.

کدهای HTML :

<h4> دکتر کد، مرجع آموزش هایی به سبک متفاوت </h4>
<button id="dr-hide"> پنهان کردن </button>
<button id="dr-show"> ظاهر کردن </button>

در کدهای بالا، با استفاده از HTML‌ دو تا دکمه با عنوان های پنهان کردن (dr-hide#) و ظاهر کردن (dr-show#) قرار دادیم و یک متن که داخل تگ h4 قرار دارد.

 

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        $('#dr-hide').on('click', function() { //-> تعریف رویداد کلیک برای dr-hide
            $('h4').hide(); //-> پنهان کردن متن توسط hide
        });

        $('#dr-show').on('click', function() { //-> تعریف رویداد کلیک برای dr-hide
            $('h4').show(500); //-> آشکار کردن متن توسط show
            // عدد 500 استفاده شده بالا به منظور ایجاد انیمیشن نیم ثانیه ای در هنگام ظاهر کردن متن می باشد
        });
    });
</script>

در کدهای JQuery بالا، ما توسط id هر یک از دکمه های می توانیم برای آن یک رویداد (Event) تعریف کنیم که میتوانیم توسط کدهای Hide  و Show متن مورد نظرمون رو پنهان و آشکار کنیم.

 

خب حالا با کدهای Hide و Show آشنا شدید.حالا با استفاده از رویداد Toggle میتونیم عمل پنهان و آشکار کردن رو توسط یک دکمه انجام بدیم که خیلی کار رو راحت تر می کنه.فقط کافیه از کدهای زیر استفاده کنید.

کدهای HTML :

<h4> دکتر کد، مرجع آموزش هایی به سبک متفاوت </h4>
<button id="dr-toggle"> پنهان و آشکار </button>

کدهای JQuery : 

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function() { //-> ساختار اصلی JQuery
        $('#dr-toggle').on('click', function() { //-> تعریف رویداد کلیک برای dr-hide
            $('h4').toggle(500); //-> پنهان و آشکار کردن متن توسط Toggle
        });
    });
</script>

توجه کنید که عدد 500 استفاده شده در کدها به منظور ایجاد انیمیشن نیم ثانیه ای برای پنهان و ظاهر شدن متن می باشد.


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

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



پرسش و پاسخ

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