将光标更改为在javascript / jquery中等待
我将如何让我的光标更改为此加载图标时调用一个函数,如何将其更改回到正常的光标在JavaScript / jQuery
在你的jQuery中使用:
$("body").css("cursor", "progress");
然后再恢复正常
$("body").css("cursor", "default");
一位同事提出了一种方法,我觉得这里select的解决scheme更可取。 首先,在CSS中添加这个规则:
body.waiting * { cursor: progress; }
然后,打开进度光标,说:
$('body').addClass('waiting');
并closures进度光标,说:
$('body').removeClass('waiting');
这种方法的优点是当你closures进度游标时,CSS中定义的任何其他游标都将被恢复。 如果CSS规则的优先级不足以否决其他CSS规则,则可以将正文添加到规则中,或使用!important
。
覆盖所有单个元素
$("*").css("cursor", "progress");
使用jQuery和CSS:
$("#element").click(function(){ $(this).addClass("wait"); });
HTML: <div id="element">Click and wait</div>
CSS: .wait {cursor:wait}
在这里演示
你不需要这个JavaScript。 你可以改变光标到任何你想要使用CSS:
selector { cursor: url(myimage.jpg), auto; }
浏览器支持请看这里,因为浏览器有一些细微的差别
$('#some_id').click(function() { $("body").css("cursor", "progress"); $.ajax({ url: "test.html", context: document.body, success: function() { $("body").css("cursor", "default"); } }); });
这将创build一个加载光标,直到你的ajax调用成功。
以下是我的首选方法,每次页面即将更改(即在未beforeunload
都会更改光标
$(window).on('beforeunload', function(){ $('*').css("cursor", "progress"); });
jQuery的:
$("body").css("cursor", "progress");
再次回来
$("body").css("cursor", "default");
纯:
document.body.style.cursor = 'progress';
再次回来
document.body.style.cursor = 'default';
这是另外一件有趣的事情,你可以做。 定义一个函数在每个Ajax调用之前调用。 每个ajax调用完成后还要分配一个函数来调用。 第一个函数将设置等待光标,第二个函数将清除它。 他们看起来像下面这样:
$(document).ajaxComplete(function(event, request, settings) { $('*').css('cursor', 'default'); }); function waitCursor() { $('*').css('cursor', 'progress'); }
如果节省得太快,试试这个:
<style media="screen" type="text/css"> .autosave {display: inline; padding: 0 10px; color:green; font-weight: 400; font-style: italic;} </style> <input type="button" value="Save" onclick="save();" /> <span class="autosave" style="display: none;">Saved Successfully</span> $('span.autosave').fadeIn("80"); $('span.autosave').delay("400"); $('span.autosave').fadeOut("80");