我是jQuery的新手,请原谅我,如果这是一个简单的问题。
我正在尝试从onClick事件创建一个对话框,其中包含:
1)下拉列表 2)文本区域(高度可能为300px) 3)是/否按钮
我已经到了可以显示带有是/否按钮的对话框的舞台,但是我很难包含下拉列表和textarea字段。
当前代码:
function placeOrder() {
if ($('#dialogDiv').length == 0) {
$('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');
dialogDiv.attr("Title", "Are you sure you want to place this order.");
dialogDiv.html("Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Yes",
class : 'Green',
click : function() {
// Some functionality.
}
},
{
text : "No",
class : 'Red',
click : function() {
// Some functionality.
}
} ]
});
}
如果有更好的方法来构建我的对话,我很高兴听到。
由于
- 更新--------------------
谢谢 - 这似乎有效,但仍有一些问题。
我在body标签之外创建了div元素,但是,当页面首次加载时,我可以看到页面底部的下拉列表和文本区域。一旦对话框出现,并且对话框中显示下拉和文本区域,它们会在单击否时从页面底部消失(正如我在页面加载时所预期的那样)。
我以为是因为我没有在页面加载时隐藏div,尝试使用:
$("#dialogDiv").hide();
虽然隐藏了PageLoad上的div,但当对话框出现时,下拉列表和文本区域仍然隐藏。
更新功能:
function placeOrder() {
if ($('#dialogDiv').length == 0) {
}
var dialogDiv = $('#dialogDiv');
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Yes",
class : 'Green',
click : function() {
// Some functionality.
}
},
{
text : "No",
class : 'Red',
click : function() {
// Some functionality.
}
} ]
});
更新了HTML:
</body>
<div id="dialogDiv" title="Are you sure you want to place this order.">
<p>Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.</p>
Reason<select for="postage">
<option value="">Please select...</option>
<option value="00111">Fedex - 001</option>
<option value="00112">UPS - 002</option>
</select>
<textarea id="details" name="details" class=" type="text" maxlength="760"></textarea>
</div>
答案 0 :(得分:4)
您的JavaScript dialog
电话很好。在HTML标记中,在body
标记之外,创建一个div
元素,用于包装对话框。现在,您已在HTML标记中定义了div
,您可以使用append,attr,html
调用删除JavaScript行。
</body>
<div id="dialogDiv" title="Are you sure you want to place this order">
<!-- Define your textarea and select here as you normally would -->
<textarea/>
<select/>
</div>
</html>
如果HTML位于body
标记之外,则div
将被隐藏,直到您的dialog
方法调用为止。您可以像对待JavaScript代码中的任何其他HTML元素一样对待textarea
和select
。
更新:
这是答案的JSFiddle:http://jsfiddle.net/zMs5n/
$("#dialogDiv").dialog({
autoOpen: false
});
// Open the dialog when the user clicks some button
$("#myButton").button().click(function() {
$("#dialogDiv").dialog("open");
});
基本上,您需要在页面加载后立即创建dialog()
。作为对话框初始化的一部分,JQuery UI不会在对话框外显示此div
。将autoOpen
属性设置为false将阻止对话框打开。此时,您可以调用对话框open
功能,随意打开对话框。
答案 1 :(得分:0)
你必须在dialogDiv div中编写select和textarea的html代码。