0

タイトルは一目瞭然だと思いますが、ここで説明します。jQueryとモバイル開発は初めてです。jQuery Mobileの標準.cssファイル（実際にここで見つけた説明：http ：//www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html ）を使用しているときに、動的に交換しようとしていますJS関数を介して別のコンテンツにdivコンテンツがありますが、cssテーマは引き継がれません。これが私のコードの簡略化されたバージョンです：

<!DOCTYPE html> 
<html> 
  <head> 
    <title>My Page</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
      <script src="jquery-1.8.2.min.js"></script>
      <script src="jquery.mobile-1.2.0.min.js"></script>
      <script type="text/javascript">
        function callNext () {
        $('#div_auth').html($('#div_functions').html());
      }
      </script> 
  </head> 
  <body> 

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

      <div data-role="header">
        <h1>Phonegap Test</h1>
      </div>

      <div data-role="content" id="div_auth">   
        <form name="fields" action="">
          Name: <input type="text" id="login" name="login"/><br> 
          <button type="button" onclick="callNext();">Send</button>
        </form> 
      </div>

    </div>

    <div data-role="content" id="div_functions">
      <form name="functions" action="">
        <button type="button">Client List</button> <br>
        <button type="button">Price List</button>
      </form>
    </div>

  </body>
</html>

したがって、div_authコンテンツがロードされると、デフォルトでdata-theme = "a"がロードされます（これは、div_authではなくdiv_mainに含まれていると思いますが、とにかく）。ただし、ボタンをクリックすると、div_functionsにデータテーマを指定しても、ボタンは標準の「css-less」htmlボタンとしてレンダリングされます。

誰もが疑問に思う前に、JS関数を介してdivスワップを呼び出す必要があります。これは、開発を開始しているPhonegap / Cordovaアプリケーションを単純化したものであり、この呼び出しは実際の動作をエミュレートするためです。ただし、上記のコードをテストしたところ、（誤）動作はまったく同じです。

編集：

スコットの答えを理解するために、私は少し何かを試しました。

<div data-role="content" id="div_auth" data-theme="b">  
  <form name="fields" action="">
    Name: <input type="text" id="login" name="login"/><br> 
    <button data-theme="a" type="button" onclick="callNext();">Send</button>
  </form>   
</div>

ご覧のとおり、div_authにdata-theme = "b"を明示的に追加し、ラップされたボタンにdata-theme="a"を追加しました。驚いたことに、それは実際に機能し、ボタンが黒っぽい色でレンダリングされている間、div_authは青いテーマを想定しています。ただし、2番目のdiv（div_functions）で同じアプローチを使用すると、まったく同じテーマを使用しても、cssスタイルが添付されていないボタンが作成されます。

<button data-theme="a" type="button">Price List</button>

それでも「古いボタン」をレンダリングします。

4

1 に答える 1

0

一致する CSS スタイルも一致する#div_functions必要があり#div_authます。あなたの JavaScript 行はスタイルをコピーせず、コンテンツだけをコピーします。そのコンテンツが に追加されると#div_auth、その要素に一致するすべての CSS スタイルが適用されますが、この場合は何もないように見えます。最も簡単な方法は、 の CSS スタイルを作成することですbutton。これは、DOM 内のどこにあるかに関係なく、ボタン タグに一致します。

于 2013-01-21T19:28:25.317 に答える