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

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



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

آموزش ساخت یک tooltip ساده و متحرک با jQuery

7977 ۴ بهمن ۹۲

با سلام خدمت همه ی سون لرنی های عزیز...

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

این tooltip که من قصد ساختنش رو دارم خیلی ساده است ابتدا بهتره یه پیش نمایشی رو از tooltip داشته باشید تا بتونید اون رو بهتر بشناسید.

این tooltip از بخشهای زیر تشکیل میشه:

کد های HTML:

این کد مورد خاصی نداره،یه سند جی کوئری و اسکریپت tooltip به صفحه وصل شده و همه ی المان های قسمت body هم برای آزمایش tooltip ایجاد شده.

برای اینکه این tooltip رو فعال کنید باید به عنصر موردنظر کلاس tooltip رو بدید.

و این که کدهای CSS رو که کم بودند رو توی خود فایل jQuery قرار دادم تا فایل اضافی وصل نشه و هم بهتر بتونید دستورات CSS رو عوض کنید.

کدهای jQuery:

اول از رویداد ready برای سند استفاده شده، اگر از این کد در jQuery  استفاده نکنید،ممکنه مشکلی در سندتون ایجاد بشه چون jQuery قبل از باز شدن کامل سند ، تغییرات رو انجام میده و بعضی اوقات ممکنه مشکل ایجاد بشه.

از خط 2 تا 11 هم تنظیمات tooltip نوشته شده که به وسیله CSS روی tooltip اعمال میشه...نکته خاصی هم نداره چون هم کامنت گذاری شده و هم شما CSS رو بلدید...

بعد از رویداد hover استفاده شده  که دو تا پارامتر داره و به شکل زیره...

handlerIn موقعی اجرا میشه که ماوس روی المنت قرار بگیره.

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

بعد مقدار title اون عنصری که hover شده توی متغیر titleText قرار داده میشه تا مواقعی که به title عنصر نیاز داریم  از کدنویسی طولانی تر استفاده نکنیم. با تابع data مقدار title رو یک به عنوان یک داده دلخواه ثبت می کنیم و در آخر هم title عنصر مورد نظر پاک می کنیم...

نکته :

تابع data داده های خاصی رو در المان های صفحه ذخیره میکنه... و دو روش استفاده زیر رو داره.

 

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

key یعنی شاخص اون داده که برای فراخوانی اون داده استفاده میشه و val یعنی همون داده که شما قصد ذخیره کردنش رو دارید...

در روش دوم هم که شما شاخص رو میدید و داده رو تحویل میگیرید...

به یاد داشته باشید که هم key و هم val  هر دو رشته هستند.

نکته :

در مرورگرها ممکنه اختلال پیش بیاد و بعضی مواقع title رو نشون بدهند و بعضی مواقع tooltip رو نشون بدهند. و به همین خاطر title حذف شد.

بعد یه div با کلاس tooltip-div ایجاد می کنیم که قراره tooltip توی اون ایجاد بشه.سپس توسط تابع text مقدار title توی اون قرار میگیره و با appendTo  به body وصل میشه،با تابع css همه ی استایل ها به tooltip داده شد و در نهایت با تابع fadeIn از حال مخفی خارج میشه،خوب در اینجا handlerIn تموم میشه و وارد handlerOut میشیم.

ابتدا مقدار title رو دوباره به عنصر اضافه میکنیم یعنی با تابع attr اول مقدار صفت title رو نوشتیم و سپس با data مقدار title رو  که به عنوان داده دلخواه ثبت کرده بودیم گرفتیم و به عنوان title ذخیره کردیم و دوباره با تابع removedata اون داده دلخواه که مقدار title بود رو پاک کردیم.

نکته :

شیوه کلی استفاده از تابع removedata به شکل زیره:

که شما شاخص رو وارد می کنید و مقدار اون شاخص حذف میشه...

بعد با fadeOut اون عنصر رو محو میشه و توسط callback به طور کلی tooltip از بین میره و در اینجا handlerOut هم تموم میشه.

رویداد mousemove موقعی اجرا میشه که ماوس روی عنصر قرار بگیره و حرکت کنه.دقت کنید این تابع یک پارامتر با عنوان e هم دریافت کرده که نماینده event هست.یعنی هروقت ماوس روی عنصر حرکت کرد این پارامتر یه سری اطلاعاتی رو درباره ماوس توی خودش قرار میده.

توی خط بعدی با تابع css متحرک سازی انجام میشه به این صورت:

این کد یعنی مقدار top تولتیپ رو برابر با فاصله ماوس از بالای صفحه به علاوه ی 8 قرار بده.

این کد هم یعنی مقدار left تولتیپ رو برابر فاصله ی ماوس از طرف چپ پنجره مرورگر به علاوه ی 12 قرار بده.

یادآوری :

مقادیر 8 و 12 اختیاری هستند و میتونید اونها رو تغییر بدید.(مطمئناً این رو اکثر کاربرها می دونند ولی برای تازه کارها شاید نکته خوبی باشه)

هر وقت شما ماوس رو روی عنصر مورد نظر حرکت بدید این تابع فراخوانی میشه و جابه جایی رو براتون انجام میده.

این هم کدها تمام و کمال:

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

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

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

  • ‏‏

    سلام . میخواستم بدونم چطوری میشه مثل بعضی سایت ها وقتی تولتیپ به سمت راست یا چپ صفحه که نزدیک میشه کوچک بشه و نوشته ها زیر هم قرار بگیرن ؟؟؟ منظورم اینه تولتیپ از صفحه خارج نشه.

    • ‏‏
      لقمان آوند(۱۴ فروردین ۱۳۹۳)

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram