0

こんにちは、これはこれまでで最もばかげた質問のように思えますが、これを解決するのに役立ったサイトはメンテナンス中です。私は jquery mobile の学習の初期段階にあり、助けが必要です。

html5 ページに動的ではない順序付けられたリストビューがあります。ユーザーにテキストを伝えるアラート (ios のポップアップ アラートなど) を電話に表示したいのですが、ユーザーは [OK] をクリックしてそれを閉じ、順序付けられたリスト ビューに戻ることができます。私のhtmlはこれです。例として、このリストから Montview をクリックすると、iPhone にアラートがポップアップし、ユーザー向けのテキストが表示され、[OK] をクリックして閉じます。

誰かが必要なjqueryモバイルjavascriptを手伝ってくれませんか.

ありがとう

<head>
    <title>title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="lib/jquery-1.6.4.js"></script>
    <script src="lib/jquery.mobile-1.1.0.js"></script>
    <script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <link href="src/css/jquery.mobile.structure-1.1.0.css" rel="stylesheet">
    <link href="src/css/jquery.mobile.theme-1.1.0.css" rel="stylesheet">
</head>

<body>
    <div data-role="page" id="page1">
        <div data-role="header">
            <h1>Grounds</h1>
        </div>
        <div data-role="content">
            <ol data-role="listview" data-theme="c" data-inset="true">
                <li>
                    <a>Montview</a>
                </li>
                <li data-theme="b">
                    <a>Asquith</a>
                </li>
                <li>
                    <a>Button</a>
                </li>
                <li>
                    <a>Button</a>
                </li>
            </ol>
        </div>
    </div>
    <div data-role="page" id="page2">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content"></div>
        <div data-role="footer">
            <h1>Footer</h1>
        </div>
    </div>
</body>

4

1 に答える 1

1

質問を誤解していたら申し訳ありませんが、おそらくこのようなものを探していますか？

// this will bind all of the items
$(function(){
    $("ol[data-role='listview']").click(function(){
        alert("woah!");
    });
});

編集: リスト項目ごとに異なるイベントをバインドする場合は、項目に ID (またはそれらを区別するための何か) を指定する必要があります。それぞれを選択することもできます - それらの内容を調べて、この方法でそれらを区別しますが、私はこのアプローチに反対することをお勧めします)。

        <ol data-role="listview" data-theme="c" data-inset="true">
            <li id="mountView">
                <a>Montview</a>
            </li>
            <li id="asquith" data-theme="b">
                <a>Asquith</a>
            </li>
            <li id="someButton">
                <a>Button</a>
            </li>
            <li>
                <a>Button</a>
            </li>
        </ol>

次に、JavaScriptで：

$(function(){
    $("li#mountView").click(function(){
        alert("Mount View Event!!!");
    });

    $("li#asquith").click(function(){
        alert("Asquith Event!!!");
    });
});

編集2

HTML を詳しく調べたところ、別の「ページ」セクションが追加されていることがわかりました。リンクの 1 つをクリックして、このページのコンテンツを開きたいと思われます。このJSFIDDLEをチェックすると、私の言いたいことがわかるでしょう。(このソリューションにはコードさえ必要ありません。要素に正しく注釈を付けていれば、jquery mobile はイベントを自動配線します)。この部分に注目 -><a href="#page2" data-rel="dialog">bar</a>

于 2013-02-14T02:51:29.123 に答える