1

jQuery Mobile で遊ぶのは初めてですが、jQuery を少し使用しました。迅速なアドバイスを期待していました。

頭の中でいくつかの xml を解析し、 <li> タグを使用して div にデータをリストとして書き込みます。そこにリストが表示されますが、jQuery Mobile のデフォルト スタイルでフォーマットされていません。私は何か間違っていると確信していますが、スタイルを適用するために何をする必要があるのか​​\u200b\u200bわからないか、「準備完了」以外のデータを取得する必要があるかもしれません。これが私のコードです。

それは私が見逃しているほど単純なものでなければなりません。HTML の <li> タグをハードコーディングすると正常に動作しますが、 use .append() を使用すると、リストのフォーマットが表示されません。

あなたが持っているかもしれないヒントを本当に感謝します.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Chart</title> 
    <link rel="stylesheet" href="css/jquery.mobile-1.0a2.min.css" />
    <script src="js/jquery-1.4.4.min.js"></script>
    <script src="js/jquery.mobile-1.0a2.min.js"></script>

<script type="text/javascript">

$(document).ready(function()
{
  $.ajax({
    type: "GET",
    url: "xml/vc-data.xml",
    dataType: "xml",
    success: function(xml){
        // build country list
        var currentCountry = "";
        var currentRegion = "";
        $("#countries").html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
        $(xml).find("charts").each(function()
        {
            var country = $(this).find('country').text();
            var region = $(this).find('region').text();
            if(currentCountry != country) {
                //countryList += "<li><a href='#'>" + country + "</a></li>";
                $("<li data-role='list-divider'></li>")
                .html(country)
                .appendTo("#countries ul");
            }
            if(currentRegion != region) {
            $("<li></li>")
                .html("<a href='#'>" + region + "</a>")
                .appendTo("#countries ul");
            }
            currentCountry = country;
            currentRegion = region;
        });
    }
  });
});

</script>
</head> 
<body> 

<!-- Start of first page -->
<div data-role="page">

    <div data-role="header">
        <h1>Charts</h1>
    </div><!-- /header -->

    <div data-role="content" id="countries" >   

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

おい。返信ありがとうございます。間違ったキーワードで検索していたのではないかと思います。これはどこにも見つからず、過去数日間立ち往生していたからです。ここでの助けに本当に感謝しています。オプションとしてjqTouchに移行しようとしていましたが、これを機能させたいと思っています。私はほとんどそこにいると思います。

これを追加してみました：

 $("#countries > ul").page();

しかし、それは何にも影響しませんでした。

それから私は追加しました：

$("#countries div > ul").page();

リンクの色に影響を与えましたが、間隔などで行のスタイルをまったく設定しませんでした.

次に、さらに掘り下げて、見逃したドキュメントでこれを見つけました：

リストビューにアイテムを追加する場合は、refresh() メソッドを呼び出してスタイルを更新し、追加されたネストされたリストを作成する必要があります。例: $('ul').listview('refresh');

そこで、page() をこの行に置き換えたところ、見事に機能しました。

$("#countries div > ul").listview('refresh');
4

1 に答える 1

1

あなたが見逃しているのは簡単なことではありません。jQueryモバイルは、新しく作成されたものを自動的にフォーマットしません。私はそれがパフォーマンスの豚になると思います。

.page()作成する最上位の要素にjQuery モバイル メソッドを適用する必要があります。

あなたの場合、次のようにすべきだと思います：

$("#countries>ul").page();

詳細なハウツー: http://jquerymobiledictionary.dyndns.org/faq.html

(「DOM に追加したコンテンツで JQM を機能させるにはどうすればよいですか?」という質問)

[編集]

#countries はコンテンツ内の div であり、ul 要素を作成すると想定していました。あなたは私がリンクしたチュートリアルを読んでいません。新しいラッピング要素を絶対に作成する必要があります。.page()HTML ソースに存在する要素は、既に存在しているため使用できません。

この HTML を使用します

<div id="countries" data-role="page">    
    <div data-role="header">
        <h1>Chart</h1>
    </div><!-- /header -->

    <div data-role="content" id="here">   

    </div><!-- /content -->   
</div>

そして成功関数のこのコード：

success: function(xml){
            // build country list
            var currentCountry = "";
            var currentRegion = "";
            $('#here').html('<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"></ul>');
            var $here=$('#here > ul');

            //var countryList = "";
            $(xml).find("chart").each(function()
            {
                var country = $(this).find('country').text();
                var region = $(this).find('region').text();
                if(currentCountry != country) {
                    $("<li></li>").html(country).appendTo($here);
                }
                if(currentRegion != region) {
                    $("<li></li>").html("<a href='#'>" + region + "</a>").appendTo($here);
                }
                currentCountry = country;
                currentRegion = region;
            });

            $here.page();
        }

うまくいかない場合は、次のいずれかを確認してください。

  1. jquery 1.4.3 を使用する必要があります (1.4.4 には jqm に関する問題があります)。
  2. 成功関数がまったく呼び出されているかどうかを確認します

私はそれをテストしましたが、うまくいきました。

于 2010-12-13T18:25:14.523 に答える