0

私の小さなアプリケーションでは、jQuery モバイルを使用してネストされたリストを作成しています。リストの項目をクリックすると、ヘッダーの見出しが変わり、クリックした項目の見出しが表示されます。ヘッダーが以前のページのように残るようにするにはどうすればよいですか?

例：

        <div data-role="page" id="newspage" data-theme="a">

        <div data-role="header" data-position="fixed">
            <a href="#home" data-role="button" data-icon="home" data-iconpos="notext" data-mini="true" data-inline="true" data-transition="slide" data-direction="reverse">Home</a>
            <h1>News</h1>
        </div>

        <div data-role="content" id="newsList">
            <ul data-role="listview">
                <li>
                    <h2>News 1</h2>
                    <p>This is a short version of news 1</p>
                    <ul>
                        <li>
                            <h2>News 1</h2>
                            <p>This is the text of news 1</p>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>News 2</h2>
                    <p>This is a short version of news 2</p>
                    <ul>
                        <li>
                            <h2>News 2</h2>
                            <p>This is the text of news 2</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

したがって、「ニュース 1」をクリックすると、ヘッダーの見出しが「ニュース 1」に変わり、もちろんネストされたアイテムが表示されます。しかし、以前にヘッダーdivで定義されていたように、ネストされたアイテムのヘッダーに「ニュース」を入れたいです。私が欲しいものを明確にしたことを願っています。:-)これを行う方法はありますか？

ありがとう！

4

1 に答える 1

1

これがあなたの解決策です。HTML の最後に解決策があります。

コード例:

 $(':jqmData(url^=newspage)').live('pagebeforecreate',function (event) {
      var title =  $(':jqmData(url^=newspage)').find(':jqmData(role=header) h1').html();
      $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)').html('<h1>' + title + '</h1>');
 });

コードの次の部分を見てください。

$(':jqmData(url^=newspage)').

newspage は、リストビュー コンテナー ページの ID です。

于 2012-11-28T10:45:46.680 に答える