1

私が構築している vBulletin サイトのモバイル バージョンのメイン ナビゲーション メニューとして、jquery モバイルのネストされたリスト ビューを組み込むことに取り組んでいます。モバイル デバイス / エミュレーターを使用する必要があります。そうしないと、リスト ビューが表示されません。Safari でユーザー エージェントを変更してテストを行っています。

サイトへのリンクは次のとおりです。

http://www.ulbf.innov-images.com/content.php?6-home

リストビューを含むhtmlは次のとおりです。

<ul data-role="listview">    
    <li><a href="register.php">How to Join</a></li>
    <li><a href="memberlist.php">Find a Service or Member</a></li>
    <li><a href="sendmessage.php">Contact Us</a></li>                      
    <li>For Members
        <ul data-role="listview">
            <li><a href="#">History &amp; Mission</a></li>
            <li><a href="#">Success Stories</a></li>
            <li><a href="#">Current Officers</a></li>
            <li><a href="#">Past Events &amp; Topics</a></li>
        </ul>
    </li>
</ul>

ネストされたリストビューを含むリスト アイテムは、「メンバー向け」アイテムです。

私はこれについてかなりの調査を行い、同じ html とバージョンの jquery/jq mobile を使用して jsfiddle を作成しました。

編集: jsfiddle は実際に機能します。そこが肝心だ。フィドルは機能しますが、私のサイトのコードは機能せず、その理由がわかりません。

http://jsfiddle.net/QfyZd/

私の結論は、サブメニューの表示を妨げている他の javascript や css が vbulletin にあるに違いないということです。vBulletin の JavaScript を 2 つ含めないようにしましたが、効果がありました。

ここからどこへ行けばいいのかわからない。

編集 - 問題は vbulletin-mobile.js にあることがわかりました。ファイルを解凍し、サーバーにロードしました。799 行目から 1006 行目までのリストビュー セクションで問題が発生しているようです。私は努力を続けますが、それまでの間、誰かがアイデアを持っている場合は、助けていただければ幸いです.

4

1 に答える 1

0

jquery モバイルのネストされたリスト ビュー

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul data-role="listview" data-header-theme="e">
                    <li>Animals
                        <ul>
                            <li>Pets
                                <ul>
                                    <li><a href="index.html">Canary</a></li>
                                    <li><a href="index.html">Cat</a></li>
                                    <li><a href="index.html">Dog</a></li>
                                </ul>
                            </li>
                            <li>Farm animals
                                <ul>
                                    <li><a href="index.html">Chicken</a></li>
                                    <li><a href="index.html">Cow</a></li>
                                    <li><a href="index.html">Sheep</a></li>
                                </ul>
                            </li>
                            <li>Wild animals>
                                <ul>
                                    <li><a href="index.html">Alligator</a></li>
                                    <li><a href="index.html">Bear</a></li>
                                    <li><a href="index.html">Zebra</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Colors
                        <ul>
                            <li><a href="index.html">Blue</a></li>
                            <li><a href="index.html">Green</a></li>
                            <li><a href="index.html">Red</a></li>
                        </ul>
                    </li>
                    <li>Vehicles
                        <ul>
                            <li>Cars
                                <ul>
                                    <li><a href="index.html">Audi</a></li>
                                    <li><a href="index.html">BMW</a></li>
                                    <li><a href="index.html">Volkswagen</a></li>
                                </ul>
                            </li>
                            <li>Planes
                                <ul>
                                    <li><a href="index.html">Boeing</a></li>
                                    <li><a href="index.html">Embraer</a></li>
                                    <li><a href="index.html">Airbus</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul><br/><br/>
                <div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="false">
                    <div data-role="collapsible">
                        <h2>Filtered list</h2>
                        <ul data-role="listview" data-filter-theme="c" data-divider-theme="d" data-inset="false">
                            <li><a href="index.html">Adam Kinkaid</a></li>
                            <li><a href="index.html">Alex Wickerham</a></li>
                            <li><a href="index.html">Avery Johnson</a></li>
                            <li><a href="index.html">Bob Cabot</a></li>
                            <li><a href="index.html">Caleb Booth</a></li>
                        </ul>
                    </div>
                    <div data-role="collapsible">
                        <h2>Formatted text</h2>
                        <ul data-role="listview" data-theme="d" data-divider-theme="d">
                            <li data-role="list-divider">Friday, October 8, 2010 <span class="ui-li-count">2</span></li>
                            <li><a href="index.html">
                                <h3>Stephen Weber</h3>
                                <p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
                                <p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
                                <p class="ui-li-aside"><strong>6:24</strong>PM</p>
                                </a></li>
                            <li><a href="index.html">
                                <h3>jQuery Team</h3>
                                <p><strong>Boston Conference Planning</strong></p>
                                <p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
                                <p class="ui-li-aside"><strong>9:18</strong>AM</p>
                                </a></li>
                        </ul>
                    </div>
                    <div data-role="collapsible">
                        <h2>Thumbnails and split button</h2>
                        <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false">
                            <li><a href="index.html">
                                <img src="../../_assets/img/album-bb.jpg">
                                    <h3>Broken Bells</h3>
                                    <p>Broken Bells</p>
                                </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
                                </a></li>
                                <li><a href="index.html">
                                    <img src="../../_assets/img/album-hc.jpg">
                                        <h3>Warning</h3>
                                        <p>Hot Chip</p>
                                    </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
                                    </a></li>
                                    <li><a href="index.html">
                                        <img src="../../_assets/img/album-p.jpg">
                                            <h3>Wolfgang Amadeus Phoenix</h3>
                                            <p>Phoenix</p>
                                        </a><a href="lists-split-purchase.html" data-rel="dialog" data-transition="slideup">Purchase album
                                        </a></li>
                                    </ul>
                                </div>
                            </div>                
                        </div>
                    </div>    
                </body>
            </html>
于 2013-09-03T10:10:35.447 に答える