jquery - उपयोगकर्ता को माउस को घुमाने के बिना "प्रतीक्षा" से "ऑटो" तक ब्राउज़र कर्सर प्राप्त करना




cursor busy-cursor (10)

मैं इस jQuery कोड का उपयोग माउस पॉइंटर को अपने व्यस्त राज्य (घंटा ग्लास) पर अजाक्स कॉल के दौरान सेट करने के लिए करता हूं ...

$('body').css('cursor', 'wait');

और यह संबंधित कोड इसे सामान्य पर सेट करने के लिए ...

$('body').css('cursor', 'auto');

यह कुछ ब्राउज़रों पर ठीक काम करता है।

फ़ायरफ़ॉक्स और आईई पर, जैसे ही मैं कमांड निष्पादित करता हूं, माउस कर्सर बदल जाता है। यह वह व्यवहार है जो मैं चाहता हूं।

क्रोम और सफारी पर, माउस कर्सर स्पष्ट रूप से "व्यस्त" से "ऑटो" में परिवर्तित नहीं होता है जब तक उपयोगकर्ता पॉइंटर को स्थानांतरित नहीं करता है।

अनिच्छुक ब्राउज़र को माउस पॉइंटर स्विच करने का सबसे अच्छा तरीका क्या है?


$ ( '*') सीएसएस ( 'कर्सर', 'इंतजार')। लिंक सहित पेज पर हर जगह काम करेगा


Jquery 1.9 के रूप में आपको AJAXStart और AJAXS दस्तावेज़ को रोकना चाहिए । वे फ़ायरफ़ॉक्स में मेरे लिए ठीक काम करते हैं। अन्य ब्राउज़रों में परीक्षण नहीं किया है।

सीएसएस में:

html.busy *
{
   cursor: wait !important;
}

जावास्क्रिप्ट में:

// Makes the mousecursor show busy during ajax 
// 
$( document )

   .ajaxStart( function startBusy() { $( 'html' ).addClass   ( 'busy' ) } )     
   .ajaxStop ( function stopBusy () { $( 'html' ).removeClass( 'busy' ) } )

कर्सर संपत्ति के लिए सही सीएसएस मान का उपयोग करने का प्रयास करें:

$('body').css('cursor','wait');

http://www.w3schools.com/CSS/pr_class_cursor.asp


कोरायम का समाधान आधुनिक क्रोम, सफारी में 100% मामलों में फ़ायरफ़ॉक्स में 95% मामलों में मेरे लिए काम करता है, लेकिन ओपेरा और आईई में काम नहीं करता है।

मैंने इसे थोड़ा सा सुधार लिया:

$('html').bind('ajaxStart', function() {
    $(this).removeClass('notbusy').addClass('busy');
}).bind('ajaxStop', function() {
    $(this).removeClass('busy').addClass('notbusy');
});

सीएसएस:

html.busy, html.busy * {
    cursor: wait !important;
}

html.notbusy, html.notbusy * {
    cursor: default !important;
}

