همیشه هستن کسایی که دوست دارن سایت اینترنتیشون رو متمایز از بقیه و به شکل زیباتر به نمایش بزارن. خیلیها از فلش و انواع و اقسام ترفندها و عکسهای گرافیکی برای خاصتر کردن وبسایتشون استفاده میکنن.
یکی از چیزهایی که تازگیها خیلی مورد توجه طراحهای وب قرار گرفته جیکوئری هستش. جیکوئری اساسش از جاوا اسکریپ و دست طراحها رو برای خیلی از کارا باز میکنه (جیکوئری چیست؟)، از طراحی رابط کاربری (چیزی که بازدید کننده مشاهده میکنه) گرفته تا طراحی هستههای سیستمهای مدریت محتوا.
قرار شما هم تو این آموزش یاد بگیرید که چجوری تولتیپ لینکهای یک صفحهی وب رو سفارشی کنید و از این شکل و شمایل تکراری درش بیارید. (تولتیپ: متنی که وقتی نشانگر موس رو روی لینکی نگه میدارید ظاهر میشه). نمونش رو هم میتونید توی همین وبلاگ ببینید.
خب دست بکار میشیم، اول از همه شما باید فایل tooltip.js رو توی header صفحهی وبتون قرار بدید. فایل مورد نظر رو از اینجا دریافت کنید و به صورت کد زیر بزارید توی header صفحتون.
<script type="text/javascript" src="tooltip.js"></script>
نکته: به جای tooltip.js که توی کد بالا هست، باید آدرس کامل فایل رو قرار بدید.
تقریباً کار تمام شد، حالا برای این که این تولتیپ ما خوشگلتر بشه یک کد سیاساس کوچیک هم بهش اضافه میکنیم و به اصطلاح خودمون سفارشیش میکنیم تا رنگ و لعابش مطابق با کل صفحه بشه.
کدهای زیر رو هم توی تگ style وبلاگتون و یا توی فایل style.css قالبتون بزارید.
div#qTip {
background: #fff;
border: 1px solid #666;
color: #000000;
display: none;
direction: rtl;
font: 11px tahoma;
position: absolute;
padding: 3px;
z-index: 10000;
}
به همین راحتی، بقیش هم دیگه بستگی به خودتون داره که بر اساس سلیقهی خودتون کدهای سیاساس رو ویرایش کنید و تولتیپ دلخواهتون رو از توش دربیارید.







