Question

我在PhoneGap（Cordova）上使用JQuery Mobile制作应用程序。我用Codiqa为我的UI提出了一个线框。到目前为止它看起来还不错，但是我将用来改变视图的单选按钮组没有居中 - 在WVGA800大小的webkit浏览器上它向左偏移约25px。当缩放到平板电脑形状时，该组从视口中心越来越远。

这是我的项目的jsFiddle链接，问题不固定 - http://jsfiddle.net/jaspermogg/sahXy/1/

这是我修改的项目的jsFiddle链接 - http://jsfiddle.net/jaspermogg/NvMsK

我想出了一个使用JQuery的解决方案，但我没有经验，也不知道要触发哪个事件。

当我在Webkit中加载UI时，它会渲染UI预脚本，然后在＆lt; 1s之后刷新到脚本后状态。这看起来很蹩脚。我已将脚本设置为在$(window).load上运行。

问题：

我应该寻找什么样的事件，你能告诉我如何实现它吗？
我的脚本是否在正确的位置 - 它应该在页面内，它的方式还是在外面？或者在head偶数？
用JQ做这件事感觉真的很蠢 - 肯定有办法用CSS做到这一点吗？

提前感谢您提供的任何帮助！干杯！

Answer 1

我想我在上面的评论中回答了我自己的问题，所以要通过接受我的回答来正式化。

我最终做的是 -

（1）在CSS中将包含单选按钮的div设置为visibility: hidden。

（2）找到每个单选按钮的宽度并将它们加在一起。

（3）将包含单选按钮的div的宽度设置为总宽度。

（4）将可见性属性的变化链接到（3）。

CSS必须像这样设置 -

#viewselector{
    margin: 0 auto;
    text-align: center;
    visibility: hidden;
}

执行（1）到（4）的代码如下 -

$(document).ready(function(){

    var idealwidth = 0

    $(".ui-radio").each(function(){
        idealwidth = idealwidth + $(this).width();
    });

    $("#viewselector").width(idealwidth).css('visibility','visible');

});

希望这有助于某人！

如何在视口中居中一组JQuery Mobile单选按钮？

1 个答案: