Question

这里我有一个问题如果我想在那里点击按钮（#NewWidget）那里我需要一个弹出窗体在屏幕上取高度＆amp;宽度作为输入＆amp;然后将它传递给函数makeNewButton＆amp;然后相应地设置该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>

Answer 1

我不完全确定你的问题是什么，因为你基本上已经准确地描述了你应该自己做些什么。

添加带有宽度和高度输入字段的隐藏表单
更改#NewWidget的点击事件，以便显示隐藏的表单
创建一个由表单的提交按钮触发的函数+获取输入字段的值并将它们传递给makeNewButton函数
修改makeNewButton函数，使其接受width和height参数+将宽度和高度应用于此函数内的新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>

单击按钮上的弹出窗体＆amp;将其值传递给函数

1 个答案: