0

我正在尝试设置输入文本图像以在搜索运行时显示加载 gif。我使该部分按预期工作，但我希望在搜索完成后恢复为复选标记以向用户显示搜索已完成。这是我一直在使用的代码：

$(document).ready(function() {
    $('#demoTable').columnFilters({wildCard:"", alternateRowClassNames:['tablerow_odd', 'tablerow_even']});
  $('._filterText').keypress(function() {
    $(this).css({'background-image':'url(\'http://frenemylogicians.com/forum/constructore/img/loading.gif\')'});
  });
    $('._filterText').css({'background-image':'url(\'http://frenemylogicians.com/forum/constructore/img/tick.png\')'});
});

只是希望澄清我想要它做的事情。在页面加载时，搜索框有一个绿色的勾号，当搜索处于活动状态时，它有一个加载 gif，一旦搜索完成，它就会再次有一个绿色的勾号。

我正在尝试做的一个示例在这里：http: //jsbin.com/iqehop/3/

4

2 回答 2

2

该插件有一个设置underline来显示过滤正在进行中。据作者说：

... underline：如果脚本要在过滤过程中为搜索文本添加下划线，则设置为 true ... 适用于具有大量行且过滤器可能需要一秒钟的表格。（不在歌剧中）...

$('#demoTable').columnFilters({wildCard:"", underline:"true", alternateRowClassNames:['tablerow_odd', 'tablerow_even']});
于 2012-12-22T06:57:49.630 回答
0

决定让它做我想做的最好的方法是用新设置修改插件。

我使用了peterm提到的设置作为模板来添加我想要的功能。生成的 jQuery 如下。

$(document).ready(function() {
    $('#blueprintSelectionTable').columnFilters({wildCard:"", backgroundImg:"true", alternateRowClassNames:['tablerow_odd', 'tablerow_even']});
});

一个工作示例是http://jsbin.com/iqehop/8/watch

如果将来有人遇到这种情况，请不要将插件脚本链接到您的页面。请从http://tomcoote.co.uk/code-bank/jquery-column-filters/下载您自己的副本并将其添加到您的服务器。或者你可以将我在示例中链接的 js 文件复制粘贴到你自己的 js 文件中并上传到你的服务器，只要确保将var backgroundImgLoc = 'url to image';第 48 行修改为你自己的图像即可。所有其他背景图像设置都由 css 处理，因此 jQuery 的工作量最小化。

._filterText {
    background:url('../img/tick.png');
    background-repeat:no-repeat;
    background-position:right;
}
于 2012-12-22T20:56:51.603 回答