0

このリンクにアクセスすると http://tweetboard.com/alpha/

左側にツイート ラベルが表示されます。このつぶやきラベルをクリックすると、このパネル/iframe 内に別のサイトが読み込まれます。この機能がどのように作成されたかを理解していただけますか? 標準の HTML と jQuery を使用してこの効果を作成できるはずです。

この種の UI を生成するための適切なリソースを教えていただければ、それは素晴らしいことです。

前もって感謝します。

4

1 に答える 1

1

いくつかのことを行う必要があります。

  1. 外部サイトを div にロードしますが、これはおそらくページから完全に離れた場所に配置されています。(注: $().load は AJAX であるため、プロキシ経由で外部サイトを渡す必要があります)

$("#sliderpanel").load("/getpagescript?q= http://www.google.com ");

  1. 識別ボタンのクリックでアニメーション化します。 
   $("#slider").click(function () {
           $(this).show("slide", { direction: "right" }, 1000);
     });

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

3. 「トグル」を配線してパネルを閉じます。これは、上記のコードを次のように置き換えることで実行できます。

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

iframe を使用することもできますが、私の知る限り、ページが iframe に完全に読み込まれたときにコールバックを実行する方法はありません。これを行うプラグインを作成しようとしている場合は、最初のステップを iframe のコンテンツの設定に置き換えることが最善の方法です。

編集:コードブロックのいずれかが台無しになっている場合は申し訳ありません.SOは空白に従ってフォーマットされていないか、エディターの「コード」ボタンを使用していません.

于 2010-01-03T17:36:33.300 に答える