1

次の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 メソッドがわかりません。

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()); });
4

1 に答える 1

2

最も簡単なインラインの方法は、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 ...
于 2013-11-13T10:23:32.180 に答える