0

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

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

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

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

4

2 回答 2

0

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

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

我尝试从您上传的原始图片重新创建控件并使用了 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 应该不会太难。

于 2013-03-09T16:34:27.937 回答
0

这个问题或类似的问题是在stackoverflow上问的......

我有哪些替代模式或非模式对话框来显示信息和联系表格的方法？

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

外部示例的直接链接是

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

于 2013-03-09T06:28:42.110 回答