0

Java スクリプトのポップアップ メッセージと表示を行うためにネットを検索したところ、jQuery とカラーボックス プラグイン が素晴らしいツール セットであることがわかりました。また、数か月前に別のプロジェクトで、表示された Web ページの一部を動的に書き換える Ajax 手法についての議論を見つけました。2つを組み合わせたい。ワンクリックでカラーボックスポップアップを表示し、同時に下のページを書き直そうとしています。
ここに2つの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>

インライン ポップアップの 1 つを次に示します。上記のいずれかの 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') 関数も同時に呼び出したいことです (HTML コードをエコーする単純な php スクリプトを呼び出します)。1 つのアクションから 2 つの結果を得ることができるかどうかが問題だと思います。

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(...);
});

ワンクリックで2つのアクションを取得するには、への呼び出しを追加する必要があります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 に答える