-2

こんにちは、動的フィールドを作成する html ページを作成しました。それらをリストビューに追加すると、jquery モバイル テーマが適用されません。

ここに私のJavaScriptがあります:

//Dynamically load data fields for items
$(document).on('pagebeforeshow', '#claimPagefields', function(){ 
    //trigger a create event
    $('#claimPagefield').trigger('create');
    loadFields();
});

ここに私のHTMLページがあります

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>

<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemFields.js"></script>

  <link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" /> 
  <script src="src/jquery.ui.datepicker.js"></script>
  <script src="src/jquery.ui.datepicker.mobile.js"></script>


</head>

<body>
<div data-role="page" id="claimPagefields">
  <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
    <h1>New Claim</h1>
  </div>
  <div data-role="content">
    <ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true"  data-scroll="true">
      <li data-role="list-divider">
        <h2 id="itemTitle">Title</h2>
      </li>


    </ul>
    <div data-role="navbar">
      <ul>
        <li><a href="some.html" data-theme="b">Save</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

追加するときに通常このように見える入力フィールド自体にテーマを適用しません

 listItem = '<li id="reasons">' +
        '<h3>Reasons:</h3>' +
        '<div data-role="fieldcontain">' +
          '<input type="text" name="reasons" id="textFieldReasons" value="" />' +
        '</div>' +
      '</li>';

         $('#claimTypelistfields').append(listItem);

         $('#claimTypelistfields').listview('refresh');

このコードスニペットを上記の入力フィールドに手動で追加すると

style="width:100%"

それは機能し、幅のみをサイズ変更しますが、フィールドごとにすべて手動でテーマを適用する代わりに、一度適用する方法があるかどうかを確認しようとしています!

ありがとう

4

2 に答える 2

2

それの訳は：

$('#claimTypelistfields').listview('refresh');

リストビューウィジェットとそれのみを強化します。リストビューに追加されたすべての非リストビュー ウィジェットは拡張されません。

基本的に、次の行を使用すると機能します。

$('#claimPagefield').trigger('pagecreate');

コンテンツが追加された後。

もう1つ、現在のコードでは、次の行：

$('#claimPagefield').trigger('create');

主に、新しいコンテンツが追加される前にそれを呼び出しているため#claimPagefieldです。コンテンツ div でのみ機能します。pagecreatecreateCreate

于 2013-07-16T08:23:54.907 に答える