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

از آن‌جایی که طراحی سایت پروژه ما کوچک و محدود است ریسک کوچکی در رابطه با زیاده‌روی در طراحی وجود دارد که باید مراقب آن باشیم؛ نباید به سایت خود چیزهایی را اضافه کنیم که نیازی به وجود آن در یک سایت جمع و جور و ساده نیست، پس بیایید یکی دو مثال عملی پیدا کنیم که درک آن‌ها آسان بوده و قابل اعمال به سایت هم هستند. کاری که می‌کنیم به شرح زیر است:

  • در فروم کانتکت از چند مقدار پیش‌فرض برای راهنمایی کاربر استفاده می‌کنیم، به صورتی که بعد از تمرکز کاربر در این بخش‌ها این مقادیر راهنمایی نیز ناپدید شوند.
  • در صفحه گالری سایت نیز می‌توانیم توضیحات عکس‌ها را حذف کرده و با jQuery به نحوی آن‌ها را پیاده کنیم که تنها با قرارگیری ماوس روی هر عکس برای کاربر نمایش داده شوند.

تنظیم فراخوانی‌های jQuery

قدم اول اعمال تغییراتی است که به واسطه آن‌ها بتوانیم کتاب‌خانه jQuery (که به تازگی آن را دانلود کرده‌ایم) و یک فایل JavaScript (با پسوند .js) را درون سایت خود فراخوانی کنیم. برای این کار باید دو خط زیر را به انتهای تمامی صفحات سایت خود اضافه کنیم.

<script type="text/javascript" src="js/jquery-1.5.2.min.js">

</script>

<script type="text/javascript" src="js/common.js"></script>

</body>

</html>

ما تمامی فایل‌های JavaScript را در فولدری با نام js ذخیره کردیم، اما شما در این زمینه می‌توانید انتخاب شخصی خود را دنبال کنید. نکته حائز اهمیت دیگر این است که دو Script بالا در آخر داکیومنت و دقیقا پیش از تگ بسته </body> قرار می‌گیرند. در خیلی از سایت‌ها این دو Script را در ابتدای سایت قرار می‌دهند و شاید خیلی از کتاب‌ها نیز این بخش را به این صورت تدریس کنند اما در نظر داشته باشید که با قرار دادن این کد در ابتدای سایت شاهد کاهش سرعت بارگذاری خواهید بود.

اگر می‌خواهید دلیل این کار را بهتر بدانید شما را به مقاله Steve Souders در Yahoo Developer Network ارجاع می‌دهیم، در غیر این صورت می‌توانیم حرف ما را چشم‌بسته قبول کنید.

فایل JavaScript سایت

اگر این سوال در ذهن شما به وجود آمده که چگونه می‌توان فایل common.js را ساخت بهتر است بدانید که common.js یک فایل متنی ساده است. به راحتی می‌توانید با ساختن یک داکیومنت خالی درون ویرایش‌گر متن خود و ذخیره آن با پسوند .js این فایل را به دست آورید.

اضافه کردن مقدار فرم پیش‌فرض

برای این‌که تمامی Script های ما درون common.js به خوبی اجرا شوند باید از سالم و آماده بودن داکیومنت خود اطمینان حاصل کنیم:

$(document).ready(function(){

//scripts go here

});

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