بسیار عالی بود…
فقط اینکه با Opera کار نمیکنه :دی
فیکس شد خبرم کنید.
;)
اندیشمندنقلقول
من که توی اپرا هم تست کردم جواب داد!
آرماننقلقول
مشکل از درک بنده بود!
فکر می کردم با کد CSS ی که گذاشتین، مثل شکل، گوشه های ToolTip هم گرد میشه، که برطرف شد!
;)
اندیشمندنقلقول
سلام داداش. ممنون که که این مطلب رو گذاشتی. عالی بود
اگه اجازه بدی می خوام بزارمش تو سایتم. موفق باشی
امیننقلقول
اگه لینک منبع رو هم بزارید اشکال نداره!
آرماننقلقول
داداش من فقط یه مشکلی دارم. می خواستم برام رفعش کنی
می خوام تو خط مرزی(یا همون خط دوری تولتیپ) فقط قسمت طولش رنگ داشته باشه. و عرضش خالی باشه یعنی رنگ نداشته باشه.مثه عکسه زیر.
http://0k.010.img98.com/out.php/i285517_548154268.jpg
http://itupload.ir/images/jobommq7jkhx47hoep1.jpg
داش اگه می تونی اوکی کن و همین جا واسم بزار. منتظرم
امیننقلقول
باید توی خط دوم کد سیاساس به جای
border: 1px solid #666;عبارت زیر رو بزارید:border-top: 1px solid #000; border-bottom: 1px solid #000;آرماننقلقول
داش با لینکه منبع گذاشتم تو سایتم
داش این کدی که گذاشتی فقط بالا رو اوکی میکنه هر کاری کردم پایین رو نتونستم بیارم
درستش کن.منتظرم
امیننقلقول
یه غلط تایپی توش بود، اصلاحش کردم.
border-top: 1px solid #000; border-bottom: 1px solid #000;آرماننقلقول
من همه ی اینکارا رو به دقت انجام دادم
ولی تغیری ایجاد نشد
رضانقلقول
این طور که من توی وبسایت شما دیدم، شما فایل
tooltip.jsرو درست آدرس دهی نکردید.آرماننقلقول
مطلب مفیدی بود ممنون
احمدنقلقول
سلام.
میخواستم این تولتیپ رو روی قالب وردپرسم اجرا کنم
توی style.css اون دستورات رو گذاشتم
توی پوشه قالب اون فایل js رو گذاشتم
بعددستور زیر رو توی header.php تو قسمت گذاشتم
کار نکرد
باید چیکار کنم؟
ساساننقلقول
بررسی کنید ببینید آدرس فایل js رو، توی دستوری که تو فایل header.php گذاشتید درست هستش یا نه؟
آرماننقلقول
بله
حتی فایل js رو جفت header.php گذاشتم تا بابت آدرس دادن مطمئن بشم
حتی توی head و body فایل header.php گذاشتم.
مشکلش چیه؟
ساساننقلقول
قشنگه!
========================================
کد CSS پوستتون این تیکه رو کم داره:
input[name=email],input[name=author]{
direction:ltr;
}
محمد جعفرنقلقول
مرسی از راهنماییتون.
آرماننقلقول
آخ آخ نمیدونم یهو چی تو ذهنم گذشته که اشتباهی
input[name=url]رو نوشتمinput[name=author]!محمد جعفرنقلقول
آرمان جان من چیکار کنم با این مشکل؟
ساساننقلقول
شاید افزونهای نصب کردید که با فایل js این تولتیپ تداخل داره!
آرماننقلقول
فعلا فقط جلالی فعاله
هیچ افزونه ای هم غیر از جلالی و آکیسمت و هلو دولی نیست
ساساننقلقول
آدرس وبت رو بده ببینم.
آرماننقلقول
رو لوکال دارم تست میکنم
اگه میشه خوت یه دستور کار با جزئیات بذاری ممنون میشم. شاید جزئیات ساده ای رو رعایت نمی کنم که کار نمی کنه
ساساننقلقول
آموزش بالای من کامل، قدم به قدم باش پیش برید میتونید.
آرماننقلقول
شاید مشکل از فایل جاوااسکریپت باشه!
Alirezaنقلقول
سلام
ممنون از مطلب مفیدتون خیلی باحاله :دی
لطفا افزونه اشتراک گذاری که تو سایتتون استفاده کردید رو بزارید رو هم بزارید
حسیننقلقول
agha man too style ino bezaram
dg niyaz nis too ghaleb ham code i chizi bezaram?
hamin kefayat mikone ?
rasti havasam nabood
site e khoobi dari:d
مجیدنقلقول
فایل جاوا اسکریپت رو هم باید بزارید تو قالب.
آرماننقلقول
من قدم به قدم انجام دادم
روی دو سه تا قالب هم انجام دادم
اما نمیشه !
چه کنم ؟
حاج محمدنقلقول
نمیدونم، شاید یه جای کارتون میلنگه، من بارها امتحان کردم و جواب گرفتم ازش.
آرماننقلقول
در جواب دوستی گفتید که( شاید افزونهای نصب کردید که با فایل js این تولتیپ تداخل داره!) کدوم افزونه ها تداخل داره ؟
حاج محمدنقلقول
دستت درد نکنه کلی دنبال این قابلیت بودم تا اینکه اینجا پیداش کرد اگر ممکنه اسکریپت های جی کوئری بیشتری معرفی کنید و خواهشا چیزی معرفی کنیم که نه تنها در وردپرس بلکه در سایر سیستم های مدیریت محتوا قابل استفاده باشه
balochkhanنقلقول
سلام
اگه بخوام این جی کوئری با FadeIn بیاد باید چی کار کنم ؟ توی چند تا سایت دیدم اینجوری استفاده کرده بودن خیلی زیبا شده بود
Hosseinنقلقول
آرمان جان لطفا این سوال من رو هم جواب بده دیگه ۱ ماه گذاشت من هنوز منتظرم :D
Hosseinنقلقول
حسین جان، اونها با کدهای دیگهای این کار رو انجام میدن، من تا حالا FadeIn رو تو این اسکریپت استفاده نکردم!
آرماننقلقول
this post is very usefull thx!
study abroad scholarshipنقلقول
آرمان جان میشه بگی تول تیپ سایت خودت استایلش چیه
چون خیلی قشنگه من که خیلی ازش خوشم اومد
balochkhanنقلقول
سلام دوست عزیز
سایت زیبایی داری و برای همین بهت تبریک میگم.
متاسفانه من هرکاری تونستم کردم اما نتونستم که تول تیب سایتم را تغییر بدم تمام مراحلی را که گفته بودی انجام دادم اما نشد. لطفا راهنمایی کن و یا یه کد دیگه بزار
ممنونم
راستی خیلی دنبال کدی گشتم که واسه لود تصاویر گذاشتی اما پیدا نکردم. اگر امکان داره کد اون را هم بزار.
بازم ممنونم
مرتضینقلقول
عالی بود
فرهادنقلقول
خیلی زیباست ، مرسی . وب خوبی داری ولی حیف که دیر به دیر بروز می کنی!؟
امیرنقلقول
سپاس، درگیریها یه مقدار زیادن، زیاد وقت برای وبلاگ نمیمونه :)
آرماننقلقول