1

我已经详尽搜索，但找不到答案。

我正在使用 padrino 编写一个小应用程序，我有 2 个视图，人物和事件。我有这些视图和控制器，它们工作正常。

我的问题是，从“事件”视图中，我想打开一个模式窗口来添加一个新人。

模态窗口将加载“人”的相关字段。填写完字段并单击按钮后，模式窗口将消失，新的“人员”将被保存，用户将返回事件页面。

谁能给我建议如何进行？谢谢你。

4

1 回答 1

2

模态窗口通常使用 javascript 完成。例如，使用jQuery UI（来自文档）

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>


</body>
</html>

Sinatra/Padrino 将负责布局和视图，您只需添加脚本部分。假设您正在使用Haml，您的视图将如下所示：

#dialog{title: "Basic dialog"}
  %p
    This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

:javascript
  $(function() {
    $( "#dialog" ).dialog();
  });

javascript 不需要head像 jQuery 文档建议的那样进入标签内部。

编辑：

将部分加载到窗口中有几种选择。一种是使用像Handlebars这样的 javascript 库，但我更喜欢让 javascript 从路由中加载它，这样所有视图代码都保持在一起，例如

get "/templates/modal1/?" do
  haml :modal1, :layout => !xhr?
end

在 javascript 中，对该路由进行 AJAX 调用，您将只获得没有布局的 HTML ，然后使用它来填充框：

$.get('ajax/test.html', function(data) {
  $('#dialog').html(data);
}

在您看来，只需描述 div：

#dialog1
  -# The HTML from the view will be put here by the jQuery code.

类似的东西。

于 2013-02-25T08:44:01.783 回答