अब यह क्रोम, सफारी, फ़ायरफ़ॉक्स और ओपेरा में 100% मामलों में काम करता है। मुझे नहीं पता कि आईई के साथ क्या करना है :(


मुझे विश्वास है कि इस मुद्दे (mousedown समस्या सहित) अब क्रोम 50 में तय किया गया है।

लेकिन केवल अगर आप डेवलपर टूल का उपयोग नहीं कर रहे हैं !!

उपकरण बंद करें और कर्सर तुरंत बेहतर प्रतिक्रिया देनी चाहिए।


मैं इसे और अधिक सुन्दर तरीके से ऐसा करूंगा:

$(function(){  
  $("html").bind("ajaxStart", function(){  
     $(this).addClass('busy');  
   }).bind("ajaxStop", function(){  
     $(this).removeClass('busy');  
   });  
});

सीएसएस:

html.busy, html.busy * {  
  cursor: wait !important;  
}  

स्रोत: http://postpostmodern.com/instructional/global-ajax-cursor-change/


मैंने यह कोशिश नहीं की है, लेकिन अगर आप एक पारदर्शी div बनाते हैं जो पूरी तरह से स्थित है और सीएसएस को बदलने से पहले व्यूपोर्ट भरता है तो इसके बारे में क्या होगा। फिर, जब शरीर पर सीएसएस बदल जाता है, तो div को हटा दें। यह शरीर पर माउसओवर ईवेंट ट्रिगर कर सकता है, जो कर्सर को नवीनतम सीएसएस मान में अपडेट कर सकता है।

दोबारा, मैंने इसका परीक्षण नहीं किया है, लेकिन यह एक शॉट के लायक है।



सबसे पहले, आपको अवगत होना चाहिए कि अगर आपके पास आपके शरीर के भीतर किसी भी टैग को सौंपा गया कर्सर है, तो $('body').css('cursor', 'wait'); उस टैग के कर्सर को नहीं बदलेगा (जैसे मेरे, मैं cursor: pointer; उपयोग करता हूं cursor: pointer; मेरे सभी एंकर टैग पर)। आप पहले इस विशेष समस्या के समाधान को देखना चाहेंगे: कर्सर AJAX कॉल के लिए प्रतीक्षा करें

समस्या के लिए कि कर्सर केवल तभी अपडेट किया जाता है जब उपयोगकर्ता माउसकिट ब्राउज़र पर माउस ले जाता है, जैसा कि अन्य लोगों ने कहा था, कोई वास्तविक समाधान नहीं है।

ऐसा कहा जा रहा है कि यदि आप वर्तमान कर्सर को गतिशील रूप से एक सीएसएस स्पिनर जोड़ते हैं तो अभी भी एक कामकाज है। यह एक आदर्श समाधान नहीं है क्योंकि आप निश्चित रूप से कर्सर के आकार के बारे में नहीं जानते हैं और यदि स्पिनर सही ढंग से स्थित होगा।

कर्सर के बाद सीएसएस स्पिनर: DEMO

$.fn.extend(
{
    reset_on : function(event_name, callback)
    { return this.off(event_name).on(event_name, callback); }
});

var g_loader = $('.loader');

function add_cursor_progress(evt)
{
    function refresh_pos(e_)
    {
        g_loader.css({
            display : "inline",
            left : e_.pageX + 8,
            top : e_.pageY - 8
        });
    }
    refresh_pos(evt);
    var id = ".addcursorprog"; // to avoid duplicate events

    $('html').reset_on('mousemove' + id, refresh_pos);

    $(window).
    reset_on('mouseenter' + id, function(){ g_loader.css('display', 'inline'); }).
    reset_on('mouseleave' + id, function(){ g_loader.css('display', 'none'); });
}

function remove_cursor_progress(evt)
{
    var id = ".addcursorprog";
    g_loader.css('display', 'none');

    $('html').off('mousemove' + id);
    $(window).off('mouseenter' + id).off('mouseleave' + id);
}

$('.action').click(add_cursor_progress);
$('.stop').click(remove_cursor_progress);

आपको यह जांचने की आवश्यकता होगी कि यह एक टच डिवाइस है या नहीं, var isTouchDevice = typeof window.ontouchstart !== 'undefined';

अंत में, आप अपने पृष्ठ में एक स्थिर स्पिनर या कुछ और जोड़ने की कोशिश करते हैं जो कर्सर के साथ ऐसा करने की बजाय लोडिंग प्रक्रिया को दिखाता है।


हे दोस्तों, मेरे पास एक छोटा किरकिरा समाधान है जो सभी ब्राउज़रों पर काम करता है। अनुमान है कि प्रोटोटाइप लाइब्रेरी का उपयोग किया जाता है। कोई भी इसे सादा जावास्क्रिप्ट के रूप में भी लिख सकता है। समाधान कर्सर को रीसेट करने के बाद बस शीर्ष पर एक div है और कर्सर को स्थानांतरित करने के लिए इसे थोड़ा सा हिलाएं। यह मेरे ब्लॉग http://arunmobc.blogspot.com/2011/02/cursor-not-changing-issue.html में प्रकाशित है।