JQuery Mobileウィジェットは動的コンテンツの再フォーマット時にフォーマットされません

4つの「data-role = 'pages'」を含む1ページのjQuery Mobileアプリケーションがあります。基本的に、4つの「ページ」を持つ1つのHTML文書です。JQuery Mobileウィジェットは動的コンテンツの再フォーマット時にフォーマットされません

各「ページ」には、javascriptを使用して動的に設定されているナビゲーションフッターもあります。私はそうのように（「フッター」のクラスと）「theFooter」という変数を定義し、すべての私の空のフッターのdivを割り当てる：

$('.footer').html(theFooter);

は今、これが正しく動作するために得るために、私はそれらを移入する必要がありますフッタは作成されるページより前に作成されます。そうでない場合、jQuery Mobileはフレームワークを適用してフッタバーをモバイルアプリのナビゲーションバーのように見せません。だから私はこれを通じてそれを達成：

$("div[data-role='page']").live('pagebeforecreate', function (evt) { 
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that  the 'page' has been run 
    $('.footer').html(theFooter); 
});

それは夢、最初の頃のように動作します。ページが「約」、「連絡先」、「ミッション」、「カレンダー」としましょう...

「約」をクリックすると完璧です。

「連絡先」をクリックすると完璧です。

「ページ」と「ページの作成」が発生し、フッターが「大丈夫」と表示されるたびに、これを行うことができます。

あなたがもう一度「about」（またはすでに訪れたもの）をクリックすると、ページが遷移してコンテンツが配置されますが、JQUERY MOBILE FORMATTINGはありません。そして、 'pagebeforecreate'関数をもう一度起動するのではなく、最初に作成されているので意味があります。

私は 'pageinit'と 'pagebeforeshow'の起動を試してみましたが、どこにも行きませんでした。

私は.trigger（）と.page（）メソッドを試していますが、どこにもありません。

誰かがそのJQuery Mobileフォーマットスティックの作成方法を正確に説明できますか？

出典

2012-01-20 Steve C.

あなたがウィジェットの親要素に.trigger('create')を呼び出した場合、あなたはそれは、任意の時点でのマークアップです高めることができる。一つの問題を解決し

$("div[data-role='page']").live('pagebeforecreate', function (evt) { 
    console.log("BEFORE CREATE run."); //writes to my fireBug console to alert me that  the 'page' has been run 
    $('.footer').html(theFooter).trigger('create'); 
});

出典

2012-01-20 19:38:43 Jasper

ジャスパー、おかげで...私は持っていましたが、私が追加していたいくつかの書式を使って別のものを作成しました。私が何をしたのか分かっていれば、おそらくそれを理解することができました。正確には、トリガー（「作成」）関数は自分のコードに何をしますか？ –

'trigger（ 'create'）'は全てのウィジェットを初期化します： '$（ '[data-role =" listview "]'）。ウィジェットが初期化されると、HTMLの構造が変更され、多くの属性作業が行われます（クラスが追加され、アリア属性が追加され、データ属性が追加されます）。ウィジェットが初期化された後にウィジェットを変更する予定がある場合、初期化前と同じコードになるとは思わないでください。開発者ツールの初期化されたウィジェットを調べて、マークアップの変更を確認します。 – Jasper

ああ、OK。ええ、私がやっていたことは、初期化の後にカスタムCSSを追加することでした。だから、それが再び初期化されると、それはおそらくすべての私のカスタムCSSを消去し、ちょうど "すぐに"ウィジェットcssに戻ります、そうですか？だから、おそらく私はこれらのカスタマイズを関数内で行い、すべてのものをトリガの後に行います。私は今週末か月曜日にそれを試してみて、それがどのように出てくるかを教えてくれるでしょう。私はトリガー（）のコールバック関数を行うことはできますか？ –

-1

enter image description here

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0"/> 
<link rel="stylesheet" href="jquery.mobile-1.0.1.css" /> 
<title> Hello World </title> 

<script src="jquery.js"></script> 
<script src="jquery.mobile-1.0.1.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(e) { 

$('#omtList').html('<ul data-role="listview" data-split-icon="delete" data-split-theme="d"> <li><a href="index.html"><h3>Broken Bells</h3><p>Broken Bells</p></a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album </a></ul>').trigger('create'); 
    }); 
</script> 
</head> 

<body> 
omt 
<div> 
    <div id="omtList"> 


    </div><!--/content-primary --> 
</body> 
</html>

出典

2012-03-24 04:26:22

JQuery Mobileウィジェットは動的コンテンツの再フォーマット時にフォーマットされません

答えて

関連する問題