0

我正在开发一个表单，我需要有条件地设置 facebox 模式内的内容。我在下面创建了一个示例代码，单击每个链接我需要打开一个facebox modal（正在打开）。现在在这个模式中，我有一个文本框。我希望文本框自动填充等于打开模式的锚文本的值，即单击第一个超链接时，文本框应填充“Field1”，单击第二个超链接时，文本框应具有“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>

我现在要使用的一种方法是创建一个假锚点，然后触发其点击事件以打开模式

<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 回答