Question

我进行了详尽的搜索，但无法找到答案。

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

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

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

有人可以就如何继续提供建议吗？谢谢。

Answer 1

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

<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不需要像jQuery文档那样进入head标记。

编辑：

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

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

在javascript中，make an AJAX call到该路线并且您只获得HTML sans 布局，然后将其用于fill the box：

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

并在您的视图中描述div：

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

类似的东西。

Sinatra / Padrino偏模与模态窗口

1 个答案: