0

我有一个带有列表视图的移动页面。如果列表的内容比移动视口长，则列表视图会自动更改为对话框。如果列表适合视口，则它表示为列表视图。（不确定 Rho 中的 JQuery 行为或其他内容）无论如何，在对话模式下更改事件不起作用。以前有人经历过吗？

$(document).on('pageshow', '#coltreg-show-page', function(event) {
var $activePage = $.mobile.activePage

// bind for term select change
var $coltSessions = $activePage.find('select#coltsessions')
$coltSessions.bind('change', function() {
    var evId = $(this).val()
    loadDetails( { evId: evId } )
})


//$leftArrow = $activePage.find('a#left-arrow')
//$leftArrow.bind('click', function() {
//    var termId = $selectTerm.val()
//    loadGrades( { termId: termId, previousTerm: true } )
//})
//$rightArrow = $activePage.find('a#right-arrow')
//$rightArrow.bind('click', function() {
//    var termId = $selectTerm.val()
//    loadGrades( { termId: termId, nextTerm: true } )
//})

// load if grades aren't already there
var $regsesList = $activePage.find('ul#regses-list')
if ( $regsesList.children().size() > 1 ) return

var evId = $coltSessions.val()
loadDetails( { evId: evId } )
})


function loadDetails(argMap) {
argMap = argMap || {}
argMap.evId = argMap.evId || null
//argMap.previousTerm = argMap.previousTerm || false
//argMap.nextTerm = argMap.nextTerm || false
var $activePage = $.mobile.activePage

$.mobile.showPageLoadingMsg()

var requestUrl = "/app/Coltreg/async_coltreg"
var requestData = {}
if ( argMap.evId ) requestData['evId'] = argMap.evId
//requestData['previousTerm'] = argMap.previousTerm
//requestData['nextTerm'] = argMap.nextTerm
loadDetailsRequest(requestUrl, requestData)
}


function loadDetailsRequest(requestUrl, requestData) {
var $activePage = $.mobile.activePage
var $regsesList = $activePage.find('ul#regses-list')
$.get(requestUrl, requestData, function(result){
    $.mobile.hidePageLoadingMsg()
    $regsesList.find('li#eid').remove()
    $regsesList.append(result)
    $regsesList.listview("refresh").trigger("updatelayout")
})    
}

erb页面：

<div data-role="content">
                             <ul data-role="listview" data-theme="c" id="regses-list">
                                 <li id="regses-selector" class="sessionNav">
                                     <div class="sn-btn">
                                         <ul>
                                             <li></li>
                                             <li class="centerLink">
                                                 <select name="coltsessions" id="coltsessions" data-shadow="false" data-corners="false" data-iconpos="none" data-inline="true" data-native-menu="false">
                                                     <%
                                                         ev = get_mnth_events
                                                             ev.each do |e|
                                                     %>
                                                                 <option value="<%= e['evntid'] %>">
                                                                     <%= e['evntname'] %>
                                                                 </option>
                                                     <%
                                                         end
                                                     %>
                                                 </select>
                                             </li>
                                             <li></li>
                                         </ul>
                                     </div>
                                 </li>

                             </ul>
                         </div><!-- /content -->
4

1 回答 1

0

这是 jQuery Mobile 行为。你可以在这个fiddle中看到它的作用。如果它在小提琴中显示为常规列表视图，请向下滑动“结果”框以使其更小并看到对话框出现。

<select data-native-menu="false">
  <option>text</option>    
  <option>text</option>
  <option>text</option>
</select>
于 2013-05-30T13:56:11.197 回答