شاید شنیده باشید که افراد حرفه ای از چند کد jquery کاربردی همیشه استفاده می کنند. در این مقاله می خواهیم لیستی از ۵ کد jquery که هر برنامه نویس وبی باید آن را بداند ارائه کنیم. این کدها برای انجام کارهای روزانه بسیار مفید هستند. از این ۵ کد jquery می توانید برای تغییر متن دکمه ها، غیرفعال کردن انتخاب متن در وب سایت، بررسی اتصال به اینترنت، تغییر تصادفی رنگ عناصر و ایجاد یک عنصر div استفاده کرد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
آموزش پیشنهادی برای شما : آموزش جی کوئری (jquery) از مقدماتی تا پیشرفته
ادر ادامه به بررسی این ۵ کد jquery خواهیم پرداخت، با ما همراه باشید:
کد jquery برای تغییر متن یک دکمه بعد از کلیک شدن
کد jquery زیر به شما کمک می کند که به راحتی متن یک دکمه بعد از کلیک شدن را تغییر دهید. از تغییر متن برای این است که کاربرد متوجه شود که بر روی این دکمه از قبل کلیک کرده است. به عنوان مثال می توان برای دکمه ارسال از این کد استفاده کرد. در این صورت شما می توانید برای این دکمه در حالت عادی کلمه “ارسال” را در نظر بگیرید. زمانی که کاربر بر روی آن کلیک کرد و عملیات ارسال در حال انجام بود می توانید از متن “در حال ارسال” استفاده کنید. و زمانی که ارسال با موفقیت انجام شد متن “ارسال شد” را جایگزین کنید.
برای این کار کافیست از یک کد jquery ساده استفاده کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(document).ready(function(){ $("#btnSubmit").click(function(){ $(this).val("Submitting..."); //Actual code goes here¦ $(this).val("Submitted..."); }); }); |
غیر فعال کردن انتخاب متن در وب سایت
زمانی که شما در حال رقابت با رقبای زیادی هستید و دارای مقالات منبع و مهمی هستید که برای تهیه آن ها هزینه و زحمت زیادی متحمل شده اید، دیدن متن خود در سایر سایت ها شما را آزار خواهد داد. با این که گوگل افرادی که از شما کپی می کنند را در دراز مدت جریمه می کند اما راه های دیگری برای محافظت از محتوای سایت شما وجود دارد. یکی از مهمترین این راه ها استفاده از یک کد jquery کاربردی است.
با استفاده از این کد شما می توانید انتخاب و کپی متن در وبسایتتان را غیرفعال کنید. کد jquery زیر انتخاب متن در تمام عناصر span، p و div را غیر فعال می کند. به این ترتیب اگر این قطعه کد را به صورت گلوبا استفاده کنید هیچ یک از متن های موجود در صفحات شما کپی نخواهند شد. این کار را به سادگی می توانید انجام دهید:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function(){ $('span,p,div').attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }); |
بررسی اتصال به اینترنت با استفاده از کد jquery
گاهی اوقات قبل از اجرای یک قطعه شما باید ارتباط با اینترنت را بررسی کنید. برای مثال زمانی که کاربران شما در حال عملیات بانکی یا مشاهده یک ویدیو در سایت شما هستند باید از برقراری اتصال اینترنت آن ها برای خوانده شدن کد ها توسط مرورگر مطمئن باشید. برای موارد زمان بندی شده هم این نکته حائز اهمیت است. به همین دلیل یک کد jquery کاربردی برای این کار را به شما معرفی می کنیم. این کد با استفاده از ویژگی navigator.onLine() می تواند آفلاین و آنلاین بودن مرورگر را تشخیص دهد.
آموزش پیشنهادی برای شما : آموزش جاوا اسکریپت از مقدماتی تا پیشرفته
برای استفاده از ویژگی های گفته شده کافی است کد زیر را به خاطر بسپارید:
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { function checkInternet() { var status = navigator.onLine; if (status) return true; else return false; } var bIsInternetAvailable = checkInternet(); }); |
البته شما می توانید خودتان نیز کتابخانه jquery را بررسی کنید. کد jquery زیر به کتابخانه ای از GOOGLE CDN اشاره دارد. دلیل این انتخاب این است که google CDN در ۹۹ درصد مواقع در دسترس و آنلاین است. این نکته خیلی مهم است که کتابخانه انتخابی شما همیشه در دسترس باشد. در غیر این صورت با خطا روبه رو خواهید شد.
تغییر رنگ تصادفی پس زمینه هر یک از عناصر صفحه
با استفاده از یک کد JQUERY شما قادر خواهید بود که رنگ پس زمینه هر یک از عناصر div را در هر دو ثانیه تغییر دهید. این کد ابتدا یک شماره رنگ تصادفی با استفاده از تابع math.random() ایجاد می کند. سپس از متد jquery.css() برای تعیین ویژگی رنگ پس زمینه css استفاده می کند. به این ترتیب برای مقدار شماره رنگ اعداد متفاوتی انتخاب می شود و این کار هر ۲ ثانیه یک بار انجام خواهد شد.
استفاده از این کد می تواند هایلایت های زیبایی ایجاد کند اما در استفاده از آن زیاده روی نکنید در این صورت افرادی که از سایت شما بازدید می کنند دچار سرگیجه خواهند شد. این کد به صورت زیر ارائه شده است:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function() { function ApplyColor() { var randomColor = Math.floor(Math.random() * 16777215).toString(16); $('div').css("background-color", '#' + randomColor); setTimeout(changeColor, 2000); } ApplyColor(); }); |
مشکل دیگری که برای استفاده از اید کد وجود دارد این است که ما کنترلی برای انتخاب رنگ ها نداریم. تولید رندوم رنگ ها می تواند سبب شود عناصر دیزاین خوبی نداشته باشند. پس بهتر است از یک مجموعه رنگ مشخص که مد نظر ما است به صورت تصادفی انتخاب رنگ صورت گیرد. برای این کار باید از کد jquery زیر استفاده کنیم. این کد ۴ آرایه مشخص از رنگ ها را تعیین کرده است.
|
1 2 3 4 5 6 |
function ApplyColor() { var rndColors = ["#00FF00", "#CCCCCC", "#995499", "#FF9900"]; var selColor = Math.floor(Math.random() * rndColors.length); $('div').css("background-color", rndColors[selColor]); setTimeout(changeColor, 2000); } |
ساخت یک overlay div بر روی صفحه و از بین رفتن آن با کلیک
یک overlay در واقع یک عنصر div است که به صورت ثابت روی صفحه می ماند. حتی موقع ای که در حال اسکرول صفحه هستید و ظرفیت ایجاد یک لایه افکت را دارد. کد jquery که در ادامه آن را معرفی خواهیم کرد می تواند یک overlay div ایجاد کند، بر روی body در html نمایش دهد و بعد از کلیک شدن بر روی ان از بین برود:
|
1 2 3 |
$(document).ready(function() { $(' ') .css({ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, opacity: 0.8, background: 'DarkGrey', display: 'none' }) |
جمع بندی
به صورت خلاصه می توان گفت که این کد های jquery را باید در جعبه ابزار خود همیشه نگه دارید. زیرا بسیار کاربردی هستند و برای چند عملکرد مختلف راه حل ها ای را ارائه می دهند. همین کد های کوچک می توانند در زمان شما صرفه جویی کنند و به عملکرد بهتر سایت شما نیز کمک خواهند کرد. مهمترین نکته همین است که به راحتی می توانید از آن ها در صورت نیاز استفاده کنید.
منبع : طراحی سایت
