0

しばらくの間、これと戦っています。選択メニューをナビゲーション メニューとして機能させようとしていますが、URL を機能させず、実際にページを変更することができません。

頭の中で：

<script>
$(function() {
    $("#select-choice-1").click(function() {
        $.mobile.changePage($("#select-choice-1"));
    });        
});
</script>

このメニューでは:

<div id="MobileWrapper" data-role="fieldcontain">
<select name="select-choice-1" id="select-choice-1" data-theme="a" data-form="ui-btn-up-a" data-mini="true">
<option data-placeholder="true">Navigation</option><!-- data=placeholder makes this not show up in the pop up-->
<option value="/index.php" data-ajax="false">Home</option>
<option value="/services/index.php" data-ajax="false">Services</option>
<option value="/trainers/index.php" data-ajax="false">Trainers</option>
<option value="/locations/index.php" data-ajax="false">Locations</option>
<option value="/calendar/index.php" data-ajax="false">Calendar</option>
<option value="/contactus/index.php" data-ajax="false">Contact Us</option>
</select>
</div><!--END MobileWrapper DIV-->
4

2 に答える 2

1

試す

$(function() {
    $("#select-choice-1").change(function() {
        $.mobile.changePage($(this).val());
    });        
});

ユーザーがドロップダウンメニューをクリックするたびにドロップダウンメニューに変更するようにjQuerymobileに指示していました。

.changeドロップダウンから新しいオプションが選択されたときにのみトリガーされ$(this).val()、選択したアイテムの値を取得します。

アップデート

前述の解決策は問題の一部を修正しましたが、ナビゲーションはまだ機能していませんでした...

ナビゲーションURLが解決されhttp://www.domain.com/...、ページが下に読み込まれhttp://domain.com/...、jQuerymobileはデフォルトでクロスドメインページを防止します。

いくつかの解決策があります（未テスト）

  1. ドキュメントヘッドにベースタグを追加します
    <base href="http://domain.com/" />
  2. DOMの準備が整う前に次のように設定して、jQueryでcrossDomainPagesを許可します
    $.mobile.allowCrossDomainPages = true
于 2012-12-16T06:13:50.577 に答える
0

理由はわかりませんが、jQuery モバイルの初期バージョンに切り替えると、メニューが機能します。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
于 2012-12-17T23:05:30.187 に答える