有没有办法将 Thickbox 与动态内容一起使用？

Question

场景如下：

我的网页上有一个文本框和一个按钮。 单击该按钮时，我希望打开一个弹出窗口（使用 Thickbox），该窗口将显示与文本框中输入的值匹配的所有项目。 我目前正在使用 Thickbox 的 IFrame 实现。 问题是要显示的 URL 被硬编码到按钮的“alt”属性中。我真正需要的是“alt”属性将文本框中的值传递到弹出窗口。

这是到目前为止的代码：

<input type="textbox" id="tb" />
<input alt="Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700" class="thickbox" title="Search" type="button" value="Search" />

理想情况下，我想将文本框值放入 Search.aspx url，但我似乎不知道如何做到这一点，我当前的替代方案是使用 jQuery 设置“搜索”按钮的单击功能来调用 Web。然后，Search.aspx 页面将使用会话变量来执行搜索，这有点不稳定，因为搜索似乎总是有可能执行。在设置会话变量之前。

Answer 1

只需处理按钮的 onclick 即可运行调用 tb_show() 的函数，并传递文本框的值。 就像是

... onclick = "doSearch()" ...

function doSearch()
{
    tb_show(caption, 'Search.aspx?KeepThis=true&q=\"' +
            $('input#tb').val() +
            '\"&TB_iframe=true&height=500&width=700');
}

Answer 2

如果您阅读手册，在 iframe 内容部分下，它会告诉您参数需要位于 TB_iframe 参数之前。 此后的一切都被剥夺了。

Answer 3

这是一个想法。 我认为它不是很漂亮，但应该可以工作：

$('input#tb').blur(function(){ 
  var url = $('input.thickbox').attr('alt');
  var tbVal = $(this).val();

  // add the textbox value into the query string here
  // url = ..

  $('input.thickbox').attr('alt', url);

});

基本上，每次文本框失去焦点时都会更新按钮 alt 标签。 相反，您还可以聆听击键并在每次击键后进行更新。

至于更新查询字符串，我会让您找出最好的方法。 我可以看到在那里放置了一个占位符，例如：&TB=TB_PLACEHOLDER。 然后你就可以进行字符串替换。

Answer 4

在 代码隐藏 中，您也可以以编程方式添加 alt 标签，

button1.Attributes.Add("alt", "Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700");