آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش نمایش اسلایدی عناصر

دوره های مرتبط با این مقاله

نمایش کشویی/اسلایدی المان ها در jquery

در درس قبلی با نحوه ی محو کردن تدریجی المان ها با استفاده از افکت fading آشنا شدید(مطلب مربوط به آموزش افکت fadein-fadeout در jquery). اما گاهی نمایش اسلایدی و کشویی المان ها بر ایفکت نمایش/پنهان سازی تدریجی ارجحیت دارد. برای این منظور jQuery چندین متد کارآمد ارائه می دهد.
در مثال زیر با بهره گیری از متدslideDown() یک المان div که شناسه ی آن divTestArea1 می باشد را به صورت کشویی نمایش می دهیم:


نمونه یک

    
    Show box
    
امتحان کنید

حال برای پنهان نمودن این کادر به صورت کشویی، از متد slideup() استفاده می کنیم. این دو متد پارامترهای یکسان را می پذیرند که همگی اختیاری هستند. اولین پارامتر سرعت نمایش کشویی المان را تنظیم می کند. می توانید سرعت اجرای ایفکت را به سه مقدار "fast"، "slow" یا میلی ثانیه تنظیم نمایید. مثال:


نمونه دو

    
    
    
    Show boxes
    
امتحان کنید

با اجرای مثال فوق مشاهده می کنید که کادر اول با سرعت بسیار بالایی به صورت کشویی نمایش داده می شود، کادر دوم با کمی تاخیر و کادر سوم با سرعت بسیار پایین اجرا می شود که اجرای آن تقریبا دو ثانیه به طول می انجامد.
پارامتر دوم یک تابع callback می باشد که با اجرای کامل ایفکت نمایش اسلایدی اجرا می شود. استفاده از این پارامتر کاملا اختیاری می باشد. در زیر مثال دیگری را مشاهده می کنید که اثر متد slideup() را به نمایش می گذارد:


نمونه سه

    
    
امتحان کنید

در مثال فوق، تابع callback به محض اجرای کامل ایفکت نمایش اسلایدی عنصر به پایین (متد SlideDown()) صدا زده می شود و بلافاصله پس از آن متد SlideUp() فراخوانی می گردد (و المان مورد نظر باز به صورت کشویی جمع می شود).
تیم طراحان کتابخانه ی jQuery متد دیگری به نام slideToggle() را ارائه کرده است که بین دو حالت slidedown و slideup تغییر وضعیت می دهد. این متد بسته به وضعیت جاری المان، آن را به صورت کشویی نمایش می دهد یا (در صورت نمایان بودن) المان مورد نظر را جمع می کند.


نمونه چهار

    
Toggle box
امتحان کنید

امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

اگر تمایل دارید به سایر محتوای آموزش برنامه نویسی دسترسی پیدا کنید می توانید به آموزش های گام به گام برنامه نویسی مراجعه کنید.

از اینجا بهترین کتابهای برنامه نویسی را دریافت کنید : کتاب های آموزش برنامه نویسی


کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.

  • 722
  •    1134
  • تاریخ ارسال :   1395/01/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .