Question

无论自定义图标是什么，我都会更改我的ajax加载（具有透明背景），实际加载动画看起来都搞砸了，似乎有黑色背景。

我该如何解决？

在PhoneGap 3.2上使用JQuery Mobile 1.4.2n。

感谢。

Answer 1

jQuery mobile在css选择器上定义了background-color属性＆＃34; .ui-loader .ui-icon-loading＆＃34;以及css选择器上的background属性＆＃34; .ui-icon-loading＆＃34;。

像这样 -

jQuery Mobile中已存在默认CSS -

.ui-loader .ui-icon-loading {
  background-color: #000; 
  display: block;
  margin: 0;
  width: 2.75em;
  height: 2.75em;
  padding: .0625em;
  -webkit-border-radius: 2.25em;
  border-radius: 2.25em;
}

.ui-icon-loading {
  background: url(images/ajax-loader.gif);
  background-size: 2.875em 2.875em;
 }

所以即使你使用css选择器＆＃34; .ui-icon-loading＆＃34;正确地改变了背景。＆安培;使用透明的gif，背景颜色：＃000也会应用到你的加载块。

你可以解决这个问题。通过正确覆盖默认CSS 来摆脱黑色背景，只需确保您的自定义css文件位于默认的jquery移动css文件之后 -

方法1（通过覆盖默认加载器CSS）

将以下内容添加到自定义css文件中 -

.ui-loader .ui-icon-loading {
   background-color: transparent;
 }
 .ui-icon-loading {
   background: url("url_to_your_custom_loader.gif");
  }

此方法将合法地覆盖默认定义并使用新加载器。

检查这个小提琴 - http://jsfiddle.net/nitishdhar/bWMhV/

注意： - 我还重写了小提琴中的边框半径，因为我使用的加载器不应该有边框。

方法2（通过覆盖默认加载器CSS）

将以下内容添加到自定义css文件中 -

.ui-loader .ui-icon-loading {
   background: url("url_to_your_custom_loader.gif");
 }

定义顶部选择器的背景只会在加载类和＆amp ;;将忽略任何已定义的背景颜色。

检查这个小提琴 - http://jsfiddle.net/nitishdhar/bWMhV/1/

另请注意，您还可以覆盖宽度，高度，填充等，以适应新的加载程序gif。

方法3（不覆盖默认加载程序CSS）

您还可以使用＆＃34; html＆＃34;来使用任何自定义加载程序图像或内容。在loader show方法中选项，只需将任何HTML传递给html选项，同时调用loader show＆amp;它不会使用默认加载器而是使用您提供的html。

参考此内容 - http://demos.jquerymobile.com/1.4.2/loader/#CustomHTML

看看这个小提琴 - http://jsfiddle.net/nitishdhar/bWMhV/2/

Answer 2

选择的答案确实有效......只要确保尝试放置.ui-loader .ui-icon-loading { background-color：transparent！important;

添加！important之后，上面的代码最终摆脱了加载图标后面的持久黑块。

如何更改默认的jquery移动加载图标

2 个答案: