2

j query mobile を使用してリスト ビューにデータを入力しようとしています

私のhtmlコードは

<!DOCTYPE html>


<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Demo Page</title>


<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>

function onDeviceReady() {}
document.addEventListener("deviceready", onDeviceReady, false);

function Button_onclick() {

for(i=0; i < 3; i++){
        $("#numbers").append('<li>' +i+'</li>' );
}

} 

<div >
    <input id="Click_Button" type="button" value="Submit" onclick="Button_onclick()" />
</div>

<div id="divList" data-role="content">
    <ul id="numbers" data-role="listview" data-inset="true"> </ul>
</div>

期待される結果はこのようなものでした

期待した結果

しかし、私が得た結果はこのようなものでした

得られた結果

誰でも何が問題なのか教えてもらえますか?

4

2 に答える 2

1

リストビューを動的に変更するため、JQM が正しいスタイルを適用できるようにリストビューを更新する必要があります。リストにアイテムを追加するたびに、これを行う必要があります。

これは、次のステートメントで実現できます。

$('#numbers').listview('refresh');

これについて詳しく知りたい場合は、JQM ドキュメントを参照してください: http://jquerymobile.com/test/docs/lists/docs-lists.html (ページの下部にあるリストの更新)

于 2012-10-31T08:52:49.513 に答える
0

これを追加onbuttonclick.

$("#numbers").append('<li style="list-style-position:inside;border: 1px solid black;">'+i+'</li>' );

li style="list-styleliテキストを内部 に保持し、border周囲にボックスを作成しますli

これを最初と最後の li アイテムに使用します。

//for first child
li:last-child{
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
//for last child
li:first-child{
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
于 2012-10-31T08:21:44.413 に答える