0

faceboxモーダル内のコンテンツを条件付きで設定する必要があるフォームに取り組んでいます。以下のサンプル コードを作成しました。各リンクをクリックすると、facebox モーダル (開かれる) を開く必要があります。このモーダルでは、テキストボックスがあります。テキストボックスに、モーダルを開いたアンカーのテキストに等しい値が自動的に入力されるようにします。つまり、最初のハイパーリンクをクリックすると、テキストボックスに「Field1」が入力され、2番目にクリックすると、テキストボックスに「Field2」値が入力されます。サンプルコードは次のとおりです。 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="HtmlForm" runat="server">

    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $('a[rel*=facebox]').facebox();
        });
    </script>
</body>
</html>

私が今行っている 1 つのアプローチは、偽のアンカーを作成し、そのクリック イベントをトリガーしてモーダルを開くことです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <link href="http://defunkt.github.com/facebox/facebox.css" media="screen" rel="stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://defunkt.github.com/facebox/facebox.js"></script>
</head>
<body>
    <form id="aspnetForm" runat="server">
    <a id="afake" href="#info" style="display:none;"></a>
    <a href="#info" rel="facebox">Field1</a> <br />
    <a href="#info" rel="facebox">Field2</a> <br />

    <div id="info" style="display: none;">
        <p>
           Field: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </p>
        <p>
            <asp:Button ID="Button1" runat="server" Text="Edit"  />
        </p>
    </div>
    </form>
    <script type="text/javascript">
        $(function () {

            $('a[rel*=facebox]').click(function () {
                $('#afake').facebox().trigger('click');
                var instance = $(this);
                $('#<%= TextBox1.ClientID %>').val(instance.html());
            });

        });
    </script>
</body>
</html>

私よりも堅牢なソリューションを探しています。

4

1 に答える 1

3

私は ASP.NET に詳しくないので、以下で参照する ID '#TextBox1' が適切かどうかを知ることができませんが、これは少なくとも始めるのに役立つはずです。アンカータグがクリックされたときに、入力要素の値をアンカータグに含まれるテキストに設定するだけです。

<script type="text/javascript">
    jQuery(function($) {
        $('a[rel*=facebox]').facebox().click(function(event) {
            $('#TextBox1').val($(this).text());
        });
    });
</script>
于 2010-06-29T22:33:50.993 に答える