0

我在我的 Jquery 移动页面中使用 HTML 自定义加载小部件。它与默认宽度完美配合。但我试图有一个更小的小部件：120px. 所以我有：

//custom HTML loading widget
$(document).on('mobileinit', function(){
    $.mobile.loader.prototype.options.text = 'Custom Loader';
    $.mobile.loader.prototype.options.textVisible = true;
    $.mobile.loader.prototype.options.textonly = true;
    $.mobile.loader.prototype.options.theme = 'a';
    $.mobile.loader.prototype.options.html = '<span class="ui-bar ui-overlay-c ui-corner-all" style="width:120px;"><img src="logo.png" width="120px;"/><h2>loading...</h2></span>';
});

我还添加了 CSS 规则：

.ui-loader-verbose {
    width: 120px;
}

小部件已正确调整大小。问题是小部件/微调器不再位于中心。

4

1 回答 1

1

你需要在这里玩一点css：

这个 css 块将起作用：

.ui-loader-verbose {
    width: 120px;
    margin-left: -50px;
}

您只需要手动调整左边距，但一旦设置它就会适合每一页。不幸的是，这里我们不能使用标准的 margin-left: auto; 和边距：自动；水平居中 div。

于 2013-05-06T08:16:18.423 回答