jquerymobile 部分レンダリング_jquery のさまざまな更新方法のまとめ-jsチュートリアル-php.cn

jquerymobile 部分レンダリング_jquery のさまざまな更新方法のまとめ

WBOY

リリース： 2016-05-16 16:57:13

オリジナル

1158 人が閲覧しました

JQueryMobile ページでは、最初の初期化中に全体的なレンダリングが実行され、動的に生成されたページには部分的なレンダリングが必要です。

jquerymobile で listview の部分レンダリングを実装する方法:

コードをコピーしますコードは次のとおりです:

function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){
var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.svc/WorkOrderSimpSelByType/Json/" trackOrDealOrInsp " /" userCode "/" type "/" pageNum;
$.ajax({
type: 'get',
dataType : "json",
url: queryPublishOrderListURL,
contentType: 'application/json',
データ: [ ],
success: function(data) {
var sb = new StringBuffer();
$.each(data, function(i,item){
//创建一一つ工单列表行对象
sb.append("

" item.work_orders_id "" i "

");
sb.append("
工单号:" item.work_orders_id "");
sb.append("
创建人:" item.founder_na "
");
sb.append("
创建時間间:" item .found_time "
");
sb.append("
工单类型:" item.type_na "
");
sb.append("
工单内容:" item.work_cont "
");
sb.append("

");
});
var content = sb.toString();
$("#queryList").html(content);
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("请求远程服务错误!");
},
complete: function() {
$("p[data-role=content] ul").listview();
}
});
}

備考:

Listview は、jquerymobile の listview コンポーネントを更新します。

$("p[data-role=content] ul").listview();

リストビュー内の li を更新したい場合は、

を使用できます。

$("p[data-role=content] ul li").listview("refresh");

それ以外の場合、エラーは次のように報告されます:

jquerymobile listview は、初期化前にリストビューのメソッドを呼び出すことができません。メソッド 'refresh' を呼び出そうとしました。

正確な値を取得するには、Jquerymobile チェックボックスを更新する必要があります

コードをコピーコードは次のとおりです:

 通常、ログイン時にユーザー名とパスワードを記憶するための 2 つのチェックボックスがあります。

jquerymobile を使用してページを作成すると、チェックボックスがオンになっている場合、常に正しい値が取得されるとは限りません。 

解決策: 
[code]
$('input[type="checkbox"]').bind('click',function() { 
 $(this).prop ('checked').checkboxradio("refresh"); // イベントをバインドして、チェックボックスのチェック値を時間内に更新します 

 

を使用する場合js を使用してチェックボックスを変更します。値も時間内に更新する必要があります。

$('input [type="checkbox"]').attr('checked',false).checkboxradio("refresh"); ').attr('checked',false).checkboxradio("refresh");

原因: jquerymobile は値を手動で変更した後、再レンダリングできません。このように、ページ上に表示される値は実際の値とは異なります。 (jquerymobile はすべてのフォーム要素を非表示にし、js を使用していくつかの要素を追加して、input、select、textarea、その他の要素の効果を美しくします)
[/code]
ドロップダウンボックスの更新

コードをコピーコードは次のとおりです。

$("#selectbox").html(optionList).selectmenu( 'refresh', true ); 🎜>$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");

ラジオ ボタン グループ: 
$("input [type='radio']").attr("checked",true).checkboxradio("refresh"); 

リストの選択::

var myselect = $( "select#foo") ; myselect[0].selectedIndex = 3; スライダー $("input[type=range] ").val( 60).slider("refresh"); スイッチ (スライダーを使用):

var myswitch = $("select#bar");

myswitch[0] .selectedIndex = 1;
myswitch .slider("refresh");

選択無効スタイル

ボタン無効スタイル mobile-button-disabled ui-state-無効" type="button"
disabled="disabled"value="利用不可"
aria-disabled="true">