• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6252 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

آشنایی با jQuery ui - قسمت آخر

5 3487 ۲۲ شهریور ۹۳

با عرض سلام دوباره خدمت شما عزیزان امروز به ادامه ی مجموعه ی فراگیری آموزش jQuery ui می پردازیم.که در این قسمت اگر عمر یاری بده به بررسی تعاملات و در قسمت بعد به بررسی افکت ها (جلوه ها)خواهیم پرداخت.

تعاملات

قابلیت کشیدن


اگر تمایل به افزودن قابلیت کشیدن یک عنصر و جابجایی و حرکت آن در صفحه و تعامل حرکت موس کاربر با آن را را دارید باید از  jQuery ui کمک بگیرید و به صورت خیلی ساده از  آیدی draggable برای عنصر مد نظر استفاده کنید.حالا عنصر مد نظر قابلیت کشیدن رو داراست؛حالا اگر بخواهیم ویژگی های دیگه ای رو بهش نسبت بدیم باید از کدهای زیر استفاده کنیم و تگ اسکریپت زیر رو بین تگ هد قرار بدهیم و هر بخشی رو که می خواهیم شخصی سازی کنیم و هر بخشی رو که می خواهیم حذف کنیم :

  •  revert در کد فوق موجب بازگشتن دوباره عنصر به موقعیت اولیه ی خودش می شود و دارای دو مقدار true و false است.
  • axis برای محدود کردن حرکت عنصر مد نظر فقط در یک راستا و جهت.دو مقدار x و y را می پذیرد.که اگر x انتخاب شود فقط در راستای بردار i و اگر y انتخاب شود فقط در راستای بردار j حرکت می کند.
  • cursor که برای نمایش نوع علامت موشواره(موس) کاربرد دارد و از تمام مقادیری که در css وجود دارند پشتیبانی می کند.(برای آشنایی با مقادیر رجوع کنید به w3)
  • delay مدت زمانی که طول می کشه تا عنصر مد نظر با موس حرکت کند.اگر برابر 0 باشد آنگاه عنصر همگام با موس حرکت می کند و هر چه بیشتر بشود زمان حرکت عنصر پس از موس بیشتر می شود.
  • revertDuration مدت زمانی که طول می کشه عنصر رها بشه و به جایگاه اولش برگردد.(البته در صورتی که گزینه ی revert فعال باشه)
  • helper از دو مقدار orginal  و clone پشتیبانی می کنه.اگه orginal  باشه در صورت جابجایی ، عنصر اصلی به کلی از جایش تکون می خوره ولی اگه clone باشه اونوقت عنصر اصلی سرجاش می مونه و یه کپی ازش جا به جا می شود.
  • opacity برای نمایش درصد شفافیت عنصر بکار می رود.از مقادیر 0 تا صد درصد از اعداد طبیعی یا 0 تا 1 از اعداد گویا پشتیبانی می کنه.
  • zIndex برای الویت بندی عنصر در محور z :وقتی چندین عنصر در صفحه باشند برای نمایش یک عنصر در بالای یک عنصر دیگر و یا زیر عنصر دیگر باید از zindex استفاده کنیم.(در css از z-index استفاده می کنیم.)

رها شدن


در قابلیت کشیدن تعامل موس و حرکت عناصر را بررسی کردیم واما حالا می خواهیم یک قابلیتی رو به عناصر بدیم تا پذیرای سایر عناصر در درون خود باشند و با رها شدن سایر عناصر واکنش هایی نشان بدهند.بدین منظور آیدی droppable  رو به اون عنصر نسبت می دهیم.سایر ویژگی های این تعامل نیز به صورت زیر هست :

  •  accept بیانگر عناصری است که عنصر اصلی قبول خواهد کرد در درون خود.شاید سایر عناصر بر روی عنصر droppable  قرار بگیرند اما آن رخدادی را که باید انجام شود پس از قرار گرفتن بر روی عنصر droppable  انجام نمی شود.
  • activeClass :کلاسی که برای عنصر draggable  در زمان فعال بودن تعریف شود تا به آن استایل بدهیم.
  • tolerance معین کننده ی این است که تا چه زمانی ورود عنصر draggable باید تعریف شود تا رخداد انجام گیرد.شامل چهار مقدار:

