我使用jQuery mobile 1.4.5和jQuery 1.8.3以及jQuery-ui- 1.9.2
我在这里动态创建了Dropbox:
function setLayerPropertyControls() {
var content = '<fieldset style="border: solid 1px #6b6b6b;">';
content += '<label for="select-native-1">Basic:</label>' +
'<select name="select-native-1" id="select-native-1">' +
'<option value="1">The 1st Option</option>' +
'<option value="2">The 2nd Option</option>' +
'<option value="3">The 3rd Option</option>' +
'<option value="4">The 4th Option</option>' +
'</select>';
content += '</fieldset>';
layerProp.append(content);
}
这是html标记:
<div data-role="page" id="layerProperty">
<div data-role="header" data-position="fixed" data-theme="b">
<h1 id="layers property"></h1>
<a href="#mapPage" data-mini="true" data-icon="arrow-l">חזור</a>
</div>
<div data-role="content">
<div id="vectorLayerProperties">
</div>
<div id="vectorLayerslist"></div>
</div>
</div>
这里是视图中的结果:
如果我拿这个代码:
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
将其粘贴到HTML中:
<div data-role="page" id="layerProperty">
<div data-role="header" data-position="fixed" data-theme="b">
<h1 id="layers property"></h1>
<a href="#mapPage" data-mini="true" data-icon="arrow-l">חזור</a>
</div>
<div data-role="content">
<div id="vectorLayerProperties">
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
</div>
<div id="vectorLayerslist"></div>
</div>
</div>
看起来像这样:
当我尝试在代码中动态创建它时,为什么我会得到下拉框的不良风格呢?
答案 0 :(得分:-2)
你的动态代码有这个
<fieldset style="border: solid 1px #6b6b6b;"> </fieldset>;
但纯粹的HTML没有。
所以我想也许是css层问题?