【问题标题】：How to build a window like control on HTML5 webpage?如何在 HTML5 网页上构建类似控件的窗口？
【发布时间】：2013-03-09 06:21:02
【问题描述】：

我正在制作图像中显示的控件。它有一个标题栏和里面的一组控件。建造它的最佳方法是什么？它是 HTML5 网页的一部分。

http://tinypic.com/r/25rpk4o/6

一种方法是用画布矩形绘制标题栏，然后将所有控件放在它下面。折叠可以用javascript来完成。但一定有更好的办法。

我想到的另一种方法是制作一个表格并将第一行作为标题栏，并在第二行添加子控件。它似乎工作正常，但 VS2012 一直告诉我我不能在 tr 内嵌套按钮。

【问题讨论】：

标签： html window controls

【解决方案1】：

这里的 stackoverflow 上提出了这个问题或类似问题...

What are my alternatives to modal or modeless dialogs to display information and contact forms?

也许那个帖子的最后一个帖子可以给你一些例子？？

外部示例的直接链接是

http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/

【讨论】：

嗨，Zaf，我真的不想要弹出窗口。我希望它成为我父页面本身的一部分。

【解决方案2】：

好的，对不起，我误解了你最初的意思。

那么你可以看看下面两个文件，一个是网页，另一个是用户控件，用户控件将代码复制粘贴到两个新文件中，看看你的想法？

我尝试从您上传的原始图片重新创建控件并使用了 TABLE 标记，尽管您可以改用 DIVS 来减少 html 代码。

文件 1

<%@ Page Language="VB" %>
<%@ Register src="MyInlineWindow.ascx" tagname="MyInlineWindow" tagprefix="uc1" %>
<!-- HTML5 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <script type="text/vbscript">
    Sub ShowInlineWindow()
    dim el
      set el = window.document.getElementById("MyInlineWindowCtrl")
      window.document.getElementById("Result").innerhtml = "Nothing"
      el.style.display = "block"
    End Sub

    Sub HideInlineWindow(YesNo)
    dim el
      set el = window.document.getElementById("MyInlineWindowCtrl")
      window.document.getElementById("Result").innerhtml = YesNo
      el.style.display = "none"
    End Sub
  </script>
</head>
<body>
<form id="form1" runat="server">
  <div>
    <input id="Button1" type="button" value="Interact" onclick="ShowInlineWindow()" /><br />[<label id="Result">Nothing</label>]
    <br /><br /><br /><br />
    <uc1:MyInlineWindow ID="MyInlineWindow1" runat="server" />
  </div>
</form>
</body>
</html>

文件 2

<%@ Control Language="VB" ClassName="MyInlineWindow" %>
<table id="MyInlineWindowCtrl" style="display: none; border: 1px solid #333333; width: 640px;">
<tr>
    <td colspan="4" style="border-bottom-style: solid; border-bottom-width: 1px; background-color: #808080; color: #FFFFFF;">Window Title</td>
</tr><tr>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>Label</td>
            </tr><tr>
                <td>
                    <select id="Select1" name="D1">
                        <option>Some drop down</option>
                    </select>
                </td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>Label</td>
            </tr><tr>
                <td>
                    <select id="Select2" name="D2">
                        <option>Some drop down</option>
                    </select>
                </td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>Label</td>
            </tr><tr>
                <td><input id="Radio1" checked="true" name="R1" type="radio" value="V1" /> Label</td>
            </tr><tr>
                <td><input id="Radio2" checked="true" name="R2" type="radio" value="V1" /> Label</td>
            </tr><tr>
                <td><input id="Radio3" checked="true" name="R3" type="radio" value="V1" /> Label</td>
            </tr><tr>
            <td><input id="Radio4" checked="true" name="R4" type="radio" value="V1" /> Label</td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td colspan="2">Label</td>
            </tr><tr>
                <td>From</td>
                <td>To</td>
            </tr><tr>
                <td>
                    <select id="Select3" name="D3">
                        <option>Date Picker</option>
                    </select>
                </td>
                <td>
                    <select id="Select4" name="D4">
                        <option>Date Picker</option>
                    </select>
                </td>
            </tr><tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr><tr>
                <td><input id="Radio5" checked="true" name="R5" type="radio" value="V1" /> Label</td>
                <td><input id="Radio6" checked="true" name="R6" type="radio" value="V1" /> Label</td>
            </tr>
        </table>
    </td>
    <td style="width: 25%;">
        <table style="margin 8px: width: 100%;">
            <tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td>&nbsp;</td>
            </tr><tr>
                <td style="text-align: center">
                    <input id="Button1" type="button" value="Cancel" onclick="HideInlineWindow('Cancel')" />
                    <input id="Button2" type="button" value="Okay" onclick="HideInlineWindow('Okay')" />
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>

也许它更接近你想要的。我也使用过我最了解的 VB 脚本，但将其移植/转置为 Javascript 应该不会太难。

【讨论】：