如何解决无法计算何时使用JQuery隐藏和显示加载动画
| 我有一个加载动画,最初将其隐藏在application.js文件中:$(\'#loading_field\').hide();
我有一个自动完成字段,我希望动画在用户开始键入时出现,并在出现自动完成建议结果时消失。以下是我的jQuery UI自动完成插件的jQuery代码:
$(\".showable_field\").autocomplete({
minLength: 1,source: \'/followers.json\',focus: function(event,ui) {
$(\'.showable_field\').val(ui.item.user.name);
return false;
},select: function(event,ui) {
var video_id = $(\'#video_id_field\').val();
var user_id = ui.item.user.id;
$.post(\"/showable_videos.js\",{video: video_id,user: user_id});
$(\':input\',\'#new_showable_video\').not(\':button,:submit,:reset,:hidden\').val(\'\');
return false;
}
});
var obj = $(\".showable_field\").data(\'autocomplete\');
obj && (obj._renderItem = function( ul,item ) {
return $( \"<li></li>\" )
.data( \"item.autocomplete\",item )
.append( \"<a>\" + item.user.name + \"</a>\" )
.appendTo( ul );
});
我应该在哪里显示和隐藏动画?
解决方法
因为您正在使用AJAX加载建议,所以我认为这应该对您有用:
$(\'#loading_field\').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
, 好吧,jQuery UI在加载远程数据时会自动将类'ui-autocomplete-loading \'添加到您的输入中,因此,实现此目的的最简单方法是简单地将动画GIF作为背景图像输入到您的输入中当该课程出现时。
这就是他们在jQueryUI.com上的远程加载示例中所做的工作(请注意,在此示例中,您必须再输入两个字符才能启动ajax调用)。
<style>
.ui-autocomplete-loading { background: white url(\'images/ui-anim_basic_16x16.gif\') right center no-repeat; }
</style>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。