6

我正在使用 jQueryMobile 1.1-rc1 并且我的页面加载指示器显示不正确。

我最初是在themeroller第一次出现时制作我的主题，并且通过jQM的最后几次更新直到最近一次，一切都很好。

现在加载图标不再旋转并且不再位于气泡的中心。

更新时是否需要在 themeroller 中重新滚动主题？我没有看到在 themeroller 中选择目标版本的选项。

4

3 回答 3

1

我注意到旧文件名是 ajax-loader.png。我认为它现在是 ajax-loader.gif，因此您可能需要仔细检查。

于 2012-03-15T19:23:26.467 回答
1

框架的最后几次更新已经对 CSS 进行了相当大的更改，并且在 1.1 版本中将继续这样做。当您更改为较新版本的 JS 文件时，您还应该从 Themeroller 重新打包您的主题。

在上次更新中，他们对固定页眉/页脚、过渡和其他一些东西（如加载消息已修改）更改了相当多的 CSS 框架。上次更新还为加载消息提供了更多选项，因此 HTML 的结构可能发生了变化，与新的 JS 相比，旧的 CSS 不太正确。

要对此进行测试，您可以链接到标准的当前 CSS 版本，并查看加载消息是否正确显示。

于 2012-03-15T19:30:23.520 回答
1

我又看了一遍，答案是 jQueryMobile 的 ThemeRoller 只与 jQM 的 1.0.x 版本兼容。

Todd Parker在 jQueryMobile 问题跟踪器中回答了这个问题。

Tyler Benzinger在 Theme Roller 问题跟踪器中回答了这个问题。

看来我们将不得不等待 Theme Roller 支持 1.1 版主题。

更新：解决方案

在您的 theme.css 中注释掉或删除 .ui-icon-loading 部分并插入以下内容（来自 1.1-rc1 css）

/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -23px; margin-top: -23px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; margin-top: -43px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { background-color: #000; display: block; margin: 0; width: 44px; height: 44px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radiu$
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; opacity: .75; }
.ui-loader-textonly { padding: 15px; margin-left: -115px;  }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }

/* loading icon */
.ui-icon-loading {
  background: url(images/ajax-loader.gif);
  background-size: 46px 46px;
}

确保在主题图像文件夹中有新的 ajax-loader.gif 文件。

于 2012-03-22T15:49:42.683 回答