0

http://jsfiddle.net/kCMvt/

こんにちは、みなさん。この jQuery ページを携帯電話用に作成しましたが、トランジションが正しく機能せず、すべて正しく行ったと思っていました。別の例のコードをよく見て、同じものを使用しましたが、なぜ移行しないのかわかりません。これは jQuery テーマ ローラーから取得したため、大量の CSS が存在するため、過剰な量になっています。私は (まだ) 自分で何かをするほど jQuery の専門家ではありませんが、実際に考えてみるとそれほど複雑だとは思いません。

この HTML は遷移しません:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>jQuery Mobile: Theme Download</title>

        <link rel="stylesheet" href="themes/test1.min.css" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />

        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" data-theme="a">

            <div data-role="header" data-position="inline">

            <div>

                <h1 style="font-size:16px;text-align:center;">Random Question</h1>

                </div>

            </div>

            <fieldset data-role="controlgroup">



                <input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" />

                <a href="#page2"><label for="radio-choice-1">Yes</label></a>



                <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />

                <a href="#page2"><label for="radio-choice-2">No</label></a>

            </fieldset>

            <div data-role="content" data-theme="a">

                <p style="text-align:center;font-weight:bold;color:#003366;">blablablab bla</p>

            </div><!-- end content -->







          <div data-role="footer">

          <h4>cool footer</h4> 



        </div><!-- end page -->



 <!-- start of 2nd page -->

 <div data-role="page" id="page2">



 <div data-role="header">

     <h1>Thanks For Your Opinion!</h1>

 </div><!-- end header -->



 <div data-role="content">

     <p>Page Content</p>

 </div>



 <div data-role="footer">

     <h4>Copyright</h4>

    </div><!-- end footer -->

 </div><!-- end page -->   



    </body>

</html>​
4

1 に答える 1

0

まず、最初のフッター (またはページ) の終了タグがありません。

   <div data-role="footer">
      <h4>cool footer</h4>
    </div>
  </div><!-- end page -->

次に、ラベルだけでなく、入力全体をリンクでラップできます。

    <a href="#page2">
        <input type="radio" name="radiochoice" id="radio-choice-1" value="choice-1" checked="checked" /> 
        <label for="radio-choice-1">Yes</label>
    </a>
    <a href="#page2">
        <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2" />
        <label for="radio-choice-2">No</label>
    </a>

ここに動作するjsFiddleがあります

また、より適切にフォーマットされたコードを投稿することを検討する必要があります。適切なインデントを使用すると、欠落しているタグを見つけやすくなり、コードがそのままフォーマットされていると、コードを読み込もうとする人にとってより困難になります。

于 2012-08-01T02:28:46.247 に答える