这里我有一个问题如果我想要当按钮(#NewWidget)被点击时我需要在屏幕上弹出一个表单，它将高度和宽度作为输入然后将它传递给函数 makeNewButton 然后那个 div 的大小是相应地设置。 我的代码是:
<html>
<head>
<link rel="stylesheet" href="test.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function () {
var counter = 0;
$("#box").resizable({
alsoResize: "#main",
alsoResize: "#title_bar",
alsoResize: "#container"
});
$('#main').draggable();
$("#main").find('.button').on('click',makeButtonWork);
$("#NewWidget").click(makeNewButton);
function makeNewButton() {
$("#container").append('<div class="main" id="main-' + counter + '"><div class="title_bar" id="title_bar-' + counter + '"><div class="button">-</div></div><div class="box" id="box-' + counter + '"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
$('#box-' + counter).resizable({
alsoResize: "#main-"+counter,
alsoResize: "#title_bar-"+counter,
});
$(id='#main-' + counter ).draggable();
$('#main-'+counter).find('.button').on('click',makeButtonWork);
counter += 1;
}
function makeButtonWork() {
if ($(this).html() == "-") {
$(this).html("+");
}
else{
$(this).html("-");
}
$(this).parent().parent().find(".box").slideToggle();
}
});
</script>
</head>
<body>
<input type="button" id="NewWidget" value="Add New Widget"/>
<div class="container" id="container">
</div></body>
</html>
最佳答案
我不完全确定你的问题是什么，因为你基本上准确地描述了你应该自己做什么。
- 添加一个带有宽度和高度输入字段的隐藏表单
- 更改#NewWidget 的点击事件，使其显示隐藏的表单
- 创建一个由表单提交按钮触发的函数 + 获取输入字段的值并将它们传递给 makeNewButton 函数
- 修改 makeNewButton 函数，使其接受宽度和高度参数 + 将宽度和高度应用于此函数内的新 div
我在下面拼凑了一个简单的示例。
var counter = 0;
$(function() {
$("#box").resizable({
alsoResize: "#main",
alsoResize: "#title_bar",
alsoResize: "#container"
});
$('#main').draggable().find('.button').on('click',makeButtonWork);
$("#NewWidget").on('click',showNewWidgetForm);
$('#new-widget-form-submit').on('click',function(e) { submitNewWidgetForm(e); });
$('#new-widget-form-cancel').on('click',cancelNewWidgetForm);
});
function showNewWidgetForm() {
$('#new-widget-form').stop(true,true).fadeIn(300);
}
function submitNewWidgetForm(e) {
e.preventDefault();
var $inputHeight = $('#new-widget-form-height');
var $inputWidth = $('#new-widget-form-width');
var height = $inputHeight.val();
var width = $inputWidth.val();
if (height && width) makeNewButton(height, width);
$inputHeight.val('');
$inputWidth.val('');
$('#new-widget-form').hide();
}
function cancelNewWidgetForm() {
$('#new-widget-form-height').val('');
$('#new-widget-form-width').val('');
$('#new-widget-form').hide();
}
function makeNewButton(height, width) {
$("#container").append('<div class="main" id="main-' + counter + '"><div class="title_bar" id="title_bar-' + counter + '"><div class="button">-</div></div><div class="box" id="box-' + counter + '"><div><h4>Hi user</h4><p>Hello Users. How are YOU?</p> </div></div>');
$('#box-' + counter).resizable({
alsoResize: "#main-"+counter,
alsoResize: "#title_bar-"+counter,
});
$('#main-' + counter).height(height).width(width).draggable().find('.button').on('click',makeButtonWork);
counter++;
}
function makeButtonWork() {
if ($(this).html() == "-") {
$(this).html("+");
}
else {
$(this).html("-");
}
$(this).parent().parent().find(".box").slideToggle();
}.main {
background: #ccc;
margin: 4px;
}
#new-widget-form {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
padding: 20px;
margin-top: -50px;
margin-left: -100px;
border: 1px solid #777;
border-radius: 10px;
background: #fff;
box-shadow: 0 2px 26px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
display: none;
}
#new-widget-form .row {
width: 100%;
margin-bottom: 4px;
font: normal 14px/18px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
#new-widget-form label {
width: 80px;
display: inline-block;
font: normal 14px/18px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
#new-widget-form input[type=text] {
width: 60px;
padding: 2px 4px;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
font: normal 14px/18px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
#new-widget-form-submit, #new-widget-form-cancel {
margin-top: 10px;
font: normal 14px/18px Arial, 'Helvetica Neue', Helvetica, sans-serif;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="button" id="NewWidget" value="Add New Widget">
<div class="container" id="container"></div>
<form id="new-widget-form">
<div class="row">
<label>Height:</label> <input id="new-widget-form-height" type="text" name="height"> pixels
</div>
<div class="row">
<label>Width:</label> <input id="new-widget-form-width" type="text" name="width"> pixels
</div>
<input id="new-widget-form-submit" type="submit" value="Submit"> <input id="new-widget-form-cancel" type="button" value="Cancel">
</form>关于javascript - 单击按钮上的弹出表单并将其值传递给函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44823684/