۱۵ نکته و ترفند جی کوئری – بخش ششم
15 نکته و ترفند جی کوئری - بخش ششم : در این مقاله، درباره تابع ajax و استفاده از delay در انیمیشن و اتریبیوت data و Local Storage در HTML5 صحبت خواهیم نمود

با سلام. در این مقاله، درباره تابع ajax در جی کوئری و استفاده از delay در انیمیشن های جی کوئری و اتریبیوت data در HTML5 و Local Storage در HTML5 صحبت خواهیم نمود.

 

۱۲- مقادیر پیش فرض آژاکس را تعریف کنید (Set Global Ajax Defaults):

تابع Ajax در جی کوئری

وقتی از درخواست های آژاکسی (Ajax Requests) در پروژه خود استفاده می کنید، اغلب نیاز دارید که علائم و نشانه هایی برای بیان در حال انجام بودن درخواست نمایش دهید. اینکار می تواند توسط یک انیمیشن بارگذاری (loading gif) انجام شود و یا با نمایش یک پس زمینه تیره. مدیریت این علائم و انیمیشن ها در هر بار فراخوانی $.get و $.set می تواند خسته کننده باشد.

بهترین راه حل برای مساله فوق، ست کردن مقادیر پیش فرض آژاکس می باشد. بصورت زیر:

 
// ajaxSetup is useful for setting general defaults:
$.ajaxSetup({
    url         : '/ajax/',
    dataType    : 'json'
});
$.ajaxStart(function(){
    showIndicator();
    disableButtons();
});
$.ajaxComplete(function(){
    hideIndicator();
    enableButtons();
});
/*
    // Additional methods you can use:
    $.ajaxStop();
    $.ajaxError();
    $.ajaxSuccess();
    $.ajaxSend();
*/

برای مطالعه بیشتر در زمینه آژاکس در جی کوئری (jQuery Ajax) به این مقاله مراجعه شود.

 

۱۳- استفاده از Delay() در انیمیشن های جی کوئری:

انیمیشن در جی کوئری

تعریف و استفاده از انیمیشن های جی کوئری بصورت زنجیروار (chained) یکی از قابلیت های کاربردی جی کوئری است. پیشنهاد می شود بین هر انیمیشن، توسط delay() تاخیری ایجاد نمائید. دستورات زیر را در نظر بگیرید:

 
// This is wrong:
$('#elem').animate({width:200},function(){
    setTimeout(function(){
        $('#elem').animate({marginTop:100});
    },۲۰۰۰);
});
// Do it like this:
$('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

متد انیمیشن یعنی Animation() باعث صرفه جویی در زمان بسیاری از برنامه نویسان و توسعه دهندگان شده است. زیرا تمام پروسه های مرتبط با اجرای انیمیشن را خود این متد برعهده می گیرد و انجام می دهد. مانند set timeout و parse property value و رهگیری پروسه اجرای انیمیشن و… برای مطالعه بیشتر در زمینه انیمیشن در جی کوئری، به این مقاله مراجعه شود.

 

۱۴- استفاده از اتریبیوت data در HTML5:

اتریبیوت data در HTML5

اتریبیوت data در HTML5 ابزاری است برای درج داده (embed data) در صفحات وب. اتریبیوت data برای تبادل داده بین سرور و کلاینت (server side and front-end)

مثالی از اتریبیوت دیتا در HTML5:

<div id="d1" data-role="page" data-last-value="43" data-hidden="true"

    data-options='{"name":"John"}'>

</div>

و برای استفاده از این اتریبیوت ها باید اسکریپت های زیر را بنویسیم:

 
$("#d1").data("role");          // "page"
$("#d1").data("lastValue");     // 43
$("#d1").data("hidden");        // true;
$("#d1").data("options").name;  // "John";

به منظور کسب دانش بیشتر درباره اتریبیوت data در HTML5 به این وب سایت مراجعه شود.

 

۱۵- استفاده از Local Storage در جی کوئری:

LocalStorage در HTML5

LocalStorage یک API ساده در جی کوئری است که امکان ذخیره و بازیابی اطلاعات در سمت مشتری (client side) را فراهم می کند (مانند session و cookie) این API کاربردی، تقریبا در تمام مرورگرها پشتیبانی می شود. لطفا به دستورات زیر دقت کنید:

 
// Check if "key" exists in the storage
var value = $.jStorage.get("key");
if(!value){
    // if not - load the data from the server
    value = load_data_from_server();
    // and save it
    $.jStorage.set("key",value);
}
// Use value

در ۱۵ بخش فوق، مواردی بیان شد که باعث استفاده بهینه و موثر از کتابخانه جی کوئری خواهند شد. اگر می خواهید موردی را به موارد فوق اضافه نمائید، لطفا از طریق فرم تماس ، به ما اعلام فرمائید.


برچسب‌ها:

delay در انیمیشن جی کوئریLocalStorage در HTML5اتریبیوت dataتابع Ajax

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 − نه =