10 قطعه کد جی کوئری که هر طراحی وبی باید بداند

سامان

امروزه جی کوئری بر روی میلیون ها صفحه وب استفاده می شود .

بخشی از محبوبیت جی کوئری به دلیل سادگی آن می باشد . ما می توانیم هر کاری را با این کتابخانه قدرتمند انجام دهیم .

من برخی از قطعه کدهای جی کوئری را که استفاده زیادی از آن ها می شود برای شما قرار میدهم.

دکمه برگشت به بالا :

اگر دقت کنید بدون استفاده از پلاگینی ، با استفاده از دو تابع animate و scrollTop در جی کوئری یک کد ساده اسکرول شدن با سمت بالا صفحه به صورت انیمیشن را ساختیم .

با تغییر مقدار scrollTop ما می توانیم مکانی که می خواهیم صفحه در آنجا متوقف شود را تغییر دهیم ، و با دادن مقدار 0 می توانیم اسکرول را با بالاترین نقطه صفحه ببریم .

با تغییر مقدار دوم تابع animate سرعت اسکرول شدن را کم یا زیاد کنیم .

بررسی لود شدن عکس :

خیلی وقت ها شما نیاز دارید عکس هایتان را بررسی کنید تا مطمئن شوید کامل لود شده اند یا نه .

با این سه خط کد شما به راحتی می توانید این کار را انجام دهید .

شما همچنین می توانید با جایگزین کردن تگ img همراه با class یا id ، عکس خاصی را مورد بررسی قرار دهید .

جایگزین عکس های خراب به صورت اتوماتیک :

گهگاهی ما برای تغییر عکس های خراب در سایت ، نیاز به تغییر آن ها با عکس دیگری داریم که این کار راحتی نیست .

با اضافه کردن قطعه کد بالا می توانیم به صورت اتوماتیک عکس های خرابمان را با عکسی دیگر جایگزین کنیم .

حتی اگر شما هیچ عکس خرابی در سایتتان ندارید ، این قطعه کد آسیبی به سایتتان نمیزند .

اضافه و حذف کردن class در ایونت hover :

با این قطعه کد زمانی که شما ماوس را روی عنصری با کلاس btn ببرید (hover کنید) کلاسی با نام hover به عنصر شما اضافه می شود .

و بعد از آنکه ماوس را از روی عنصر بردارید کلاس hover از آن حذف میشود .

شما می توانید با اضافه کردن این کلاس ، استایل های خود را در css نوشته و به عنصر خود مرتبط نمایید .

غیر فعال کردن فیلدهای input :

ممکن است شما بخواهید دکمه ارسال یک فرم یا یکی از input های موجود در آن را غیر فعال کنید ، تا زمانی که کاربر یک عمل خاص انجام دهد .

به طور مثال ، پر کردن چیزی یا انتخاب “شرایط را خوانده ام” .

این قطعه کد ویژگی disable را به ورودی شما اضافه میکند و هر زمان که شما خواستید می توانید این ویژگی را حذف نمایید .

برای این کار هم شما باید تابع removeAttr را مانند قطعه کد زیر استفاده کنید :

توقف بارگذاری لینک ها :

fade و slide در حالت رفت و برگشت :

توابع fade و slide در افکت هایی که به صورت انیمیشنی در میکنیم بسیار استفاده میشوند .

ما میتوانیم این توابع را به صورت تک تک ، مانند fadeIn ، fadeout ، slideDown و slideUp استفاده کنیم .

اما اگر بخواهیم از همین توابعی به صورتی استفاده کنیم که با کلیک کردن عنصری محو شود و با کلیک دوباره عنصر ظاهر شود ، می بایست مانند کد بالا عمل کنید .

آکاردئون ساده :

همانطور که در کد بالا می بینید ابتدا تمام پنل ها در آکاردئون ما بسته شده اند .

سپس با ایونت کلیک محتوای ما به صورت رفت و برگشت باز و بسته می شود .

با این روش شما می توانید یک پنل آکاردئونی ساده بسازید .

دو div هم ارتفاع :

گاهی اوغات شما می خواهید دو div بدون در نظر گرفتن محتوای داخل آن ها از نظر ارتفاع یک اندازه باشند .

این روش برای طراحی های flat بیشتر قابل استفاده خواهد بود ، چون اندازه div ها در صفحه با هم برابر خواهند بود .

ul های قالب بندی نشده گورخری :

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

شما می توانید به صورت پیش فرض یک رنگ را برای عنصر خود انتخاب کنید و با این کد یکی در میان رنگی که مد نظر دارید ، به رنگی که در کد خود داده ای تغییر دهید .

2
اشتراک گذاری
سامان
سامان

فارغ التحصیل کارشناسی نرم افزار، علاقه مند به برنامه نویسی، طراحی وب، تکنولوژی های نوین، یادگیری و فیلم

پاسخ دهید