Gen*_* Bo 16 jquery jquery-ui-dialog
搜索关键字"简单的jquery对话框示例" - 包含所有答案,我没有在简洁的独立.html文档中看到任何简单而有意义的示例.即使下载了几本关于jQuery的完整书籍,我也没有看到任何这样的例子.
我找到的示例是用于显示警告消息"Hello World"的对话框..对于交互不是很有用.我认为现实世界的例子是捕获输入并将其发送回页面而不需要回发到服务器的东西.服务器帖子可以是后续步骤.
任何人都可以推荐这些代码参考吗？谢谢
编辑#3
我已经粘贴了一个解决方案,下面有一个新帖子.它是一个完全独立的文件,包含随时可用的文件.它对我有用.
编辑#2
我更新了head块以包含缺少的css.现在没有显示对话框内容,但仍然没有打开对话框..并且控制台中没有错误.
<style>
#dialog {
display:none;
}
</style>
编辑〜尝试#1
根据@ rob-schmuecker的回答,我尝试了下面的代码.我认为它适用于jsFiddle,但我的实现不起作用.在我的浏览器中,控制台不显示任何错误.但是我看到了两个问题:
知道这个代码有什么问题吗？..也许我的jquery包括电话？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
$('.myTarget').text($('.myInput').val());
$("#dialog").dialog('close');
});
</script>
<style>
#dialog {
display:none;
}
</style>
</head>
<body>
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
Rob*_*ker 10
好的,好的
演示:http://jsfiddle.net/robschmuecker/9z2ag/1/
HTML:
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
Dialog开始用CSS隐藏:
#dialog {
display:none;
}
然后我们做一些Javascript:
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
$('.myTarget').text($('.myInput').val());
$("#dialog").dialog('close');
});
我很欣赏大家的回答 - 我看到他们都在 JsFiddle 和 jqueryui.com 上在线工作。对于我所追求的目标，据我所知，这是我能够得到的最简洁的解决方案，使用所有远程包含并基于 java2s.com 上的解决方案：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script type="text/javascript">
$(function() {
// Allows user to click Enter key in text field and it will submit the dialog
$('#myDialog').keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
getResponse();
}
});
var cancel = function() {
$("#myDialog").dialog("close");
}
var getResponse = function() {
var answer;
/*// for radio-button selection
$("input").each(function(){
(this.checked == true) ? answer = $(this).val() : null;
});
*/
answer = $("#first_name").val();
// This adds it dynamically
// $("<p>").text(answer).insertAfter($("#poll"));
$("#result").text(answer);
$("#myDialog").dialog("close");
}
var dialogOpts = {
modal : true,
closeOnEscape : true,
buttons : {
"Done" : getResponse,
"Cancel" : cancel
},
autoOpen : false
};
$("#myDialog").dialog(dialogOpts);
$("#poll").click(function() {
$("#myDialog").dialog("open");
});
});
</script>
</head>
<body>
<button id="poll">Poll</button>
<div id="myDialog" class="flora" title="This is the title">
<p>Question?</p>
<label for="yes">Yes!</label><input type="radio" id="yes" value="yes25" name="question"><br>
<label for="no">No!</label><input type="radio" id="no" value="no" name="question">
<br/>
First Name: <input type="text" id="first_name" />
</div>
<div style='color: green;' id='result'>
</div>
</body>
</html>
| 归档时间： |
|
| 查看次数： |
42049 次 |
| 最近记录： |