Javascript jQuery移动水平选择框
我一直在努力让它正常工作。我正在尝试使水平分组的select输入在我的移动站点上从此页面开始工作: 现在,我的选择框如下所示:Javascript jQuery移动水平选择框,javascript,jquery,html,css,jquery-mobile,Javascript,Jquery,Html,Css,Jquery Mobile,我一直在努力让它正常工作。我正在尝试使水平分组的select输入在我的移动站点上从此页面开始工作: 现在,我的选择框如下所示: <fieldset data-role="controlgroup" data-type="horizontal"> <select name="select-choice-month" id="select-choice-month"> <option>M</option>
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
但当我查看示例时,它看起来是这样的:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
我的HTML如下所示:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
M
一月
二月
前进
四月
也许
六月
七月
八月
九月
十月
十一月
十二月
D
Y
2012
2013
2014
我的include脚本如下所示:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
我已经试着准确地复制和粘贴示例,但仍然得到垂直方向,而不是水平方向,我在这里做错了什么?好的。所以,再多玩几次,我就得到了你想要的选择选项。这些就是我所做的改变:
<meta name="viewport" content="width=device-width, initial-scale=0.9">
出于某种奇怪的原因,在controlgroup
包装中添加legend
标记会破坏设计。不知道这是不是一个bug。如果需要下拉列表的标题,可以执行以下操作:
<div data-role="controlgroup" data-type="horizontal">
<div style="font-weight: bold;">Date of Birth</div>
出生日期
这些变化在我的iPhone4、HTC One和iPad上都起到了作用(iPad上有更多的不动产,所以它一直都能工作。但不管怎样,还是在那里进行了测试)。看起来没有足够的空间将它们水平对齐。在他们的页面中:“请注意,触发选择的按钮将根据当前所选选项的值调整大小。请注意,不支持显示:inline block;的浏览器将垂直分组选择,如上所述。”如果将设备倾斜到一侧会发生什么情况?很好,我希望情况会是这样。我把它倾斜到一边,我也试着让所有的选择都变小(也许选择框的宽度和最长的值一样大),但是我遇到了同样的问题。jQuery移动站点上的示例是正确的,但我的站点上的相同代码不起作用。不过建议不错。试着玩一下
初始音阶
。您可以在此处阅读有关视口参考的更多信息:。您也可以尝试此处提到的内容:。没问题。我在玩的时候学到了很多。