文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery移动滚动视图中的复选框

问jQuery移动滚动视图中的复选框
EN

Stack Overflow用户

提问于 2017-10-09 19:51:16

回答 1查看 123关注 0票数 0

为什么jQuery手机弹出对话框中滚动窗口隐藏部分的复选框不起作用，只是跳到顶部？

    <div data-role="popup" id="chkSelector" data-overlay-theme="a"  
        data-theme="a" data-dismissible="true">

        <div style="width:500px; height:300px; overflow-y:auto;">
            <label for="checkbox-1">021669835973</label> 
            <input name="checkbox-1" id="checkbox-1" type="checkbox">
            <label for="checkbox-2">021669835976</label> 
            <input name="checkbox-2" id="checkbox-2" type="checkbox">
            <label for="checkbox-3">021669835983</label> 
            <input name="checkbox-3" id="checkbox-3" type="checkbox">
            <label for="checkbox-4">021669836973</label> 
            <input name="checkbox-4" id="checkbox-4" type="checkbox">
            <label for="checkbox-5">021669837973</label> 
            <input name="checkbox-5" id="checkbox-5" type="checkbox">
            <label for="checkbox-6">021669855973</label> 
            <input name="checkbox-6" id="checkbox-6" type="checkbox">
            <label for="checkbox-7">021669935973</label> 
            <input name="checkbox-7" id="checkbox-7" type="checkbox">
            <label for="checkbox-8">021669835973</label> 
            <input name="checkbox-8" id="checkbox-8" type="checkbox">
            <label for="checkbox-9">021669835976</label> 
            <input name="checkbox-9" id="checkbox-9" type="checkbox">
            <label for="checkbox-10">021669835983</label> 
            <input name="checkbox-10" id="checkbox-10" type="checkbox">
            <label for="checkbox-11">021669836973</label> 
            <input name="checkbox-11" id="checkbox-11" type="checkbox">
            <label for="checkbox-12">021669837973</label> 
            <input name="checkbox-12" id="checkbox-12" type="checkbox">
            <label for="checkbox-13">021669855973</label> 
            <input name="checkbox-13" id="checkbox-13" type="checkbox">
            <label for="checkbox-14">021669935973</label> 
            <input name="checkbox-14" id="checkbox-14" type="checkbox">                         
        </div> 

    </div>

只能选择窗口高度以下未被截断的顶部。当下面的列表滚动到视图中并被选中时，列表只是滚动到顶部，而不是选择它。

checkbox

jquery-mobile

scroll

jquery-mobile-dialog

回答 1

Stack Overflow用户

发布于 2017-10-11 15:31:55

如果你问的是原因，我相信简单的Popups并不是为了大量的交互内容而设计和深入测试的，而只是为了小提示或小导航菜单。如果你需要向用户展示大量的交互式内容，我认为带有Dialog选项的页面是更好的选择。这只是我的两个观点。

如果你想要一个变通的方法，这里就是。只需初始化External Popup并使用它即可。

$(document).ready(function() {
   $("#chkSelector").enhanceWithin().popup();
});

.ui-popup .ui-checkbox {
  margin-right: 0.5em !important;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="menu">
      <div data-role="header" data-position="fixed">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <a href="#chkSelector" class="ui-btn" data-rel="popup">Open Popup</a>
      </div>
    </div>
    
    <div data-role="popup" id="chkSelector" data-overlay-theme="a" data-theme="a" class="ui-content" data-dismissible="true">
        <div style="width:500px; height:300px; overflow-y:auto;">
            <label for="checkbox-1">021669835973</label> 
            <input name="checkbox-1" id="checkbox-1" type="checkbox">
            <label for="checkbox-2">021669835976</label> 
            <input name="checkbox-2" id="checkbox-2" type="checkbox">
            <label for="checkbox-3">021669835983</label> 
            <input name="checkbox-3" id="checkbox-3" type="checkbox">
            <label for="checkbox-4">021669836973</label> 
            <input name="checkbox-4" id="checkbox-4" type="checkbox">
            <label for="checkbox-5">021669837973</label> 
            <input name="checkbox-5" id="checkbox-5" type="checkbox">
            <label for="checkbox-6">021669855973</label> 
            <input name="checkbox-6" id="checkbox-6" type="checkbox">
            <label for="checkbox-7">021669935973</label> 
            <input name="checkbox-7" id="checkbox-7" type="checkbox">
            <label for="checkbox-8">021669835973</label> 
            <input name="checkbox-8" id="checkbox-8" type="checkbox">
            <label for="checkbox-9">021669835976</label> 
            <input name="checkbox-9" id="checkbox-9" type="checkbox">
            <label for="checkbox-10">021669835983</label> 
            <input name="checkbox-10" id="checkbox-10" type="checkbox">
            <label for="checkbox-11">021669836973</label> 
            <input name="checkbox-11" id="checkbox-11" type="checkbox">
            <label for="checkbox-12">021669837973</label> 
            <input name="checkbox-12" id="checkbox-12" type="checkbox">
            <label for="checkbox-13">021669855973</label> 
            <input name="checkbox-13" id="checkbox-13" type="checkbox">
            <label for="checkbox-14">021669935973</label> 
            <input name="checkbox-14" id="checkbox-14" type="checkbox">                         
        </div> 
    </div>
    
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46645804

复制

相似问题

问jQuery移动滚动视图中的复选框
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery移动滚动视图中的复选框EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery移动滚动视图中的复选框
EN