در زير دستورات کليدي را براي کسانيکه در زمينه ساخت فروشگاه اينترنتی مشغول هستند را براي شما مي آوريم
10 دستور jQuery که طراحان وب و سایت ساز ها مي بايست بدانند
jQuery در صفحان وب سايت بسياري مورد استفاده قرار مي گيرد. و يکي از متداول ترين کتابخانه هايي است که در صفحات وب سايت استفاده مي شود, که عمکرد آن با آبجکت DOM است.
البته, دليل اصلي استفاده از jQuery سادگي آن است. و شما مي توانيد هر کاري توسط اين کتابخانه انجام دهيد.
چندين دستور و کد از آن وجود دارد که به صورت مرتب مود استفاده طراحان و برنامه نويسان وب قرار مي گيرد. در اين بخش به شما 10 دستور را که به صورت متداول مورد استفاده قرار مي گيرد را مي آورم.
1) دکمه بازگشت به بالا
// Back To Top
$('a.top').click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});
//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>
به طوري که در بالا مشاهده مي نماييد تابع 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’);
توسط اين کد مي توانيد رنگ هاي پس زمينه يک ليست را به صورت يک در ميان يکسان سازي نماييد و در اصطلاح گورخري نماييد, در اين کد براي رديف هاي فرد مي توانيد رنگ چس زمينه مشخص نماييد پس براي ساير رديف ها از طريق پس زمينه اصلي مي توانيد رنگي مشخص نماييد. اين کد را به هر الماني از سايت خود مي توانيد اضافه نماييد.
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
