[英]Format label and toggle switch on same line in JQuery Mobile
我試圖找到與創建以下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>
這會將標簽放在同一行上。
這是我的嘗試,但標簽位於切換開關下方。 我不知道用於格式化data-role =“ fieldcontain” div的JQuery方法。
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 ...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.