Milad
Well-Known Member
بعد از مدتها امروز فرصت کردم یه آموزش کوچیک تهیه کنم ؛ امیدوارم مفید باشه .
قصد داریم توی چند مرحله برای فرم هامون یک Tool tip تهیه کنیم که با کمی تغییرات میتونید به هر شکل که تمایل دارید تغییرش بید توی این تایپیک میبینید که چقدر ساده با دستورات معمولی jquery و css میشه کارای جالبی کرد .
دمو این ToolTip رو میتونید اینجا مشاهده کنید .
مرحله اول )
دقت کنید که ما برای ساخت این ToolTip از jquery استفاده میکنیم در نتیجه با رفتن به jquery.com آخرین نسخه این فریم ورک رو دانلود کنید و توی پوشه پروژتون قرار بدید
در اولین مرحله باید فرم خودمون رو طراحی کنیم :
- در خط 7 فریم ورک jquery رو به فایل html خودمون ضمیمه کردیم .
- در خط 10 یک div زدیم و فرم خودمون رو در اون درج کردیم برای استایل دهی به این div ای دی Form رو دادیم .
- در خط 12 تا 18 عناصر فرممون رو درج کردیم و بهشون کلاس form-items رو دادیم تا بعدا در js اگر کاربر خواست توشون مطلبی بنویسه ما متوجه بشیم و tooltip رو نمایش بدیم همینطور در شاخص title براشون متنی درج کردیم که بعدا به عنوان tooltip نمایششون میدیم .
- در خط 20 یک div زدیم با ایدی description که از این div برای نمایش متن tooltip استفاده خواهیم کرد .
مرحله دوم )
حالا باید با استفاده از Css یکمی به فرممون سر و سامون بدیم و امکان جا به جایی رو برای description div فراهم کنیم .
در این قسمت به عناصر صفحمون استایل مورد نظرمون رو دادیم ، توجه کنید برای اینکه div ما بتونه حرکت کنه ( موقعیتش قابل تعیین و تغییر باشه ) باید دارای absolute position باشه ، همینطور برای اینکه از ابتدا مشخص نباشه باید مخفیش کنیم .
مرحله سوم )
خوب رسیدیم به قدم نهایی ! در این قسمت باید کد jquery رو برای کنترل tooltip بنویسیم .
با گرفتن فکوس توسط هر کدوم از عناصر فرم ما که کلاس form-items دارند کد بالا اجرا میشه !
در خط سوم موقعیت عنصری که فکوس گرفته رو توی متغیر position میریزیم ( فاصله اون از طرفین ) .
در خط چهارم محتوای شاخص title هر عنصر فرممون رو در متغیر description میریزیم که همون tooltip ما هست .
در خط پنجم اندازه فیلدی که فکوس گرفته رو در متغیر field_width ذخیره میکنیم تا tooltip خودمون رو نسبت به اون نمایش بدیم . ( نسبت به سمت چپ )
در خط ششم مقداری که توی متغیر field_width ریختیم رو قسمت عددیش رو نگه میداریم ، چون این مقدار یک رشته هست ، در واقع یک px کنارش داره ! حالا چرا عدد کردیمش ؟ چون میخوایم مقداری از این عدد کم کنیم تا بعد از موقعیت دادن به tooltip ، روی عنصر نمایش داده بشه .
در خط هفتم هم که مقدار مورد نظرمون رو از field_width کم کردیم
در خط هشتم مقداری که در متغیر description قرار دادیم ( همون متن tool tip ) رو در div ای که برای Tool tip در نظر گرفتیم قرار میدم .
در خط نهم با استفاده از animate موقعیت description div رو با موقعیت عنصر مورد نظر که فکوس گرفته ، توسط اطلاعاتی که پیشتر به دست آوردیم تنظیم میکنیم .
و در خط بعدی tooltip div خودمون رو از حالت مخفی در میاریم تا دیده بشه ...
در قسمت بعدی کد ، یعنی اینجا :
از رویداد blur استفاده کردیم ، تا در زمانی که عناصر مورد نظر ما فکوس رو از دست دادند tooltip مخفی بشه .
کد کامل به این صورت میشه :
فایل های آموزش رو به صورت آماده دانلود و استفاده کنید . ( اتچ شدند ) .
خیلی ممنون که باهام همراه بودید ، اگر مشکلی میبینید خوشحال میشم بیان کنید تا رفع بشه ، روشی که استفاده کردیم فقط یک نمونه بود که به ذهن من رسید ، قطعا روش های بهتری هم وجود داره و با کمی خلاقیت میشه به روش های مختلف این کار رو انجام داد .
موفق باشید ، میلاد ..
قصد داریم توی چند مرحله برای فرم هامون یک Tool tip تهیه کنیم که با کمی تغییرات میتونید به هر شکل که تمایل دارید تغییرش بید توی این تایپیک میبینید که چقدر ساده با دستورات معمولی jquery و css میشه کارای جالبی کرد .
دمو این ToolTip رو میتونید اینجا مشاهده کنید .
مرحله اول )
دقت کنید که ما برای ساخت این ToolTip از jquery استفاده میکنیم در نتیجه با رفتن به jquery.com آخرین نسخه این فریم ورک رو دانلود کنید و توی پوشه پروژتون قرار بدید
( این فایل در فایل های پروژه نهایی که اتچ کردم قرار داره )
در اولین مرحله باید فرم خودمون رو طراحی کنیم :
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Milad Roxeta Tool Tip</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.5.min.js"></script>
</head>
<body>
<div id="form">
<form>
<input class="form_items" type="text" title="نام" />
<input class="form_items" type="text" title="ایمیل" />
<input class="form_items" type="text" title="فیلد" />
<input style="width:190px" class="form_items" type="text" title="فیلدی دیگر" />
<textarea class="form_items" title="متن" /></textarea>
<input type="button" value="send" />
<div id="description"></div>
</form>
</div>
</body>
</html>- در خط 10 یک div زدیم و فرم خودمون رو در اون درج کردیم برای استایل دهی به این div ای دی Form رو دادیم .
- در خط 12 تا 18 عناصر فرممون رو درج کردیم و بهشون کلاس form-items رو دادیم تا بعدا در js اگر کاربر خواست توشون مطلبی بنویسه ما متوجه بشیم و tooltip رو نمایش بدیم همینطور در شاخص title براشون متنی درج کردیم که بعدا به عنوان tooltip نمایششون میدیم .
- در خط 20 یک div زدیم با ایدی description که از این div برای نمایش متن tooltip استفاده خواهیم کرد .
مرحله دوم )
حالا باید با استفاده از Css یکمی به فرممون سر و سامون بدیم و امکان جا به جایی رو برای description div فراهم کنیم .
کد:
<style type="text/css">
body{background-color:#636262;}
#form{
position:relative;
width:275px;
height:273px;
text-align:center;
margin:50px auto;
}
input,textarea{
display:block;
margin-top:5px;
border:1px solid #FFF;
background:#cfcfcf url(input.png) repeat-x;
}
#description{
position:absolute;
display:none;
top:0px;
left:0px;
width:110px;
height:45px;
color:#FFF;
margin:0px;
padding-top:10px;
text-indent:50px;
font:12px tahoma;
background-image:url(tooltip.png);
}
</style>
کد:
display:none;خوب رسیدیم به قدم نهایی ! در این قسمت باید کد jquery رو برای کنترل tooltip بنویسیم .
کد:
$(document).ready(function(){
$('.form_items').focus(function(){
var position = $(this).position();
var description = $(this).attr('title');
var field_width = $(this).css('width');
field_width = /\d+(?:\.\d+)?/.exec(field_width);
field_width -= 30;
$('#description').text(description);
$('#description').animate({top : position.top - 38,left : field_width },'fast');
$('#description').toggle();
});
$('.form_items').blur(function(){
$('#description').toggle();
});
});در خط سوم موقعیت عنصری که فکوس گرفته رو توی متغیر position میریزیم ( فاصله اون از طرفین ) .
در خط چهارم محتوای شاخص title هر عنصر فرممون رو در متغیر description میریزیم که همون tooltip ما هست .
در خط پنجم اندازه فیلدی که فکوس گرفته رو در متغیر field_width ذخیره میکنیم تا tooltip خودمون رو نسبت به اون نمایش بدیم . ( نسبت به سمت چپ )
در خط ششم مقداری که توی متغیر field_width ریختیم رو قسمت عددیش رو نگه میداریم ، چون این مقدار یک رشته هست ، در واقع یک px کنارش داره ! حالا چرا عدد کردیمش ؟ چون میخوایم مقداری از این عدد کم کنیم تا بعد از موقعیت دادن به tooltip ، روی عنصر نمایش داده بشه .
در خط هفتم هم که مقدار مورد نظرمون رو از field_width کم کردیم
در خط هشتم مقداری که در متغیر description قرار دادیم ( همون متن tool tip ) رو در div ای که برای Tool tip در نظر گرفتیم قرار میدم .
در خط نهم با استفاده از animate موقعیت description div رو با موقعیت عنصر مورد نظر که فکوس گرفته ، توسط اطلاعاتی که پیشتر به دست آوردیم تنظیم میکنیم .
و در خط بعدی tooltip div خودمون رو از حالت مخفی در میاریم تا دیده بشه ...
در قسمت بعدی کد ، یعنی اینجا :
کد:
$('.form_items').blur(function(){
$('#description').toggle();
});کد کامل به این صورت میشه :
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>Milad Roxeta Tool Tip</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
body{background-color:#636262;}
#form{
position:relative;
width:200px;
margin:50px auto;
}
input,textarea{
display:block;
margin-top:5px;
border:1px solid #FFF;
background:#cfcfcf url(input.png) repeat-x;
}
#description{
position:absolute;
display:none;
top:0px;
left:0px;
width:110px;
height:45px;
color:#FFF;
margin:0px;
padding-top:10px;
text-indent:50px;
font:12px tahoma;
text-align:center;
background-image:url(tooltip.png);
}
</style>
<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script>
$(document).ready(function(){
$('.form_items').focus(function(){
var position = $(this).position();
var description = $(this).attr('title');
var field_width = $(this).css('width');
field_width = /\d+(?:\.\d+)?/.exec(field_width);
field_width -= 30;
$('#description').text(description);
$('#description').animate({top : position.top - 38,left : field_width },'fast');
$('#description').toggle();
});
$('.form_items').blur(function(){
$('#description').toggle();
});
});
</script>
</head>
<body>
<div id="form">
<form>
<input class="form_items" type="text" title="نام" />
<input class="form_items" type="text" title="ایمیل" />
<input class="form_items" type="text" title="فیلد" />
<input style="width:190px" class="form_items" type="text" title="فیلدی دیگر" />
<textarea class="form_items" title="متن" /></textarea>
<input type="button" value="send" />
<div id="description"></div>
</form>
</div>
</body>
</html>خیلی ممنون که باهام همراه بودید ، اگر مشکلی میبینید خوشحال میشم بیان کنید تا رفع بشه ، روشی که استفاده کردیم فقط یک نمونه بود که به ذهن من رسید ، قطعا روش های بهتری هم وجود داره و با کمی خلاقیت میشه به روش های مختلف این کار رو انجام داد .
موفق باشید ، میلاد ..
آخرین ویرایش:
