Question

嗯，问题似乎有点令人困惑。

一方面我有Update Panel。在Update Panel内，我有一个Modal Popup Extender，此弹出窗口的内容为Web User Control。

在我的User Control中，我试图包含一个只需使用JavaScript行初始化的图库滑块（http://bxslider.com/）：

$(document).ready(function() {
  $('.bxslider').bxSlider();
}

，其中.bxslider是定义图库幻灯片的容器的类。

浏览网页时，当我点击启动弹出窗口的控件时，它会显示图库控件（上一页，下一页，页脚栏中有多个圆圈代表图库的每个幻灯片），但我我无法看到画廊本身的内容。

现在，如果我访问Chrome控制台，则会神奇地呈现图库。

我试图将初始化放在几个地方：

在Web User Control标记文件的开头。
在Web User Control标记文件的最后。

在Web User Control Load事件中：

protected void Page_Load(object sender, EventArgs e) {
  String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
  ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
}

在Web User Control LoadComplete事件中（通过Init事件绑定）：

protected void Page_Init(object sender, EventArgs e) {
  this.Page.LoadComplete += new EventHandler(Page_LoadComplete);
}

protected void Page_LoadComplete(object sender, EventArgs e) {
   String script = "$(document).ready(function() { $('.bxslider').bxSlider(); }";
   ScriptManager.RegisterStartupScript((Control)this.Page, this.Page.GetType(), new Guid().ToString(), script, true);
}

在Modal Popup Extender OnLoad事件中。

我完全迷失了。有什么想法吗？

编辑：我认为这里的正确问题是：有没有办法建立一种仅在显示Modal Popup Extender而不是在加载时才会引发的方法？

Answer 1

好吧，终于解决了。

解决方案是将modalpopup的TargetControlID分配给一个虚拟按钮，然后声明控件我真的想打开弹出窗口：

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); setTimeout(function () { $('.bxslider').bxSlider(); }, 100); return false;" Text="Show me!" />

以“肮脏”的方式解决问题所以，如果有人有其他建议将非常受欢迎。

Answer 2

新方法！

相反前一个，每次打开弹出窗口时重新定义滑块（导致其他问题），我已直接在User Web Control中初始化滑块：

<script type="text/javascript">
  var slider;
  $(document).ready(function () {
    slider = $('.bxslider').bxSlider();
</script>

然后启动弹出窗口的控件为：

<asp:Button id="Button1" runat="server" OnClientClick="$find('PopupBehaivourID').show(); slider.reloadSlider(); return false;" Text="Show me!" />

即，我现在正在使用每次重新加载图库的方法。

更新面板中的模态弹出扩展器中的Web用户控件中的jQuery问题

2 个答案: