0

在网上搜索做 java 脚本弹出消息和显示时，我发现jQuery 和 colorbox 插件 是一个很棒的工具集。几个月前，在另一个项目中，我发现了关于动态重写所显示网页部分的 Ajax 技术的讨论。我想将两者结合起来。我正在尝试使用单击来弹出一个颜色框弹出窗口并同时重新编写基础页面。
这是两个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>

然后在正文中，我有一个带有颜色框“类”链接的映射图像，以生成内联 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>

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

4

1 回答 1

0

标记，

首先，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
    }
});
于 2012-09-10T23:53:21.473 回答