rezayeman

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

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

ارسال شده در (ویرایش شده)

با سلام.

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

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

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

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

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

ویرایش شده در توسط rezayeman

Share this post


Link to post
Share on other sites
آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

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

Tooltips - Joomla! Extensions Directory

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

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

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

Share this post


Link to post
Share on other sites

ارسال شده در (ویرایش شده)

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

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

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

<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>

ویرایش شده در توسط jmahyar152

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

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

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

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

دارای حساب کاربری هستید؟ از اینجا وارد شوید


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