3

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

这是我的项目的 jsFiddle 链接，问题未解决 - http://jsfiddle.net/jaspermogg/sahXy/1/

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

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

当我在 Webkit 中加载 UI 时，它会呈现 UI 前脚本，然后在 <1s 后刷新到后脚本状态。这看起来很蹩脚。我将脚本设置为在$(window).load.

问题：

  1. 我应该寻找什么事件，你能告诉我如何实现吗？

  2. 我的脚本是否在正确的位置 - 它应该在页面内部、它的原样还是外部？或者head甚至？

  3. 用 JQ 做这件事感觉真的很愚蠢——肯定有办法用 CSS 做这件事吗？

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

4

1 回答 1

3

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

我最后做的是——

visibility: hidden(1)在 CSS 中设置单选按钮包含的 div 。

(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');

});

希望这对某人有帮助！

于 2012-06-13T13:25:03.623 回答