文件1

Question

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

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

一种方法是使用canvas rect绘制标题栏，然后将所有控件放在其下。可以使用javascript完成折叠。但必须有更好的方法。

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

Answer 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/

Answer 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应该不会太难。

如何在HTML5网页上构建一个类似控件的窗口？

2 个答案:

文件1

文件2