●ポップアップメニュー
 Ver:1.3
 形式:js
 言語:JavaScript
 環境:IE5.5,IE6で動作を確認
 備考:
                     ⇒ V1.3 Download

・履歴
 ・5/16新規 Ver:1.0
   とほほさん(とほほのWWW入門)のポップアップメニューに触
  発されて、自分なりに改造してみました。あえて、改良ではありま
  せん。
   XMLを使用しているので、初心者の方にはかなりとっつきにく
  くなってしまいました。その代わり、Html本体への変更が少な
  くなるようにと思ったのですが、効果は微妙です。
   自分自身では使い道がないので、公開しておきます。

 ・5/16修正 Ver:1.1
   公開当日ですが、バージョンアップしました。
   スタイルもXMLの方から指定できるように変更し、メソッドの
  名称を一部変更しました。

 ・5/17修正 Ver:1.2
   公開翌日ですが、バグを修正しました。
   ポップアップメニューの高さと横幅を実際の値で返すように修正
  しました。
   起動時に高さと横幅のスタイル指定が無効になるバグを修正しま
  した。

 ・5/20修正 Ver:1.3
   項目にマウスが乗った時や外れた時などの、イベント処理の際の
  スタイル指定についてもXMLから記述するように変更しました。



//////////////////////////////////////////////////////////////////
* * *  以下は設定方法についてです。  * * *
//////////////////////////////////////////////////////////////////
・使用法
  とりあえず、設定方法を簡単にご説明いたします。

 ・Html本体
   1.Html本体のヘッダーに<script>の列を付け加えてください。
   2.<body>のonLoad属性にpopup = new clsPopupMenu();を設定してください。

   例:<html>
     <head>
     <script type="text/javascript" src="PopupMenu.js"></script>
     </head>
     <body onLoad="popup = new clsPopupMenu();">

 ・pop_menu.xml
   <menu>と</menu>の間にメニューの項目を追加します。
   なお、タグの入れ子関係を崩すとエラーになりますので注意してください。

   例:<?xml version="1.0" encoding="Shift_JIS"?>
     <menu>
      <list>
       <item url="a" target="_blank">a</item>	}
       <item url="b">b</item>		}この部分です。
       <item url="c" split="yes">c</item>	}
      </list>
      <style>
            .....(変更不要。設定については後述)
      </style>
      <behavior>
            .....(変更不要。設定については後述)
      </behavior>
     </menu>

   属性:list項目に設定できる属性
    添付されているXSLが対応している属性は以下の通りです。
	 url  - href属性に変換されます。
	 target - target属性そのままです。
	 split - 指定されているlist項目の上に<hr>が挿入されます。

 ・置く場所
   きちんと設定されていれば、どこでもOKです。
   わからなければ、とりあえず全部同じディレクトリにでも置いてください。


・注意点
 ・IDは一意のものを指定してください。
  Html内に同一のIDがある場合、エラーとなります。

 ・サーバーによってはxmlやxslの拡張子をアップロードできない所があります。
  そういった場合、拡張子をtxtに変更し、Html本体の設定をすることで回避できます。

  例:<body onLoad="popup = new clsPopupMenu('xxx','yyy.txt','zzz.txt');">
	 xxx - 一意のID。例としては'popup_menu'。
	 yyy - XMLのファイル名。
	 zzz - XSLのファイル名。

  *ファイル名を変えたい場合も、上記と同じように設定すればOKです。

 ・「設定したいけど、ようわからん」という方はメールでも送ってください。




*以下は詳しい設定を行いたい方への情報です。
//////////////////////////////////////////////////////////////////
              * * *     XML構成     * * *              
