ظاهر شدن popup در رویداد mouseover

rezayeman · آذر 92

با سلام.

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

از ویرایشگر jce هم استفاده کردم اما بدی این ویرایشگر اینه که مطلب مورد نظرو تو popup با قالب سایت نشون میده در صورتی که من میخوام فقط اون مطلب ظاهر بشه بدون هیچ قالبی یعنی انگار که فقط یه یادداشت گذاشتم.

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

و بازم لطفا نگید که اگه سرچ کنی پیدا میکنی چون مطمئن باشید کلی سرچ کردم و چون به نتیجه نرسیدم این تاپیک رو ایجاد کردم.

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

ویرایش شده در آذر 92 توسط rezayeman

ابوالفضل طالبی · آذر 92

افزونه های tooltip زیاده و تقریبا همشون به صورت پلاگین هستند:

Tooltips - Joomla! Extensions Directory

هر کدوم دارای دسترو العمل استفاده هستند و کلی نمیشه گفت چکار کنید.بهتره دانلود کنید ، نصب کنید و از طریق دستورالعمل استفاده از syntax همون پلاگین کار خودتون رو پیاده سازی کنید

rezayeman · آذر 92

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

ابوالفضل طالبی · آذر 92

خب دوست عزیز میخاید تک تک اینها رو به شما آموزش بدیم؟

شما دقت نکردید به پست من گویا:

هر کدوم دارای دستور العمل استفاده هستند و کلی نمیشه گفت چکار کنید

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

rezayeman · آذر 92

دوست عزیز نوعش فرقی نمیکنه. tool tip یا popup بودن هم فرقی نمیکنه. من میخوام با رفتن ماوس روی عبارت "سوابق کاری" مطلب مربوط به سابقه اون شخص بصورت popup ظاهر بشه و فقط همون متن مورد نظر منو نشون بده. مثل popup مربوط به login کردن در سایت. با فرق اینکه با قرار گرفتن ماوس روی عبارت مطلب ظاهر بشه و وقتی ماوس از اون کنار میره اون مطلب هم مخفی بشه. چند تا پلاگین و ماژول هم نصب کردم اما کار نمیکرد یا اینکه من بلد نبودم چجوری ازش استفاده کنم مثل samplepopup که فقط با لود صفحه ظاهر میشه ونتونستم کاری کنم که تو رویداد mouseover بیارمش. حالا این امکانو نداره یا من بلد نبودم. دوست عزیز من تو جوملا مبتدی هستم و مثل یه مبتدی منو راهنمایی کنید. مرسی

jmahyar152 · آذر 92

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

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

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

<span onmouseover="tooltip(the id)"></span>

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

شما باید یک div با خاصیت "پنهان" (تو مثال مشخصه) در انتهای کارت درست کنی و هر استایلی هم که دوست داری بهش میدی.... ولی حواست باشه کارو خراب نکنی...

حالا آی دی این div، میشه همون چیزی که تو پرانتز نوشته بودی...

سوال هم داری بپرس جواب میدیم مشکل نداره....

اینم مثالش..... ببخشید اگه متناش عجق وجقه:5:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<p>asdasdasfszdfgagafgsf<span onmouseover="tooltip(1)" style="color:red;">asdasd</span>sdasdfdfgsdfgaadfa</p>
<div id="1" style="visibility:hidden; position:absolute; background-color:#eee;">hi... this is your tooltip.</div>

<p>asdasdasfszdfgagafgsf<span onmouseover="tooltip(2)" style="color:red;">asdasd</span>sdasdfdfgsdfgaadfa</p>
<div id="2" style="visibility:hidden; position:absolute; background-color:#eee;">hi... this is your tooltip2.</div>
<script>
function tooltip(thecase){
var thecaseSTR=thecase.toString();
var showdiv=document.getElementById(thecaseSTR);
showdiv.style.marginLeft=event.clientX-15+"px";
showdiv.style.marginTop=event.clicentY-10+"px";
showdiv.style.visibility="visible";
this.onmouseout=function(){showdiv.style.visibility="hidden";};
}
</script>
</body>
</html>

ویرایش شده در آذر 92 توسط jmahyar152

rezayeman · آذر 92

مرسی از راهنماییت.

یه مشکل هست و اینکه من به خاطر مبتدی بودنم از قالبی استفاده میکنم که مجانی هست و کدهای داخل فایلشو بسته و نمیتونم کاری توش انجام بدم و وقتی کد sacript شمارو توی ویرایشگر مطلب مینویسم جوملا اونو حذفش میکنه

jmahyar152 · آذر 92

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

شما کد جاوااسکریپت رو میتونی داخل یکی از فایل های عمومی مثل template.js یا jquery.js یا هر فایلی که مثل اینا تو تمام صفحات لود میشن، اضافه کنی.... البته بکاپ یادت نره ها...

بعد از این کار تنها چیزی که میمونه همون قسمت مربوط به html هستش که تو ویرایشگر جوملا میتونی استفاده کنی.

rezayeman · آذر 92

فایل های template.js و jquery.js های زیادی دارم. تو کدومش باید اینکارو بکنم؟

jmahyar152 · آذر 92

سایتت رو با کروم باز کن. بعد کلیک راست رو بزن و View page source رو بزن. بگرد تو تگ هد، تگ هایی که به یه فایل جاوا اسکریپت متصل هستند رو پیدا کن و آدرسش رو در بیار... مطمئن شو که اون فایل جاوا اسکریپت تو تمام صفحات لود میشه....

حالا کد رو در آخر فایل اضافه کن.

rezayeman · آذر 92

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

ظاهر شدن popup در رویداد mouseover

11 پست در این موضوع

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

ایجاد یک حساب کاربری

ورود به حساب کاربری

خانه

فعالیت ها