4

jQuery モバイルと Phonegap を使用してテスト アプリを作成しています。次のページがあります。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile: Theme Download</title>
    <script src="cordova-2.5.0.js"></script>
    <link rel="stylesheet" href="Longmont.min.css" />
    <link rel="stylesheet" href="jquery.mobile.structure-1.3.0.css">
    <script src="jquery.js"></script>
    <script src="jquery.mobile.js"></script>
    <script>
        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            setTimeout(function() {
                       navigator.splashscreen.hide();
                       }, 500);
        }
    </script>
    <script>
    $(document).ready(function() {
        $.getJSON('http://localhost/api.php', {'id':3}, function(data) {
            var items = [];

            $.each(data, function(key, val) {
                items.push('<div data-role="collapsible"><h1>' + val + '</h1></div>');
            });

            $('<div/>', {
                data-role: 'collapsible-set',
                html: items.join('')
            }).appendTo('#page');

        });
    });
    </script>
</head>
<body>
    <div data-role="page" id="page">
    </div>
</body>
</html>

data-roleに設定して、項目配列をdivに入れようとしていcollapsible-contentます。そのため、作成時に属性を編集します ( で$('<div/>', {)。ただし、この属性はハイフンでつながれており、シミュレーターでこのコードを試すと、空白のページが表示されます。

jQueryでハイフン付きの属性を表す適切な方法は何ですか?

4

3 に答える 3

13

を含むオブジェクト プロパティは-、引用符で囲む必要があります。

"data-role": value

他の演算子や引用符、、、スペースなどの特殊文字についても同様:です;。

于 2013-04-09T20:29:03.850 に答える
5

ハイフンで属性を定義するには、 Kevin B によるこの回答を確認してください。

折りたたみ可能なマークアップを強化するには、アイテムを本文に追加した後、以下の方法に従います。

折りたたみ式の場合（参考）

$('[data-role=collapsible]').collapsible();

折りたたみセット用（参考）

$('[data-role=collapsible-set]').collapsibleset('refresh');
于 2013-04-09T20:41:25.420 に答える