//////////////////////////////////////////////////////////////////
・構成
 XMLの設定項目は以下のようになっています。
 ちなみに、<!-- コメント内容 -->はコメントを表します。

 <!-- XML宣言 -->
    <?xml version="1.0" encoding="Shift_JIS" standalone="yes"?>
     <!-- version    :XMLのバージョン。"1.0"固定でOK。 -->
     <!-- encoding   :ファイルの文字エンコーディング。 -->
        <!-- 保存形式を記述してください。違うと文字化けの原因となります。 -->
       <!-- 以下は代表的な文字エンコーディングです。 -->
         <!-- Shift_JIS :Windows標準? -->
         <!-- EUC-JP    :サーバーに多い? -->
         <!-- UTF-8     :XML宣言そのものを省略することが可能。 -->
         <!-- UTF-16    :XML宣言そのものを省略することが可能。 -->
     <!-- standalone :外部サブセットの有無。"yes"または省略してください。 -->

 <!-- ポップアップメニューの設定 -->
 - <menu>

   <!-- ポップアップメニューの項目を記述します。 -->
   - <list>
       <item 	url    = "リンク先URL"
		target = "表示ターゲット"
		split  = "区切りの有無。yes/no"> 項目 </item>
     </list>

   <!-- ポップアップメニュー自体に適用するJavaScriptスタイルを指定 -->
   - <style>
       <スタイル名>設定値</スタイル名>
     </style>

   <!-- メニュー項目のイベント処理を記述 -->
   - <behavior>

     <!-- onLoadには、メニュー項目スタイルの初期値を設定します。 -->
     <!-- この部分だけCSS(一般的なスタイルシート)による設定となります。 -->
     - <onLoad Target="対象タグ名">
         <スタイル名>設定値</スタイル名>
       </onLoad>

     <!-- イベントごとに適用するJavaScriptスタイルを記述します。 -->
     <!-- イベント名はJavaScriptのものです。 -->
     - <イベント名 Target="対象タグ名">
         <スタイル名>設定値</スタイル名>
       </イベント名>

     </behavior>
   </menu>


 ・イベントの記述については、XSLファイルに対応するタグが存在しない場合適用されません。
 ・また、複数の同名のタグがある場合は、XPathで一意に指定できなければなりません。


//////////////////////////////////////////////////////////////////
              * * *     JavaScript     * * *              
//////////////////////////////////////////////////////////////////
・クラス
 ・clsPopupMenu( [id [, xml [, xsl]]] )
   id  - ポップアップメニューのID。
	 (省略可。省略時:“popup_menu”)
     xml - ポップアップメニューの内容を示すXMLのURL。
	 (省略可。省略時:“popup_menu.xml”)
     xsl - ポップアップメニューの内容に適用されるXSLのURL。
	 (省略可。省略時:“popup_menu.xsl”)


・プロパティ
 ・id	- ポップアップメニューのID。
  ・xml	- ポップアップメニューの内容を示すXMLのURL。
  ・xsl	- ポップアップメニューの内容に適用されるXSLのURL。

 *上記は値の取得だけで、設定はできますが反映されません。


・メソッド
  ・length()
   ポップアップメニューのメニューの個数を返します。

   戻り値:正常終了 − メニューの個数
       異常終了 − −1

  ・height()
   ポップアップメニューの高さを返します。(単位:ピクセル)
   設定を行うには、後述のfnSetStyleByCodeやfnSetStyleByKeyを使用してください。

   戻り値:正常終了 − メニューの高さ
       異常終了 − −1

  ・width()
   ポップアップメニューの横幅を返します。(単位:ピクセル)
   設定を行うには、後述のfnSetStyleByCodeやfnSetStyleByKeyを使用してください。

   戻り値:正常終了 − メニューの横幅
       異常終了 − −1

  ・fnOnReady( id, xml, xsl )
   ポップアップメニューを作成します。
   コンストラクタ内で呼び出しているため、実行する必要はありません。
   現時点では、再度実行するとエラーになります。

  ・fnOnMenuLoad( xml, xsl )
   XMLとXSLをリロードし、表示しなおします。
   正常終了時:True、変換失敗時:Falseを返します。

   戻り値:正常終了 − True
       異常終了 − False

  ・fnSetStyleByCode( statements )
   ポップアップメニューのスタイルを指定します。
   ボーダーや背景色など、外枠のみ指定できます。
   ただし、positionとvisibilityの設定はできません。
   個々のメニュー項目のスタイルはXMLおよびXSLで変更してください。

   例:fnSetStyleByCode(
	  'borderLeftColor="mediumblue";
	  borderLeftStyle="solid";
	  borderLeftWidth="10pt";');

   戻り値:正常終了 − True
       異常終了 − False

  ・fnSetStyleByKey( key, style )
   ポップアップメニューのスタイルを指定します。
   ボーダーや背景色など、外枠のみ指定できます。
   ただし、positionとvisibilityの設定はできません。
   個々のメニュー項目のスタイルはXMLおよびXSLで変更してください。

   例:fnSetStyleByKey('borderRightColor','mediumblue');
     fnSetStyleByKey('borderRightStyle','solid');
     fnSetStyleByKey('borderRightWidth','10pt');

   戻り値:正常終了 − True
       異常終了 − False
【 Back 】