دسته بندی
-
10 دستور jQuery که طراحان وب می بایست بدانند
-
jQuery در صفحان وب سایت بسیاری مورد استفاده قرار می گیرد. و یکی از متداول ترین کتابخانه هایی است که در صفحات وب سایت استفاده می شود, که عمکرد آن با آبجکت DOM است. البته, دلیل اصلی استفاده از jQuery سادگی آن است. و شما می توانید هر کاری توسط این کتابخانه انجام دهید. چندین دستور و کد از آن وجود دارد که به صورت مرتب مود استفاده طراحان و برنامه نویسان وب قرار می گیرد. در این بخش به شما 10 دستور را که به صورت متداول مورد استفاده قرار می گیرد را می آورم....
-
00
-
بازدید این صفحه : ۹۰۴۳تاريخ : 03 بهمن 1400
1) دکمه بازگشت به بالا
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
Back to top
به طوری که در بالا مشاهده می نمایید تابع animate و scrollTop در jQuery برای اسکرول به بالا به صورت انیمیشنی نیازی به پلاگین jQuery وجود ندارد.
با تغییر مقدار scrollTop می توانیم اسکرول را به جایی که می خواهیم هدایت نماییم, در برخی از زمان ها این مقدار 0px است ولی می توانید به آن سایر مقدارها را نیز بدهید.
عدد 800ms مدت زمان انجام این کار می باشد کخ به صورت انیمیشن این کار انجام می شود.
2) بررسی آنکه تصاویر لود شده باشند
$(‘img’).load(function() {
console.log(‘image load successful’);
});
برخی از زمان ها احتیاج دارید بدانید که آیا تصاویر لود شده اند و یا خیر تا ادامه اسکریپت را انجام دهید, در این سه خط jQuery ما این کار را به سادگی انجام داده ایم.
همچنین شما با رد کردن نام کلاس و مشخصه تصویر می توانید تصویر خاصی را بررسی نمایید.
3) تعمیر تصاویر مشکل دار به صورت اتوماتیک
$('img').error(function(){
$(this).attr('src', ‘img/broken.png’);
});
در برخی از زمان ها زمان کافی برای جایگزین نمودن تمام تصاویر مشکل دار را نداریم و می توانیم این کار را با تابع مورد نظر انجام دهیم
در صورتی که حتی تصویر مشکل داری ندارید اضافه کردن این کد ضرری برای سایت شما ندارد.
4) Toggle class on hover
$(‘.btn').hover(function(){
$(this).addClass(‘hover’);
}, function(){
$(this).removeClass(‘hover’);
}
);
معمولا قصد داریم زمانی که موس بر روی منطقه خاصی حرکت می نماید کلاس آن بخش را تغییر دهیم, این دستور زمانی که کاربر بر روی آیتمی موس خود را نگاه داشته کلاس هاور را به آن اضافه می نماید و زمانی که کاربر از روی آیتم حرکت می نماید کلاس را حذف می نماید, بنابراین تنها موردی که نیاز دارید آن است که به کلاس مورد نظر CSS های لازم را ارجاع دهید.
5) غیر فعال کردن فیلدهای فرم
$('input[type="submit"]').attr("disabled", true);
در برخی از زمان ها احتیاج دارید که فیلدی از فرم خود را غیر فعال نمایید تا کاربر نتواند بر روی فیلد مورد نظر کلیک نماید و یا مطلبی درج نماید این کار را با دستور بالا انجام می دهید.
برای فعال سازی دوباره فیلد می توانید از دستور زیر استفاده نمایید:
$('input[type="submit"]').removeAttr("disabled”);
6) جلوگیری از لود کردن لینک ها
$(‘a.no-link').click(function(e){
e.preventDefault();
});
در برخی از زمان ها لازم است که لینکی به کاربر نمایش داده نشود از طریق کد بالا این کار انجام می شود
7) Toggle فید/اسلاید
// Fade
$( “.btn" ).click(function() {
$( “.element" ).fadeToggle("slow");
});
// Toggle
$( “.btn" ).click(function() {
$( “.element" ).slideToggle("slow");
});
در برخی از مناطق لازم است افکت های فید و اسلاید jQuery انجام شود, برخی زمان ها لازم است برای نمایش آیتمی خاص از روش فید و اسلاید استفاده شود که با کلیک بر روی آیتمی خاص اتفاق می افتد, زمانی مع لازم است با یک کلیک کاربر آیتم نمایش داده شود و با کلیک بعدی آیتم حذف شود از دستور بالا استفاده می گردد.
8) ساده accordion
// Close all Panels
$('#accordion').find(‘.content').hide();
// Accordion
$('#accordion').find(‘.accordion-header').click(function(){
var next = $(this).next();
next.slideToggle('fast’);
$(‘.content’).not(next).slideUp('fast’);
return false;
});
با استفاده از دستور بالا می توانید مطالب خود را به صورت accordion نمایش دهید.
همانطور که در مثال بالا می بینید در حالت اول تمام پنجره ها بسته شده اند و با کلیک کاربر بر روی هدر accordion متن مربوط به آن هدر نمایش داده می شود، و سایر اسلاید ها بسته می شوند. این روش برای ساخت accordion ساده بسیار مناسب است.
9) دو دایو با یک ارتفاع
$(‘.div').css('min-height', $(‘.main-div').height());
برخی زمان ها لازم دارید دو دایو هم ارتفاع باشند, این کد این امکان را برای شما فراهم می نماید; در این مثال مقدار min-height را تعیین نمایید که به معنای حداقل سایز دایو ها می باشد. این کد برای سایت های masonry بسیار مورد استفاده دارد.
10) رنگ های پس زمینه یکی در میان
$('li:odd').css('background', '#E8E8E8’);
توسط این کد می توانید رنگ های پس زمینه یک لیست را به صورت یک در میان یکسان سازی نمایید و در اصطلاح گورخری نمایید, در این کد برای ردیف های فرد می توانید رنگ چس زمینه مشخص نمایید پس برای سایر ردیف ها از طریق پس زمینه اصلی می توانید رنگی مشخص نمایید. این کد را به هر المانی از سایت خود می توانید اضافه نمایید.
-
خدمات طراحی سایت
-
ویترین اخبار
- راه اندازی سایت نشریه الکترونیک فرهنگ انقلاب اسلامی
- ملاک شناخت یک شرکت طراحی سایت قوی و توانا برای راه اندازی سایت اینترنتی شما چیست؟
- فرا رسیدن نوروز باستانی، یادآور شکوه ایران و یگانه یادگار جمشید جم بر همه ایرانیان پاک پندار، راست گفتار و نیک کردار خجسته باد
- راه اندازی وب سایت اینترنتی ماشین سازی درستگاههای تولید آرد
- راه اندازی وب سایت اینترنتی ملک آریا
- 7 مورد از قابلیتهای غیرمنتظره در iOS 7
- Apex در برابر Nova: مقایسه دو لانچر اندروید
- پاداش 15,000 دلاری برای شکستن قفل TouchID
- نیکون از AW1، اولین دوربین ضد آب با قابلیت تعویض لنز، پرده برداشت
- لومیا 1520 نوکیا و این بار مشخصات فنی، قیمت و زمان عرضه
- رکورد فروش موبایل در دست 8 مدل
- اپل در حال تست نسخه های 701 و702 و 71 سیستم عامل iOS؟
- علت دقیق سرعت پایین اینترنت را نمیدانیم
- بررسی اکسپریا Z1 سونی
- آموزش ساخت ایمیل یاهو پس از حذف ایران!
- سهام توییتر روانه بازار بورس میشود
- تبلیغات تازه مایکروسافت علیه آیفون شکست خورد
- مدیرعامل اینتل: تبلتهای زیر 100 دلاری در تعطیلات سال نوی میلادی از راه میرسند
- 27 شهریور iOS 7 برای آیفونها و آیپدها منتشر میشود
- کنسول بازی جدید سونی با قابلیت های جذاب و قیمت مناسب معرفی شد: Vita TV
- کمپانی دل برای چینی ها لب تاب لوحی می سازد!!!
- ایسوس فون پد 7 اینچی جدید را معرفی کرد: تبلت/تلفن هیبریدی با اسپیکر دو کاناله
- یاهو لوگوی جدید خود را رونمایی کرد
- ایسوس از لپتاپ لمسی و ارزان قیمت X102BA با پردازنده AMD پرده برداشت
- دوباره Moto X و این بار تصویر رندر شده تبلیغاتی آن [بروز شد]
- ولخرجیهای گوگل در حوزه دیتاسنتر ادامه دارد: 6-1 میلیارد دلار در سه ماهه دوم 2013
- تشکیل گروه جهانی« طراحی فناوریهای پوشیدنی» در موتورولا، با استناد به آگهی استخدام این شرکت
- آشنایی با سیستمفایلها و نحوه فرمتکردن درایوهای خارجی در مک
- سرفیس RT هنوز نمرده است
- دانلود کنید: اپلیکیشن VLC برای کاربران iOS منتشر شد
- بررسی همهجانبۀ شایعات پیرامون ساعتهای هوشمند
- تصاویر واضح از آیفون ارزان قیمت در کنار آیفون 5 فاش شد
- تبدیل تصاویر به فرمت ICO و استخراج آیکونها از فایلهای با فرمت EXE و DLL
- نسخه جدید اندروید در 2 مردادماه معرفی میشود
- ال جی از نام G2 برای پرچمدار بعدی خود استفاده میکند
- مشخصات فنی و بنچمارک گلکسی نوت 3 فاش شد
- تصویر و مشخصات جدید آیفون 5S به بیرون درز کرد: صفحه نمایش IGZO، دوربین 12 مگاپیکسل، پردازنده سریعتر و پردازنده گرافیکی چهار هستهای
- آیا میتوان پس از مرگ اطلاعات با ارزش را در اختیار خانواده، دوستان و آشنایان قرار داد؟
- تصاحب Omek توسط اینتل ممکن است باعث شود هرگز نیاز به لمس کامپیوتر خود نباشید
- نسخه جدید تحت وب نقشه گوگل در دسترس همگان قرار گرفت
- تلفن G2 ال جی مجهز به باتری 2540 میلی آمپر ساعتی است
- جزئیات بیشتر از دوربین 20 مگاپیکسلی هونامی: سنسوری بزرگ ولی نه به اندازهی لومیا 1020
- مرور تاریخچه دوربین در گوشیهای برجسته نوکیا
- دریافت استاندارد و رتبه 6 از 10 گوگل توسط سایت شرکت راوک نگار پارس
- بروزرسانی تعدادی از جدیدترین نمونه آثار طراحی سایت های هوشمند راوک نگار پارس
-
نماد اعتماد الکترونیکی
-
آمار بازدید
- کل (online):۲۴۴۵
- اعضاء (online):۰
- میهمان (online):۲۴۴۵
- بازدید امروز::۱۳۱۸
- بازدید دیروز::۷۲۸۶
- بازدید کل::۲۷۰۷۱۶۳۳
-
تبلیغات