3

PhoneGap (Cordova) の上に JQuery Mobile を使用してアプリを作成しています。私は Codiqa を使用して、UI のワイヤーフレームを作成しました。これまでのところ問題ないように見えますが、ビューを変更するために使用するラジオ ボタンのグループが中央に配置されていませんでした。WVGA800 サイズの Webkit ブラウザーでは、左に約 25 ピクセルずれていました。タブレットの形にスケーリングすると、グループはビューポートの中心からどんどん遠ざかりました。

これは、問題が修正されていない私のプロジェクトへの jsFiddle リンクです - http://jsfiddle.net/jaspermogg/sahXy/1/

これは、私が修正した私のプロジェクトへの jsFiddle リンクです - http://jsfiddle.net/jaspermogg/NvMsK

JQuery を使用して解決策を思いついたのですが、経験が浅く、どのイベントで起動すればよいかわかりません。

UI を Webkit にロードすると、1 秒未満でポスト スクリプト状態に更新する前に、UI プレスクリプトがレンダリングされます。これは不自由に見えます。で実行するようにスクリプトをセットアップしました$(window).load。

質問:

  1. どのイベントを探す必要がありますか?それを実装する方法を教えてもらえますか?

  2. スクリプトは適切な場所に配置されていますか? ページ内に配置する必要がありますか? このままにする必要がありますか? それともhead偶数？

  3. JQでこれを行うのは本当にばかげているように感じます-確かにCSSでこれを行う方法はありますか?

提供されたヘルプに事前に感謝します! 乾杯！

4

1 に答える 1

3

上記のコメントで自分の質問に答えたと思うので、答えを受け入れて形式化します。

私が最終的にやったことは -

(1) ラジオボタンを含む div をvisibility: hiddenCSS に設定します。

(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 に答える