重定向jQuery Mobile中的大選擇菜單的更改

我在嘗試重定向到另一個頁面時出現問題，當用戶從jQuery Mobile的<select>菜單中選擇一個選項時。重定向jQuery Mobile中的大選擇菜單的更改

下面是一個非常小的例子，類似於我試圖做的事，證明我遇到的問題。問題是，當選項列表太大而不適合在屏幕上時，重定向確實是而不是的工作。當選項適合屏幕時，它工作正常。（您可以通過你的窗戶非常小的在桌面瀏覽器重現此。）

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery Mobile Test</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> 
    <script> 
    $(function() { 
     $('#mySelect').bind('change', function() { 
     // The actual logic for building the URL is more complicated, obviously. 
     // This is just an example. 
     var url = 'jquery-mobile-test.html?param=' + this.value; 
     location.href = url; 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div data-role="page" class="type-home"> 
    <div data-role="content"> 
     <div data-role="fieldcontain"> 
     <select data-native-menu="false" name="param" id="mySelect"> 
      <option>Select an Option...</option> 
      <option value="1">One</option> 
      <option value="2">Two</option> 
      <option value="3">Three</option> 
      <option value="4">Four</option> 
      <option value="5">Five</option> 
      <option value="6">Six</option> 
      <option value="7">Seven</option> 
      <option value="8">Eight</option> 
      <option value="9">Nine</option> 
      <option value="10">Ten</option> 
     </select> 
     </div> 
    </div> 
    </div> 
</body> 
</html>

從jQuery Mobile Docs一些背景資料：

當select有少量的，將適合的選項設備的屏幕上，該菜單將顯示爲帶有彈出式轉場的小覆蓋圖。 [...]當設備的屏幕上顯示的選項過多時，框架會自動創建一個新的「頁面」，其中包含選項的標準list view。這允許我們使用設備上包含的本地滾動來移動長列表。標籤內的文本用作此頁面的標題。

當它創建新的「頁面」時，它將#&ui-state=dialog添加到URL的末尾，然後當選擇一個選項時，它將URL更改回來。我認爲這是干擾我嘗試去做的重定向的原因。

有關解決此問題的最佳方法的任何建議？

編輯＃1：我應該提到的是，我無法使用$.mobile.changePage()因爲頁面到我轉向做一些奇怪的重定向的它自己的多數民衆贊成搞亂了轉變。對不起，這在示例中沒有提到。

編輯＃2：我粘貼上面的代碼（而不是使用要點），以便人們可以通過搜索更容易地找到此問題。

來源

2012-06-06 jnrbsn

我將其移至jsfiddle.net以測試您的代碼。我錯過了什麼，或者是否有可能在您的要點中進行測試？ – BumbleB2na

您可以直接下載該html文件並在您的計算機上進行本地測試。 – jnrbsn

我決定不把它放在jsfiddle上，因爲它在iframe中，解釋如何重現問題會更困難。 – jnrbsn

我想通了，所以我回答我的問題。

下面是固定它爲我的代碼：

var url = 'redirect-to-this-page.html', 
    $dialog = $('div.ui-page.ui-dialog.ui-page-active'); 

if ($dialog.length > 0) { 
    $dialog.bind('pagebeforehide', function() { 
     location.href = url; 
    }); 
} else { 
    location.href = url; 
}

來源

2012-06-06 20:12:14 jnrbsn

我有這樣的問題，不僅與「全屏」選項列表，但也有彈出選項。此修補程序僅適用於「全屏」。對於彈出應該有另一個事件處理程序（和選擇器） - 我已經使用了mouseleave。 –

不妨讓jQuery Mobile的更換你的location.href使用jQuery Mobile的執行重定向完成它的小魔術表演：

$.mobile.changePage('jquery-mobile-test.html?param=' + this.value);

來源

2012-06-06 19:34:22 BumbleB2na

請參閱我的問題中的「編輯」。 – jnrbsn

沒關係。有趣的使用'pagebeforehide'事件，我將不得不記住。 – BumbleB2na

順便說一下，'$ .mobile.changePage（）'在我上面的基本示例中似乎並不一致。 – jnrbsn

這是一個骯髒的修復，但你可以圍繞window.location的與的setTimeout功能：

setTimeout(function() { 
    window.location.href = '/some-url.html'; 
}, 0);

來源

2013-12-30 13:34:07

重定向jQuery Mobile中的大選擇菜單的更改

回答

相關問題