smarty/docs/ja/designers/language-custom-functions/language-function-popup.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- $Revision$ -->
<!-- EN-Revision: 2586 Maintainer: takagi Status: ready -->
<!-- CREDITS: mat-sh,daichi,joe -->
<sect1 id="language.function.popup">
 <title>{popup}</title>
  <para>
   <varname>{popup}</varname> を使用して、Javascript のポップアップウィンドウを作成します。
   <link linkend="language.function.popup.init">
   <varname>{popup_init}</varname></link> は、この動作の最初に呼び出される必要があります。
 </para>

 <informaltable frame="all">
  <tgroup cols="5">
   <colspec colname="param" align="center" />
   <colspec colname="type" align="center" />
   <colspec colname="required" align="center" />
   <colspec colname="default" align="center" />
   <colspec colname="desc" />
   <thead>
    <row>
     <entry>属性名</entry>
     <entry>型</entry>
     <entry>必須</entry>
     <entry>デフォルト</entry>
     <entry>概要</entry>
    </row>
   </thead>
   <tbody>
    <row>
     <entry>text</entry>
     <entry>string</entry>
     <entry>Yes</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップウィンドウ中に表示するtext/html</entry>
    </row>
    <row>
     <entry>trigger</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>onMouseOver</emphasis></entry>
     <entry>ポップアップウィンドウを起動するトリガー（onMouseOver又はonClick）</entry>
    </row>
    <row>
     <entry>sticky</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>閉じられるまでポップアップを待機させる</entry>
    </row>
    <row>
     <entry>caption</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>タイトルにセットする見出し</entry>
    </row>
    <row>
     <entry>fgcolor</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップボックスの内部の色</entry>
    </row>
    <row>
     <entry>bgcolor</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップボックスの枠線の色</entry>
    </row>
    <row>
     <entry>textcolor</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップボックス内部のテキストの色</entry>
    </row>
    <row>
     <entry>capcolor</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップボックスの見出しのテキストの色</entry>
    </row>
    <row>
     <entry>closecolor</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>closeテキストの色</entry>
    </row>
    <row>
     <entry>textfont</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>メインテキストで使用されるフォントの種類</entry>
    </row>
    <row>
     <entry>captionfont</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>見出しで使用されるフォント</entry>
    </row>
    <row>
     <entry>closefont</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry><quote>Close</quote> テキストのフォント</entry>
    </row>
    <row>
     <entry>textsize</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>メインテキストのフォントサイズ</entry>
    </row>
    <row>
     <entry>captionsize</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>見出しテキストのフォントサイズ</entry>
    </row>
    <row>
     <entry>closesize</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry><quote>Close</quote> テキストのフォントサイズ</entry>
    </row>
    <row>
     <entry>width</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ボックスの幅</entry>
    </row>
    <row>
     <entry>height</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ボックスの高さ</entry>
    </row>
    <row>
     <entry>left</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>ポップアップをマウスの左側に表示</entry>
    </row>
    <row>
     <entry>right</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>ポップアップをマウスの右側に表示</entry>
    </row>
    <row>
     <entry>center</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>ポップアップをマウスの中央に表示</entry>
    </row>
    <row>
     <entry>above</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>ポップアップをマウスの上側に表示
     (注: heightがセットされている場合のみ有効)</entry>
    </row>
    <row>
     <entry>below</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>&false;</emphasis></entry>
     <entry>ポップアップをマウスの下側に表示</entry>
    </row>
    <row>
     <entry>border</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの枠線の幅</entry>
    </row>
    <row>
     <entry>offsetx</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポインタから水平にどれくらい離れた位置にポップアップを表示するか</entry>
    </row>
    <row>
     <entry>offsety</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポインタから垂直にどれくらい離れた位置にポップアップを表示するか</entry>
    </row>
    <row>
     <entry>fgbackground</entry>
     <entry>url to image</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの内部に色の代わりに表示する画像</entry>
    </row>
    <row>
     <entry>bgbackground</entry>
     <entry>url to image</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの境界に色の代わりに表示する画像。 
     (注:bgcolor や colorを <quote></quote> にしたほうがよい) 
     (注:Closeリンクを使用する場合、Netscape
     ではテーブルのセルが再描写されて誤った表示になることがあります)</entry>
    </row>
    <row>
     <entry>closetext</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry><quote>Close</quote> テキストの代替として使用する文字列</entry>
    </row>
    <row>
     <entry>noclose</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>sticky属性がtrueに設定されているポップアップの見出しに
     <quote>Close</quote> テキストを表示しない</entry>
    </row>
    <row>
     <entry>status</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ブラウザのステータスバーに表示する文字列</entry>
    </row>
    <row>
     <entry>autostatus</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップのテキストをステータスバーのテキストとして設定する
      (注: statusの設定をオーバーライドします)</entry>
    </row>
    <row>
     <entry>autostatuscap</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの見出しテキストをステータスバーのテキストとして設定する
      (注: statusとautostatusの設定をオーバーライドします)</entry>
    </row>
    <row>
     <entry>inarray</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>overlib.js 内にある ol_array 配列中の指定したインデックスから、
      text を読み込む (このパラメータはtextの代わりに使用されます)</entry>
    </row>
    <row>
     <entry>caparray</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>overlib.js 内にある ol_caps 配列中の指定したインデックスから、
      caption を読み込む</entry>
    </row>
    <row>
     <entry>capicon</entry>
     <entry>url</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの見出しの前に画像を表示する</entry>
    </row>
    <row>
     <entry>snapx</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップを水平グリッドにスナップする</entry>
    </row>
    <row>
     <entry>snapy</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップを垂直グリッドにスナップする</entry>
    </row>
    <row>
     <entry>fixx</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの水平の位置を固定する
      (注: 他の全ての水平の位置に関する属性はオーバーライドされます)</entry>
    </row>
    <row>
     <entry>fixy</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップの垂直の位置を固定する
      (注: 他の全ての垂直の位置に関する属性はオーバーライドされます)</entry>
    </row>
    <row>
     <entry>background</entry>
     <entry>url</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>テーブルボックスの背景の代わりに画像をセットする</entry>
    </row>
    <row>
     <entry>padx</entry>
     <entry>integer,integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>水平のホワイトスペースによって背景画像の表示領域を大きくする
      (注: ２つのパラメータが必要)</entry>
    </row>
    <row>
     <entry>pady</entry>
     <entry>integer,integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>垂直のホワイトスペースによって背景画像の表示領域を大きくする
      (注: ２つのパラメータが必要)</entry>
    </row>
    <row>
     <entry>fullhtml</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>背景画像上でHTMLを完全にコントロールする (HTML コードは
      <quote>text</quote> 属性に記述する)</entry>
    </row>
    <row>
     <entry>frame</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>異なるフレームにおけるポップアップを操作する
      (詳細はoverlibのサイトを参照)</entry>
    </row>
    <row>
     <entry>function</entry>
     <entry>string</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>指定した Javascript 関数を呼び出し、
     その返り値をポップアップウィンドウに表示する</entry>
    </row>
    <row>
     <entry>delay</entry>
     <entry>integer</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップをツールチップ風に表示する。
      設定した遅延 (ミリ秒) の後にポップアップします。</entry>
    </row>
    <row>
     <entry>hauto</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップがマウスの左側か右側のどちらに位置するべきかを自動的に決定する</entry>
    </row>
    <row>
     <entry>vauto</entry>
     <entry>boolean</entry>
     <entry>No</entry>
     <entry><emphasis>n/a</emphasis></entry>
     <entry>ポップアップがマウスの上側か下側のどちらに位置するべきかを自動的に決定する</entry>
    </row>
   </tbody>
  </tgroup>
 </informaltable>

 <example>
  <title>{popup}</title>
  <programlisting>
<![CDATA[
{* popup_initはページの先頭で一度だけ呼び出す必要があります *}
{popup_init src='/javascripts/overlib.js'}

{* マウスが重なった時にポップアップによる説明が表示されるリンクを作成します *}
<a href="mypage.html" {popup text='This link takes you to my page!'}>mypage</a>

{* popupのtextにhtmlやlinksを用いる事ができます *}
<a href="mypage.html" {popup sticky=true caption='mypage contents'
text="<ul><li>links</li><li>pages</li><li>images</li></ul>"
snapx=10 snapy=10 trigger='onClick'}>mypage</a>

{* テーブルのセルの上でポップアップします *}
<tr><td {popup caption='Part details' text=$part_long_description}>{$part_number}</td></tr>
]]>
  </programlisting>
 </example>
 <para>
 <link linkend="language.function.capture"><varname>{capture}</varname>
 </link> のページにもよい例があります。</para>
 <para>
  <link linkend="language.function.popup.init"><varname>{popup_init}</varname></link>
  および
  <ulink url="&url.overLib;">overLib</ulink> のホームページも参照してください。
 </para>
</sect1>
<!-- Keep this comment at the end of the file
Local variables:
mode: sgml
sgml-omittag:t
sgml-shorttag:t
sgml-minimize-attributes:nil
sgml-always-quote-attributes:t
sgml-indent-step:1
sgml-indent-data:t
indent-tabs-mode:nil
sgml-parent-document:nil
sgml-default-dtd-file:"../../../../manual.ced"
sgml-exposed-tags:nil
sgml-local-catalogs:nil
sgml-local-ecat-files:nil
End:
vim600: syn=xml fen fdm=syntax fdl=2 si
vim: et tw=78 syn=sgml
vi: ts=1 sw=1
-->