0

画像に示すコントロールを作成しています。タイトルバーと一連のコントロールが内部にあります。それを構築するための最良の方法は何でしょうか？これはHTML5Webページの一部です。

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

1つの方法は、キャンバスrectを使用してタイトルバーを描画し、その下にすべてのコントロールを配置することです。折りたたみはjavascriptで行うことができます。しかし、もっと良い方法があるはずです。

私が考えたもう1つの方法は、テーブルを作成し、最初の行をタイトルバーとして使用し、2番目の行にサブコントロールを追加することでした。正常に動作しているようですが、VS2012から、tr内にボタンをネストできないと言われ続けます。

4

2 に答える 2

0

この質問または同様のものは、ここのstackoverflowで尋ねられました...

情報と連絡先フォームを表示するためのモーダルまたはモードレスダイアログの代替手段は何ですか？

たぶん、その投稿の最後のスレッドはあなたにいくつかの例を与えることができますか？

外部の例への直接リンクは次のとおりです。

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

于 2013-03-09T06:28:42.110 に答える
0

わかりました申し訳ありませんが、最初の意味を誤解しました。

以下の 2 つのファイルをご覧ください。1 つは Web ページで、もう 1 つはユーザー コントロールです。ユーザー コントロール コードを 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 に移植/転置することはそれほど難しくありません。

于 2013-03-09T16:34:27.937 に答える