2

jquery モバイル アプリに 3 つの jsignature div をロードしています。特定のページにロードすると、正しく表示され、機能します。

ここに画像の説明を入力

しかし、それらが他のページに読み込まれると、div は押しつぶされた高さで表示され、タッチに反応しません:

ここに画像の説明を入力

ページの下部にあるドキュメント準備機能を使用してそれらをロードしていますが、これは問題ないようです。

<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>

<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
<div id="gcsig" style="width:600px; height:150px;"></div>
<div id="inspsig" style="width:600px; height:150px;"></div>
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text"  name="_fid_210" id="_fid_210" />
</form>
    </div></div>

<script>
    $(document).ready( function(){
        $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    });
</script>

しかし、これに変更すると、各署名が独自のページに読み込まれるため、サイズと機能が失われます。

div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>NewF</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>

<div id="sigemail" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<h1>Signatures & Email</h1>
</div>
<div data-role="content">
<form data-persist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<br>
<p>What email address would you like the QAF pdf sent to?</p><input type="text"  name="_fid_210" id="_fid_210" />
<a data-theme="a" href="#fcmsignature" data-role="button" data-transition="slidefade" data-inline="true">Field CM Signature</a><br>
<a data-theme="a" href="#gcsignature" data-role="button" data-transition="slidefade" data-inline="true">Contractor Signature</a><br>
<a data-theme="a" href="#inspsignature" data-role="button" data-transition="slidefade" data-inline="true">Inspector Signature</a>
</form>
</div></div>

<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>

<div id="gcsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#gcsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>Contractor Signature</h1>
</div>
<div data-role="content">
<div id="gcsig" style="width:600px; height:150px;"></div>
</div></div>

<div id="inspsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#inspsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>Inspector Signature</h1>
</div>
<div data-role="content">
<div id="inspsig" style="width:600px; height:150px;"></div>
</div></div>


<script>
    $(document).ready( function(){
        $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    });
</script>

署名ページで pageinit を使用してみましたが、同じ結果が得られます。

<div id="fcmsignature" data-role="page" data-theme="c">
<div data-role="header" data-theme="b">
<input data-theme="a" class="ui-btn-left" type="button" value="Clear" onclick="$('#fcmsig').jSignature('clear')"/>
<a href="#" data-theme="a" data-rel="back" data-role="button" class="ui-btn-right" data-inline="true">Save</a>
<h1>FCM Signature</h1>
</div>
<div data-role="content">
<script>
$('#fcmsignature').live('pageinit',function(event){
    $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});
</script>
<div id="fcmsig" style="width:600px; height:150px;"></div>
</div></div>

あるサブページでは機能するのに、別のサブページでは機能しない理由がわかりません。何かご意見は？

  • 更新: /index.html#fcmsignature を直接更新すると、署名が正しく表示されます。したがって、問題は署名の開始に何らかの形で関連しています。これが、pageinit を試した理由です (成功しませんでした)。ボタンで data-transition="none" も試しましたが、変化はありませんでした。
4

3 に答える 3

3

次の構文を試してください。

$('#fcmsignature, #gcsignature, #inspsignature').live('pageshow',function(e,data){
    $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
    $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
});

この構文は、jQuery と jQuery モバイルが読み込まれるように処理し、ページfcmsignature、#gcsignature、#inspsignatureが表示されようとしている場合にのみ機能します。また、ページごとに 1 つの署名を使用しているため、次のように使用します。

$('#fcmsignature').live('pageshow',function(e,data){
        if($('#fcmsig').find('.jSignature').length == 0){
            $('#fcmsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

$('#gcsignature').live('pageshow',function(e,data){
        if($('#gcsig').find('.jSignature').length == 0){
            $('#gcsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

$('#inspsignature').live('pageshow',function(e,data){
        if($('#inspsig').find('.jSignature').length == 0){
            $('#inspsig').jSignature({'UndoButton':false,color:"#000000",lineWidth:1});
        }
});

jQM は、$(document).ready( function(){で動作するように構築されていませんでした。他の記事を読んで理由を確認してください: https://stackoverflow.com/a/14010308/1848600

于 2012-12-27T17:05:19.903 に答える
0

他の回答を更新するために、jQuery live() 関数は jQuery 1.7 以降非推奨になり、jQuery 1.9 以降削除されました。ここで、jQuery Mobile の「pagecontainershow」イベント ハンドラを使用して、現在どのページにいるかを確認しif、他の回答で提案されているブロックを実行します。

$(document).on("pagecontainershow", function(evt, ui){
    var pageID = $('body').pagecontainer('getActivePage').prop('id');

    if(pageID == 'signaturePage'){
        if($("#signatureDiv").find(".jSignature").length == 0){
            $("#signatureDiv").jSignature();
        }
    }
}

このメソッドは、jQuery 1.11.3 および jQuery Mobile 1.4.5 以降で機能します。

于 2015-07-28T14:33:20.807 に答える
0

この問題を経験している他の人を明確にするために、jSignatureを「pageshow」イベントに添付するとうまくいきました。

    $("#signpage").live("pageshow",function(e,data){
      if($("#signature").find(".jSignature").length == 0){
                    $("#signature").jSignature();
      }
    });
于 2013-05-13T11:16:57.850 に答える