طراحی سایت ساناتک
0
اضافه کردن کامنت در jQuery

همان‌طور که در HTML با استفاده از <!.. ..> و در CSS با /* */ کامنت‌های خود را گذاشتیم، می‌توانیم در فایل JavaScript خود نیز این کار را انجام دهیم؛ در این‌جا می‌توانیم یادداشت‌های خود را با عبارت // آغاز کنیم (همان‌طور که در کد بالا مشاهده کردید)، اگر هم می‌خواهید چندین کامنت را در داکیومنت .js خود ثبت کنید می‌توانید از /* */ استفاده کنید.

در ادامه به سراغ ورودی‌های فرم خود رفته و به هر کدام از آن‌ها یک مقدار پیش‌فرض می‌دهیم. بیایید با فیلد نام کار خود را شروع کنیم:

$("#contactname").val("Please enter your full name");

توجه داشته باشید که این فیلد به وسیله مقدار id خود رفرنس شده (#contactname)

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

$(document).ready(function(){ });

قرار دهید.

حالا فایل را ذخیره کرده و مرورگر خود را رفرش نمایید؛ خواهید دید که فیلد اول فرم ما از متن راهنمایی که برای آن در نظر گرفتیم برخوردار شده است (عکس 11.4).

 فرم ما با متون راهنمای پیش‌فرض

عکس 11.4: فرم ما با متون راهنمای پیش‌فرض بارگذاری شده است

حالا می‌توانیم به تمامی فرم خود متن‌های راهنمای پیش‌فرض اضافه کنیم:

$(document).ready(function(){

$("#contactname").val("Please enter your full name");

$("#telephone").val("Incl local dialling code");

$("#eventdate").val("Format DDMMYYYY");

$("#details").val("The more you can enter here, the less we have

to check with you :)");

});

فایل common.js را ذخیره کرده و صفحه contact us را رفرش کنید. بررسی کنید که تمامی فیلد‌های فرم سایت از متن‌های راهنما برخوردار شده باشند (نتیجه کار را در عکس 11.5 مشاهده نمایید).

اضافه کردن متن راهنما

عکس 11.5: اضافه کردن متن راهنما برای کمک‌رسانی به کاربر در پر کردن فرم

تغییر جدید با تمام ویژگی‌های خوبی که به فرم ما اضافه می‌کند تعدادی نکته منفی هم دارد: برای وارد کردن اطلاعات در هر یک از فیلدها، کاربر باید متن پیش‌فرض را حذف کرده و یا آن را مارک کرده، با مشخصات خود جایگزین نماید؛ با اضافه کردن کد‌های زیر این مشکل را برطرف خواهیم کرد:

$(document).ready(function(){

$("#contactname").val("Please enter your full name");

$("#telephone").val("Incl local dialling code");

$("#eventdate").val("Format DDMMYYYY");

$("#details").val("The more you can enter here, the less we have

to check with you :)");

$("input, textarea").focus(function(){

$(this).select();

});

});

با استفاده از دستور $("input, textarea")توانستیم تگ‌های input و textarea را هم‌زمان انتخاب کنیم. علامت کاما دقیقا همان نقشی را ایفا می‌کند که پیش‌تر در انتخاب‌کننده‌های CSS دیده بودیم؛ کاما به معنی "یا" می‌باشد.

حال زمانی که کاربر بر روی هرکدام از فیلد‌ها کلیک می‌کند متن پیش‌فرض درون آن‌ها به طور خودکار مارک شده و کاربر می‌تواند به راحتی آن را حذف کرده و یا متن خود را جایگزین آن نماید (عکس 11.6).

با jQuery متن مورد نظر را با متن راهنما جایگزین کرد

عکس 11.6: با استفاده از jQuery می‌توان به راحتی متن مورد نظر را با متن راهنما جایگزین کرد

اگر در این بخش ایرادی در کد شما به وجود آمده و به نتیجه مورد نظر خود نرسیدید نگران نباشید، توجه کنید که JavaScript نسبت به HTML و CSS سخت‌گیرتر است.

تعداد بازدید: 283
نویسنده: هانیه سهرابی
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
verification
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید