飛耳長目

Interactive

<script type="text/javascript" src="./script/popup/popup.js"></script>

Tooltip

 リンクにマウスを重ねると 説明?が表示される。説明の書式は #help_tooltip で指定する。

<a class="tooltip" title="説明内容” href=#">説明</a>

 

Popup

1. 写真をポップアップ表示。sample1

<a class="popup" href="url">写真</a>

 

2. ウェブページをポップアップ表示。 sample2 標準サイズ 800x500

<a class="popup" href="url">標準サイズ</a>

 

3.ウィンドウサイズをrelで指定する。sample3 表示サイズ 600x400

<a class="popup" rel="width:600;height:400" href="url">指定サイズ</a>

 

4. YouTubeビデオを表示 sample4 520x420

class="popup flash" rel="width:520;height:420"

 

5. ページ内のID属性のセクションを表示 〔例〕#header

※onclickで開くとき 

sample
<a onclick="window.open(this.href,'popup','resizable=yes,location=no,menubar=no, scrollbars=no,status=no,toolbar=no,fullscreen=yes,dependent=no,width=400,height=300, top=10,left=10,status'); return false" href="http://agorian.com/img/test.jpg">sample</a>

 

Toggle

1. 属性にclass="toggle"と書くと次のパラグラフがトグル表示

Next ここがトグル表示される

Prev ここがトグル表示される

3. IDが 001 のパラグラフをトグル表示 sample5 id=001を表示
<A href="#001" class="toggle id">001を表示</A>
<P id="001">ここが表示</P>

ここが id="001" と書いた部分

その他

1.#headerにジャンプする。<a class="jump" href="#header">header</a>

2.ul class="rotate"のリスト項目が順番に表示される。sample

 

リストを順に表示

2.ul class="rotate"のリスト項目が順番に表示される。

  • 最初のテキスト
  • 二番目のテキスト
  • 終わりのテキスト

※リストタイプを空白にしたいときは、 style="list-style-type: none" を書く。

  • 最初のテキスト
  • 二番目のテキスト
  • 終わりのテキスト
©2006 Sigma Social Network