2011-10-21 11 views
0

私はjQuery mobile(とJS :)でかなり初心者です。私は今2日間インターネットを検索し、解決策を見つけていません。jQuery Mobile:divタグのlistview(refresh)ですか?

$(#someList).listview( 'refresh')と同じことをするが、divタグの機能があるかどうかを知りたい。私はdivタグを2つ持っています。内容を変更すると、スタイリングが緩んでしまいます。

コード:

function muestraFicha() { 
    var categoriaFicha = "Ciencia/Matemáticas"; 
    var preguntaFicha = "Si un tren eléctrico sale de Valencia dirección Barcelona a 60Km/h con viento norte de 30Km/h ¿Hacia qué dirección saldrá el viento de su chimenea?"; 
    var respuestaFicha = "En ninguna dirección, es un tren eléctrico y por lo tanto no despide humo"; 
    var divRespuesta = "<div data-role='collapsible' data-theme='b' data-content-theme='c'>" 

    $("#fichaRespuesta").empty(); //vaciamos la ficha 
    $("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
    $("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

    $("#fichaPregunta").empty(); 
    $("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
    $("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 
} 

ので、関数の最後に私は.listview(「リフレッシュ」)またはHTMLが唯一の関数が呼び出された最初の時間をスタイリングされたものが必要。

スタイルを失うdivはfichaRespuestaとfichaPreguntaです。

ありがとうございます。

答えて

2

あなたはjQueryのモバイルスタイルにどんな新しいDOM要素を持っているしたい場合は、.trigger('create');機能を使用することができます。

新イベント「を作成」:簡単にページのプラグイン間に一度

ですべてのウィジェットを強化します はほとんどのウィジェットが使用する「pagecreate」イベントを送出します。 は自動的に初期化されます。ウィジェットプラグインスクリプトが と参照されている限り、それは前と同じように、ページ上に見つかるウィジェットのインスタンスを自動的に拡張します( )。たとえば、選択メニュー プラグインがロードされている場合は、新しく作成されたページ 内で見つかったすべての選択項目が強化されます。

この構造では、 がすべての要素でトリガーされる新しい作成イベントを追加できるようになり、その要素に含まれる各プラグインを手動で 初期化する作業が省かれます。これまで、Ajaxや動的に生成されたマークアップを使用してコンテンツにロードされた の場合、マークアップのウィジェットを強化するために、すべてのプラグイン(listview button、 selectなど)を手動で初期化する必要がありました。

簡単な作成イベントは、ページ作成拡張機能 の処理と同じように、そのマークアップ内のすべての必要なプラグイン を初期化します。 Ajaxを使用してHTML マークアップ(ログインフォーム)のブロックをロードする場合、自動的に作成して、 に含まれているすべてのウィジェット(この の入力とボタン)を拡張バージョンに変換できます。このシナリオのためのコードは次のようになります。

$(ウィジェットが含まれています...新しいマークアップ...).appendTo( ".ui-ページ" ).trigger( "作成します")。

リフレッシュ対作成:重要な区別

メモを作成するイベント と、いくつかのウィジェットが持つリフレッシュ方法との重要な違いがあること。 createイベントは、1つまたは複数のウィジェットを含む生のマークアップを強化するために に適しています。プログラムによって操作された (すでに拡張されている)ウィジェットでは、一部のウィジェットが使用するリフレッシュ方法は であり、一致するようにUIを更新する必要があります。あなたは、動的データ・役割=ページ作成後にリストビューの属性、そのリストの親要素に作成トリガ で新しい 順不同リストを追加ページを持っていた場合

は例えば、希望は、書式付きリストビューにそれ 変換しますウィジェット。さらにリストアイテムが プログラムで追加された場合、リストビューの更新メソッドを呼び出すと、新しいリストアイテムのみが拡張状態に更新され、 既存のリストアイテムは変更されません。

上記の情報へのリンク:また、私はあなたが連続して同じセレクタを使用している気づくhttp://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

、あなたが大幅ようなので、セレクタへの呼び出しを一緒に連鎖することにより、コードのパフォーマンスを向上させることができます

変更:

$("#fichaRespuesta").empty(); //vaciamos la ficha 
$("#fichaRespuesta").append("<h4> Respuesta </h4>"); 
$("#fichaRespuesta").append("<p>" + respuestaFicha + "</p>"); 

$("#fichaPregunta").empty(); 
$("#fichaPregunta").append("<h3>" + categoriaFicha + "</h3>"); 
$("#fichaPregunta").append("<p>" + preguntaFicha + "</p>"); 

へ:

$("#fichaRespuesta").empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>"); 

$("#fichaPregunta").empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>"); 

通知.append()の呼び出しの1つを削除しました。追加のオーバーヘッドが2回連続して呼び出されるためです。代わりに、私は両方の.append()呼び出しのHTMLを1回の呼び出しで入れました。

あなたが本当に彼らが唯一のルックアップするために一度、そのように持っているので、あなたのコードのパフォーマンスを向上させる作りに入るセレクターをキャッシュしたい場合:

var $fichaRespuesta = $('#fichaRespuesta'), 
    $fichaPregunta = $('#fichaPregunta'); 
function muestraFicha() { 
    /*I removed your extra code to make this easier to read*/ 

    $fichaRespuesta.empty().append("<h4> Respuesta </h4><p>" + respuestaFicha + "</p>"); 

    $fichaPregunta.empty().append("<h3>" + categoriaFicha + "</h3><p>" + preguntaFicha + "</p>"); 
+0

うわー!偉大な答えは、私のニーズを解決するだけでなく、私はアプリのパフォーマンスを向上させるのに役立ちました!ありがとう、ジャスパー。 –

+1

ようこそ。私は上記のコードをもう一度見ていて、 '.empty()。append()を呼び出すことは' .html()を呼び出すのと同じです。 '.html()'のドキュメント:http://api.jquery.com/html/ – Jasper