Question

在网上搜索java脚本弹出消息并显示我发现jQuery and a the colorbox pluggin一个很棒的工具集。也是几个月前的另一个我找到了关于Ajax技术的讨论，以动态地重写所显示网页的部分内容。我想把两者结合起来。我试图用一次点击调出一个colorbox弹出窗口，同时重新编写底层页面这是两个java脚本函数...

<link rel="stylesheet" href="../stylesheets/colorbox(1).css" />         
<script src="../js/jquery-1.8.0.min.js"></script>
<script src="../js/jquery.colorbox.js"></script>
<script>
        $(document).ready(function(){
            $(".small").colorbox({inline:true, width:"45%", opacity:0.4});
            $(".medium").colorbox({inline:true, width:"53%", opacity:0.4});
            $(".large").colorbox({inline:true, width:"65%", opacity:0.4});
            });

</script>
<script type="text/javascript">
function cmpltadd(tab)
{
  if (tab=="")
  {
      document.getElementById("repostarea").innerHTML="";
      return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
       document.getElementById("repostarea").innerHTML=xmlhttp.responseText;
      }
   }
   xmlhttp.open("POST","../includes/cmpltadd.php?q="+tab,true);
   xmlhttp.send();
  }
</script>

然后在正文中我有一个带有colorbox'class'链接的映射图像，以生成内联html的弹出窗口

<div id="repostarea">
 <img src="../images/ansitabwnwsi.jpg"  Title="Add New Form Security Image tab with new image"  usemap="#sitabwimg" /><br>
            <map name="sitabwimg" id="sitabwimg"> 
          <area shape="rect" coords="177,59,282,164" class="medium" href="#repimg" title="Replace Image" />
          <area shape="rect" coords="26,106,159,130" class="medium" href="#imgnam" title="edit image name" />
          <area shape="rect" coords="108,141,129,162" class="medium" href="#dltbut" title="Delete current Image entry" />
          <area shape="rect" coords="135,141,158,162" class=large" href="#sitab1si" title="Add image" />
          <area shape="rect" coords="22,189,168,212" class="medium" href="#sidat" title="Creation date" />
          <area shape="default"  nohreh="nohref" Title="Browse for the security image" /> </map> <br>
</div>

这是内联弹出窗口之一....请注意，上面的href之一和下面的div id匹配

<div style='display:none'>
<div id='sitab1si' style='padding:10px; background:#6C848B;'>
<p><strong> <h3>Security image tab with new image</h3>
   Now that the image is selected the dates are filled-in automatically and you are asked to provide an image name.  Just     like with 
            the entry name this is important and if not entered immediately may be requested several times. 
            <img src="../images/ansitabwnwsi.jpg"  Title="Add New Form Security Image tab with new image"  usemap="#sitabwimg" /><br>
            <map name="sitabwimg" id="sitabwimg"> 
          <area shape="rect" coords="177,59,282,164" class="medium" href="#repimg" title="Replace Image" />
          <area shape="rect" coords="26,106,159,130" class="medium" href="#imgnam" title="edit image name" />
          <area shape="rect" coords="108,141,129,162" class="medium" href="#dltbut" title="Delete current Image entry" />
          <area shape="rect" coords="135,141,158,162" class="medium" href="#addbut" title="Add image" />
          <area shape="rect" coords="22,189,168,212" class="medium" href="#sidat" title="Creation date" />
          <area shape="default"  nohreh="nohref" Title="Browse for the security image" /> </map> <br>
          <ol>On this tab you can now </li>
          <li>change/replace the image by double clicking on it</li>
          <li>edit the description or name</li>
          <li>delete the image with it name by pressing the Delete button</li>
          <li>add a new image by pressing the Add button.</li> </ol>
          <a href="#addsibws" class="large" title="Browse for the security image"> Return</a> &nbsp;&nbsp;&nbsp;&nbsp;
          <a href="javascript:void(0)" onclick="cmpltadd('si');"> Done </a>
          </strong></p>
          </div>
       </div>

好的，所以第一张图片地图有一个链接到弹出窗口的地图区域;在弹出窗口中，最后一个链接是“完成”。当用户点击它时，它会启动页面部分（“repostarea”div）的重写（在javapopup下面）。一切正常。但我想要发生的是当用户点击弹出窗口的地图区域时我想同时调用cmpltadd（'si'）函数（调用简单的php脚本来回显html代码）。我可以从一个动作得到两个结果吗？

Answer 1

标记，

首先，jQuery有一个非常简洁可靠的ajax方法，允许cmpltadd()像这样编写：

function cmpltadd(tab) {
    if (tab == "") {
        $("#repostarea").html("");
        return;
    }
    $.ajax({
        url: "../includes/cmpltadd.php",
        type: 'POST',
        data: {q: tab},
        success: function(html) {
            $("#repostarea").html(html);
        }
    });
}

要打开弹出窗口，您可能已经有类似这样的内容：

$("#sitabwimg").on('click', 'area', function(e) {
    e.preventDefault();
    var tabID = this.href;
    $(tabID).colorBox(...);
});

要通过一次点击获取这两项操作，您需要添加对cmpltadd()的调用。

$("#sitabwimg").on('click', 'area', function(e) {
    e.preventDefault();
    var $this = $(this);
    var tabID = this.href;
    $(tabID).colorbox(...);
    cmpltadd(tabID);
});

现在，您不应该在弹出窗口关闭时调用cmpltadd()，但如果您仍需要某些事情发生，那么您可以在onClosed选项中指定.colorbox()回调函数，例如：

$(selector).colorbox({
    //other options here
onClosed: function() { 
        //do something here
    }
});

结合Jquery的Colorbox插件和Ajax功能

1 个答案: