moslem.hady
دوشنبه 29 شهریور 1389, 14:17 عصر
با سلام. من اين آموزشو ديدم خوشم اومدم. براي مبتديان اينجا ميذارم.
تولتیپ ها توضیحاتی هستند که با رفتن موس روی یک عنصر از فورم نمایش داده میشن و در اکثر جاها از هدر رفتن فضا جلوگیری میشه.
http://0k.010.img98.com/out.php/i347625_9202010124733PM.png
خوب شروع میکنیم. قبل از همه چیز این کتابخونه جی کوئری رو دانلود (http://www.mediafire.com/file/a81s88cx3e90cq8/jquery.js) کن. و بعد این اسکریپت رو دانلود (http://www.mediafire.com/file/3l3p6kvhdxqdqp5/tooltip-text.js)کنید.
بعد روی اسم پروژتون راست کلیک کنید و گزینه Add>> Exiting Item رو بزنید.
http://0k.010.img98.com/out.php/i347724_2.png
بعد به مسیری که فایل های کتابخانه جی کوئری و اسکریپت رو در اونجا ریختین برین و هر دو فایل رو انتخاب کنبد و Add رو بزنید.
بعد در کد HTML خود بین تگ head این کد رو اضافه کنید
<script src="jquery.js" type="text/javascript"></script>
<script src="tooltip-text.js" type="text/javascript"></script>
با این کار کتابخانه جی کوئری و اسکریپت رو به HTML معرفی کردین.
حالا کد زیر رو هم به head اضافه کنید:
<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #eee;
background:#f4f8e0;
padding:4px 8px;
color:#000;
display:none;
font:11px Tahoma;
}
</style>
توجه داشته باشید که اگه بخواین طرح تولتیپ رو عوض کنید، باید این CSS رو تغییر بدین.
حالا هر جایی که خواستین تولتیپ داشته باشین(توی تگ body) این کد رو بنویسین:
<a class="tooltip" title="آموزش برنامه نویسی" href="http://programmer.persianblog.ir/">Programmer</a>
تموم! متن ها رو میتونین عوض کنین!! http://www.persianblog.ir/editor/images/smilies/41.gif
با تشکر از سایت aliha.ir
تولتیپ ها توضیحاتی هستند که با رفتن موس روی یک عنصر از فورم نمایش داده میشن و در اکثر جاها از هدر رفتن فضا جلوگیری میشه.
http://0k.010.img98.com/out.php/i347625_9202010124733PM.png
خوب شروع میکنیم. قبل از همه چیز این کتابخونه جی کوئری رو دانلود (http://www.mediafire.com/file/a81s88cx3e90cq8/jquery.js) کن. و بعد این اسکریپت رو دانلود (http://www.mediafire.com/file/3l3p6kvhdxqdqp5/tooltip-text.js)کنید.
بعد روی اسم پروژتون راست کلیک کنید و گزینه Add>> Exiting Item رو بزنید.
http://0k.010.img98.com/out.php/i347724_2.png
بعد به مسیری که فایل های کتابخانه جی کوئری و اسکریپت رو در اونجا ریختین برین و هر دو فایل رو انتخاب کنبد و Add رو بزنید.
بعد در کد HTML خود بین تگ head این کد رو اضافه کنید
<script src="jquery.js" type="text/javascript"></script>
<script src="tooltip-text.js" type="text/javascript"></script>
با این کار کتابخانه جی کوئری و اسکریپت رو به HTML معرفی کردین.
حالا کد زیر رو هم به head اضافه کنید:
<style type="text/css">
#tooltip{
position:absolute;
border:1px solid #eee;
background:#f4f8e0;
padding:4px 8px;
color:#000;
display:none;
font:11px Tahoma;
}
</style>
توجه داشته باشید که اگه بخواین طرح تولتیپ رو عوض کنید، باید این CSS رو تغییر بدین.
حالا هر جایی که خواستین تولتیپ داشته باشین(توی تگ body) این کد رو بنویسین:
<a class="tooltip" title="آموزش برنامه نویسی" href="http://programmer.persianblog.ir/">Programmer</a>
تموم! متن ها رو میتونین عوض کنین!! http://www.persianblog.ir/editor/images/smilies/41.gif
با تشکر از سایت aliha.ir