jQuery Mobile - フォーム要素を動的に作成する
-
27-09-2019 - |
質問
iOS デバイスを対象とした、Web データベース駆動のオフライン Web アプリを作成しています。jQuery Mobileを使用しようとしていますが、さまざまなフォームの作成に問題があります。
フォーム オプションはデータベース クエリから取得されるため、ページが読み込まれた後にページに挿入されるため、「jQuery-Mobilification」は発生しません。ソースをざっと見たところ、現段階ではこれを呼び出す明確な方法はないようです (もちろん、これはアルファ版リリースであり、これはかなり一般的なリクエストだと思うので、期待しています)来る)。これを行うために実行できる何らかの回避策はありますか?私が特に興味があるのは、ラジオ ボタン、チェック ボックス、選択リストです。
解決
これは文書化されていない内部で混乱していますが、以下は私にとってはうまくいきます:
$("#some-div").load("/html/fragment/",
function() {
$(this).find("input").customTextInput();
});
ボタンやチェックボックスなどにも同等のメソッドがあります。
を見てください。 _enchanceControls
[原文どおり] のメソッド http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.
1.0Alpha2のアップデート:ライブラリの内部をいじってみると予想されることですが、これは最新バージョンでは機能しなくなりました。変化 customTextInput()
に textinput()
少し修正されていますが、何らかの理由でテーマが完全には適用されていません。私たちは警告を受けました...
他のヒント
アップデート
Beta2 には、 create
イベント。ベータ 2 がリリースされたら、よくある質問を更新します。見る http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/
更新されたよくある質問: http://jquerymobiledictionary.pl/faq.html
CaffeineFueled が提案したように、 .page()
JQM を HTML の任意の部分で動作させる方法です
.page()
要素に対して 1 回だけ呼び出すことができます。ページに追加するラッピング要素で呼び出します。すべてを処理できるはずです。
は、現在選択された答えが古くなってわずかです。動的に追加されたコンテンツ(リストまたはフォーム)をスタイリングのための使用「リフレッシュ」ではなく、「ページ」、。
あなたがリストビューに項目を追加する場合、あなたはよ refresh()メソッドで呼び出す必要があります それがスタイルを更新し、いずれかを作成します 追加されているネストされたリスト。ために たとえば、
$('ul').listview('refresh');
あなたのAJAX呼び出しが完了したら、あなたのフォーム要素を呼び出してみてください挿入します:
$("#the-page-id").page();
私はjqueryのモバイルチームは、将来的にこの問題を解決するために、さまざまなUI要素の.refresh()メソッドを追加すると確信しています。
うん、問題は、あなたが説明したようです。文書の準備ができたときに「動員は」解雇されます。オフラインDBクエリが非同期であるためdocument.readyが発射された後、しかし、それは終了します。 DOMは、プロセスの後半で更新され、すべてのdivおよびリスト項目に追加し、余分なCSSを持っていませんので。
私はあなたが実行することを教えたときに文書準備が、実行時に実行されないためにモバイルJSのソースを変更しなければならないと思います。次に、あなたのデータベースのコールバックでその関数を呼び出す必要があります。
のようになりますが、現時点では唯一のオプションです。
は伝統的に、私は今、煎茶jqtouchと使用しました。私はjQueryのモバイルでずっとプレイしていない。
代わりに - あなたはそれに必要なCSSスタイルとデータベースのそれを照会した後、あなたのHTMLを書き出すことができます。あなたがFirefox用のFirebugのプラグインを使用する場合は、とき動員の実行スタイル/クラスが適用なっているかを見ることができます。あなただけのこれらの規則を使用してHTMLを書き出すことができます。理想的な、しかし、うまくいくわけではありません。
naugturが正しい、あなたがDOMに追加することを任意の要素に.PAGE()を呼び出す必要があり、それがうまく機能してます:
var el = $('<input type="text"/>')
el.page();
$('#something').append(el);
これは私のために働いた(jquerymobile1.7.0):
$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');
$('#name').textinput();
があり、現在ので、それらを作成するためのフォーム要素(例えば、スライダー、TextInputコントロールなど)のすべての種類のためのプラグイン機能と呼ばれています。
ここでトムはについて話したことを、この機能のドキュメントへのリンクです。わからない正確に、彼らが追加されたとき、私はそれを使用していますし、それは私の作品!
http://jquerymobile.com/test/docs/forms/plugin- eventsmethods.htmlする