Question

我正在使用jQueryMobile 1.1-rc1，我的页面加载指示器无法正确显示。

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

现在加载图标不会旋转，不再以气泡为中心。

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

Answer 1

我注意到旧文件名是ajax-loader.png。我认为它现在是ajax-loader.gif，所以你可能想要仔细检查一下。

Answer 2

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

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

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

Answer 3

我再看看这个，答案是jQueryMobile的ThemeRoller只与jQM的1.0.x版本兼容。

jQueryMobile问题跟踪器中的

Todd Parker Answered the question here。

Tyler Benzinger Answered the question在主题滚动问题跟踪器中。

似乎我们必须等待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文件。

jQueryMobile和Themeroller - 在更新jQueryMobile时是否需要重新滚动主题？

3 个答案: