如何在 jQuery 移动设备的子菜单中修复 header
How to fix header in submenu of jQuery mobile
我是 jQuery 的新手,无法解决以下问题:我有一个主菜单,单击主菜单会打开一个包含多个项目的子菜单。
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>
</head>
<div role="main" class="ui-content" style="background-color:#dae5f4;">
<div class="ui-field-contain">
<!-- ui-field-contain to wrap select elements -->
<label for="items" class="select">Sub-Header</label>
<select id="items" name="items" size="1" data-native-menu="false">
<option value="">Main-Header</option>
<option value=1>Item 1</option>
<option value=2>Item 2</option>
<option value=3>Item 3</option>
<option value=4>Item 4</option>
<option value=5>Item 5</option>
<option value=6>Item 6</option>
<option value=7>Item 7</option>
<option value=8>Item 8</option>
<option value=9>Item 9</option>
<option value=10>Item 10</option>
<option value=11>Item 11</option>
<option value=12>Item 12</option>
<option value=13>Item 13</option>
<option value=14>Item 14</option>
<option value=15>Item 15</option>
<option value=16>Item 16</option>
<option value=17>Item 17</option>
<option value=18>Item 18</option>
<option value=19>Item 19</option>
<option value=20>Item 20</option>
<option value=21>Item 21</option>
<option value=22>Item 22</option>
<option value=23>Item 23</option>
<option value=24>Item 24</option>
<option value=25>Item 25</option>
<option value=26>Item 26</option>
<option value=27>Item 27</option>
<option value=28>Item 28</option>
<option value=29>Item 29</option>
<option value=30>Item 30</option>
</select>
</div>
<!-- end of div class=ui-field-contain -->
</div>
<!-- end of div role main -->
现在,我想修复 Sub-Header,使其不再随所有项目一起滚动。不幸的是,data-position="fixed"
没有用。
您可以使用 CSS 来解决它。
如果你想限制弹出窗口的高度在打开时不滚动,你可以使用 60vh 的 max-height 或类似的并设置垂直滚动。
.ui-selectmenu.ui-dialog .ui-content {
max-height: 60vh;
overflow-y: scroll;
}
如果你想修复它,请添加 CSS:
#items-dialog {
position: fixed;
left: 0;
top: 0;
}
我是 jQuery 的新手,无法解决以下问题:我有一个主菜单,单击主菜单会打开一个包含多个项目的子菜单。
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> </script>
</head>
<div role="main" class="ui-content" style="background-color:#dae5f4;">
<div class="ui-field-contain">
<!-- ui-field-contain to wrap select elements -->
<label for="items" class="select">Sub-Header</label>
<select id="items" name="items" size="1" data-native-menu="false">
<option value="">Main-Header</option>
<option value=1>Item 1</option>
<option value=2>Item 2</option>
<option value=3>Item 3</option>
<option value=4>Item 4</option>
<option value=5>Item 5</option>
<option value=6>Item 6</option>
<option value=7>Item 7</option>
<option value=8>Item 8</option>
<option value=9>Item 9</option>
<option value=10>Item 10</option>
<option value=11>Item 11</option>
<option value=12>Item 12</option>
<option value=13>Item 13</option>
<option value=14>Item 14</option>
<option value=15>Item 15</option>
<option value=16>Item 16</option>
<option value=17>Item 17</option>
<option value=18>Item 18</option>
<option value=19>Item 19</option>
<option value=20>Item 20</option>
<option value=21>Item 21</option>
<option value=22>Item 22</option>
<option value=23>Item 23</option>
<option value=24>Item 24</option>
<option value=25>Item 25</option>
<option value=26>Item 26</option>
<option value=27>Item 27</option>
<option value=28>Item 28</option>
<option value=29>Item 29</option>
<option value=30>Item 30</option>
</select>
</div>
<!-- end of div class=ui-field-contain -->
</div>
<!-- end of div role main -->
现在,我想修复 Sub-Header,使其不再随所有项目一起滚动。不幸的是,data-position="fixed"
没有用。
您可以使用 CSS 来解决它。 如果你想限制弹出窗口的高度在打开时不滚动,你可以使用 60vh 的 max-height 或类似的并设置垂直滚动。
.ui-selectmenu.ui-dialog .ui-content {
max-height: 60vh;
overflow-y: scroll;
}
如果你想修复它,请添加 CSS:
#items-dialog {
position: fixed;
left: 0;
top: 0;
}