在JQuery Mobile中，在同一行设置标签格式和切换开关

Format label and toggle switch on same line in JQuery Mobile

本文关键字：标签 设置 格式 开关 一行 Mobile JQuery      更新时间：2023-09-26

我正试图找到与创建以下html元素等效的Javascript：

<div data-role="fieldcontain">
<label for="slider">Select slider:</label>
<select name="slider" id="slider" data-role="slider">
    <option value="off">Off</option>
    <option value="on">On</option>
</select>

这会将标签放在同一行上。

这是我的尝试，但标签位于拨动开关下面。我不知道格式化数据role="fieldcontain"div的JQuery方法。

http://jsfiddle.net/2ckHr/13/

HTML

<div data-role="content" id="content">
</div>

JS-

$('<div data-role="fieldcontain"><label>Label</label><select class="flip" name="flip-1" id="flip-1" data-role="slider"><option value="off">Off</option><option value="on">On</option></select></div>').appendTo($("#content"));
$(".flip").slider();
$('<button id="submit">Submit</button>').appendTo($("#content")).button();
$(document).delegate("#submit", "vclick", function() { alert($("#flip-1").val()); });

最简单的内联方式是在标签中添加一些CSS：

<label for="slider" style="display: inline; vertical-align: 1.2em;">Select slider:</label>

这可以在CSS类中考虑，注意显示覆盖：

 .switchlabel { display: inline !important; vertical-align: 0.8em; }

如果计算vertical-align值不可行，则必须在创建控件后更改样式。您必须将vertical-align: middle;添加到此元素（由jQuery Mobile创建）：

<div role="application" class="ui-slider ui-slider-switch ...
相关文章：