fit :کل عنصر باید وارد شود.

intersect : حداقل نیمی از عنصر باید وارد شود.

pointer : نشانگر موس باید وارد شود.

touch : هر مقدار وارد شود.

 تغییر اندازه توسط کاربر


اگه بخواهید که این حق رو به کاربرانتون اعطا کنید که بتونند هر عنصری رو که تمایل دارند کوچک و بزرگ کنند باید از قسمت jQuery UI کمک بگیرید.بدین منظور کافیه که کد اسکریپت زیر رو بین دو تگ body قالبتون قرار بدید:

و هرجا که خواستید عنصری همچین قابلیتی رو داشته باشه آیدی resizable رو بهش بدید.برای تغییرات بیشتر هم می تونید یک کدی شبیه کد زیر رو در بین تگ head سایتتون قرار بدید:

  • animate برای اعمال انیمیشن به حرکت عناصر که تابعی بولین است.
  • animateDuration سرعت حرکت انیمیشنی عناصر را تعیین می کند از دو مقدار fast و slow پشتیبانی می کند.
  • animateEasing بیانگر نوع حالت انیمیشنی است.بخاطر داشته باشید که این گزینه نیازمند فعال بودن animate است.(برای آشنایی بیشتر با تمام حالاتی را که این گزینه پشتیبانی می کند می توانید رجوع کنید به سایت اصلی)
  • delay بیانگر زمان شروع خودکار تغییر اندازه پس از لود صفحه می باشد که بر حسب میلی ثانیه هست.
  • maxHeight و maxWidth و minHeight و minWidth به ترتیب برای تعیین بیشینه ی عرض و طول و کمینه ی آن ها می باشند.

انیمیشن ها

روش های متنوعی برای اعمال جلوه های بصری هست که دونه به دونه با اونها آشنا خواهیم شد :

show


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

effect بیانگر نوع جلوه ی بصری که تمایل به استفاده کردن داریم را نشان می دهد.برای مشاهده ی موارد قابل پشتیبانی و نحوه ی واکنش عناصر اینجا کلیک کنید.

یک مثال ساده از نحوه ی استفاده از effect : (دموی کد زیر)

که بجای fold می توانید از بقیه ی گزینه ها که در لینک بالا هستند استفاده کنید یعنی :

blind,bounce,clip,drop,explode,fade,highlight,puff,pulsate,scale,shake,size,slide,transfer

حالا اگر بخواهیم از زمان انجام واکنش استفاده کنیم می تونیم یک ویرگول بعد از نام افکت بگذاریم و زمان انجام افکت در میلی ثانیه را وارد کنیم.مثل:

 add class


برای تغییر یک عنصر موجود در صفحه بکار می رود.و مانند مثال های قبلی می باشد فقط بجای show از addclass استفاده می کنیم.به مثال زیر توجه کنید :

که در آن id1 برای قبل از اعمال تغییرات و id2 برای پس از اعمال تغییرات بکار می رود.

نکته : توجه داشته باشید برای حذف یک عنصر و اعمال انیمیشن برای آن می توانید از emoveclass به جای addclass استفاده کنید.

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

 

 

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    محمدرضا(۲۵ شهریور ۱۳۹۳)

    اطلاعات خوبی بود مرسی 😀

  • ‏‏
    سعید(۴ مهر ۱۳۹۴)

    اگه یه کتابخانه ای بود که فقط droppable داشت،خیلی خیلی خیلی به دردم میخورد،این jquery ui حجمش خیلی خیلی زیاده وگرنه استفاده میکردم
    یه همچین کد یا کتابخانه ای میشناسین که droppabl داشته باشه یا یه چیزی شبیه به این؟
    اگه باشه که مشکلام حل میشه،فک کنم یه ماه هس که فقط به خاطر droppabl موندم و نتونستم قالب سایتم رو تموم کنم

    • ‏‏
      وحید صالحی(۴ مهر ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram