tweetboard效果當您訪問此鏈接 <a href="http://tweetboard.com/alpha/" rel="nofollow noreferrer">http://tweetboard.com/alpha/</a></p> <p>，你會看到在左邊鳴叫標籤滑架

Question

。當你點擊這個推文標籤時，另一個網站會在這個面板/ iframe中加載。你能幫我理解這個功能是如何創建的嗎？看來我應該能夠使用標準的HTML和jQuery來創建這種效果。

如果你能指點我正確的資源來生成這種類型的用戶界面，那會很好。

在此先感謝。

Answer 1

你必須做兩件事情：

1. 加載外部網站到這可能是絕對定位在頁面覈實。 （注：你必須通過代理通過外部網站，因爲$（）負載爲AJAX）

$（ 「＃sliderpanel」）負載（ 「/ getpagescript Q = http://www.google.com？」。 ）;

1. 點擊您的識別按鈕進行動畫。

   $("#slider").click(function() { 
       if($(this).is(":hidden")) { 
        $(this).show("slide", { direction: "right" }, 1000); 
       } else { 
        $(this).hide("slide", { direction: "left" }, 1000); 
       } 
   }); 
   

   ：

$("#slider").click(function() { 
      $(this).show("slide", { direction: "right" }, 1000); 
    }); 

/* see: http://docs.jquery.com/UI/Effects/Slide */ 

3.電線了一個 '切換' 關閉面板，這可以通過用一些替換像上面的代碼來完成

你可以使用iframe，但據我所知，沒有辦法執行callb當頁面完全加載到iframe中時確認。如果你正在嘗試編寫一個插件來完成這項工作，那麼用第一步替換iframe的內容就可以了。

編輯：對不起，如果有任何代碼塊混亂了，SO沒有根據空白格式或在編輯器中使用'code'按鈕進行格式化。