以下、自由コンテンツ(HTML)を記述。 本例は、説明文。
../ホーム../へ サンプルページ Azax 4 ツリーメニュー ../ajax4_tree.htm
../ツリーメニュー、前回のツリー展開状態再現(クッキー使用)。 AjaxScript。 メニュー・ハイパーリンクなどのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
../< ご使用方法 >
../・ ローカル(=PC)への保存は、ajax4_tree/ をクリック、開いたホルダーで、ajax4_tree.htm などを右クリック[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。
../・ このDHTMLの実装方法は、ajax4_tree.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ
1 や hogehoge.html(=任意の挿入先ファイル名) の、../<head> 〜../../</head>../の任意の行間に (*1)
を、さらに../../<body> 〜../../</body>../の任意の行間に (*2) をペーストします。
../・ 編集方法は、hogehoge.html を
WordPadや SmipleTextなどのテキストエディター、あるいはホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 アイコン画像などの変更は準備した画像ファイル名を、hogehoge.html などの該当部分に記述。 パラメーターの変更は該当部分で。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
../../・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 6.x〜 などで開いて。 更新の確認は、ie、Netscapeやサーバーからのキャッシュデーター更新を、../目的のページを表示し ieで [F5]キー
を押し最新データ読み込みで行います(≠再アクセス)。 Netscapeは、Ctrl+Rキーで。
../・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、../使用する画像
(*.gif)、*.js なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号6、2、スタイルシートリファレンス、ホームページ開設入門が便利!。 Web Development、Web開発、MSDN
IE8 HTMLとCSS。
../(*1)
: ajax4_tree.htm (例) ../挿入先../の <head> 〜 </head>../の、../〜../部分にペーストします。
|
../HTMLの編集方法 |
../ (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
../〔この列ペースト不要〕
../シフトJIS使用(削除不可)
../ieなどに表示するアイコンファイル名(削除可)
<style type 〜../</style>../は(削除可)
ハイパーリンク文字色 背景色 下線
表示済みの〃
マウスオーバー時の〃
クリック中の〃
../
リンクを新しいWinで開くを標準(削除可)../※:target= いろいろ
同じフレーム target="_self"
ページ全体 target="_top"
親フレーム target="_parent"
../
お気に入り、タスクバーに表示するページ名(≠ファイル名)../
リスト位置補正
ツリー位置補正
ハイパーリンク修飾
|
../<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
../<link REL="SHORTCUT ICON" href="favicon.ico">
../<style type=../"text/css"><!--
../a:link { color:#55006C; background-color:#FAFAFC;
text-decoration:none; }
a:visited { color:#3E0010; background-color:#F3F2F4; text-decoration:none; }
a:hover { color:#8000e2; background-color:#E8E5E9;
text-decoration:underline; }
a:active { color:#E700A4; background-color:#E1DDE9;
text-decoration:underline; }
../-->
</style>
../<base target="_blank">
<title>サンプルページ Azax 4 ツリーメニュー</title>
../<!-- ☆ ----------- ↓ この間をコピー&ペーストします。
------------ -->
<style type="text/css">
#ajaxMessage{
margin-top:10px;
font-size:8pt;
color:red;
}
#expandCollapse{
font-family: Verdana, sans-serif;
font-size:8pt;
}
#d_tree{
margin:0px;
padding:0px;
margin-left:5px;
}
#d_tree ul{ /* Sub menu groups */
margin-left:8px; /* Left spacing */
padding-left:0px;
display:none; /* Initially hide sub nodes */
}
#d_tree li{ /* Nodes */
margin-left:0px; /* Left spacing */
margin-top:-2px;
margin-bottom:-3px;
list-style-type:none;
vertical-align:middle;
}
#d_tree li
a:link { color:#3C0055; background-color:#FBFAFE;
text-decoration:none;font-family:Verdana;font-size:8pt;padding-left:px; }
a:visited { color:#310011; background-color:#EDECEF;
text-decoration:none;font-family:Verdana;font-size:8pt;padding-left:px; }
a:hover { color:#FFFFFF; background-color:#00A2BA;
text-decoration:underline;font-family:Verdana;font-size:8pt;padding-left:px;
}
a:active { color:#FFFFFF; background-color:#00BAAF;
text-decoration:underline;font-family:Verdana;font-size:8pt;padding-left:px;
}
}
#d_tree input{
width:200px;
font-size:8pt;
margin-left:2px;
font-family:Verdana;
}
li {
MARGIN-TOP: px; MARGIN-LEFT: -px
}
</style>
<script type="text/javascript" src="0102550.js"></script>
<script type="text/javascript" src="0102551.js"></script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
../(*2)
: ajax4_tree.htm (例) ../ 挿入先の <body> 〜
</body> の、../〜
部分にペーストします。
|
../HTMLの編集方法 |
../ (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
../〔この列ペースト不要〕
../※:<body> 部の編集../ 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)
../
../位置 サイズ
../背景画像
../吹き出し ../文字列
../URL ノードID(任意値
・不規則) メニュー・サイト名
../以下、同様。
右DIVの位置設定。
右DIVの終端、末尾に記述。 |
../
../<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">
../<!--webbot bot="HTMLMarkup" startspan -->
<!-- ■ ---- 位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
<!-- 表示枠位置 表示枠サイズ 座標 表示枠背景色 -->
<div style="position:relative; top:-10; left:-5; width:200; height:10;
z-index:0; visibility:visible; background-color:#FFFFFF; background-image:
url('');">
<table width="200" height="" border="1" cellspacing="0" cellpadding="2"
bgcolor="#FFFFFF" style="border-collapse: collapse"
bordercolorlight="#F1F0FB" bordercolordark="#D5CED3">
<tr>
<td bgcolor="#FFFFFF" valign="top" align="left"
background="../wttec.gif">
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<div id="expandCollapse">
<a href="http://www./……/xxx.html" onclick="expandAll();return false"
title="\^o^/ 全ホルダーを開く"><img border="0" src="nav_open1.gif" width="16"
height="16">全て開く</a>
<a href="http://www./……/xxx.html" onclick="collapseAll();return false"
title="(>_<) 全ホルダーを閉じる"><img border="0" src="nav_closed.gif"
title="(>_<) 全ホルダーを閉じる" width="16" height="16">全て閉じる</a>
</div>
<ul id="d_tree">
<li><a href="http://www./……/xxx.html" id="node1">サイト 1</a>
<ul>
<li><a href="http://www./……/xxx.html" id="node11">サイト 11</a>
<ul>
<li><a href="http://www./……/xxx.html" id="node111">サイト 111</a>
<ul>
<li class="d_sheet.gif"><a
href="../hyou4-5/hyou5.htm" id="node1111"
title="ストリーム♪、WebRadio、RealAudio、連続演奏">表5 凸丸角 -♪連続演奏</a></li>
<li class="d_sheet.gif"><a
href="http://xml-xsl.sakura.ne.jp/iframe_popup.htm" id="node1112"
title="IFRAMEに右クリックのポップアップメニューでWebページを表示。">IFRAME POP</a></li>
<li class="d_sheet.gif"><a
href="../bgm_sw2a.htm" id="node1113"
title="演奏開始/停止ボタン">BGM on/off</a></li>
<li class="d_sheet.gif"><a
href="http://xml-xsl.sakura.ne.jp/top_navbar28g.htm" id="node1114"
title="MicrosoftのWebのプルダウンメニュー風。 横長 -
縦横展開、Transition指定。 ボタン画像 ">トップナビバー28</a></li>
<li class="d_sheet.gif"><a
href="http://xml-xsl.sakura.ne.jp/top9_frame.htm" id="node1115"
title="Java Applet、IE、Win2000風のプルダウンメニュー + 上下フレーム。">トップナビバー 9
フレーム </a></li>
<li class="d_sheet.gif"><a
href="http://xml-xsl.sakura.ne.jp/tree15fr.htm" id="node1116"
title="Microsoft Windows Tree Control 〃。 3DRoundBlue、Greenアイコン +
左右フレーム">ツリーメニュー 15aフレーム</a></li>
<li class="d_sheet.gif"><a
href="http://xml-xsl.sakura.ne.jp/navi_bar.htm" id="node1117"
title="CSS、マウスオーバーで縦横展開MSプルダウンメニュー風。3Dタイトル">ナビバー</a></li>
</ul>
</li>
<li><a href="http://www./……/xxx.html" id="node112">サイト 112</a>
<ul>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node1121">サイト 1121</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node1122">サイト 1122</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node1123">サイト 1123</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node1124">サイト 1124</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node1125">サイト 1125</a></li>
</ul>
</li>
==== この間、説明を省略。 ====
../<li><a href="http://www./……/xxx.html" id="node3">サイト 3</a>
<ul>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node31">サイト 31</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node32">サイト 32</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node33">サイト 33</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node34">サイト 34</a></li>
<li class="d_sheet.gif"><a href="http://www./……/xxx.html"
id="node35">サイト 35</a></li>
</ul>
</li>
</ul>
<div id="ajaxMessage"></div>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
</td>
</tr>
</table>
</DIV>
<!-- ↓ 右DIVの位置設定。 -->
<div style="position: absolute; left:220px; top:10px;">
<!-- ■ ---- 位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 -->
<!--webbot bot="HTMLMarkup" endspan -->
../以下、自由コンテンツ(HTML)を記述。 本例は、説明文。
==== この間、説明を省略。 ====
<!-- ★ ----- 右DIVの終端、末尾に ↓ を記述します。 ---------- -->
</div>
<!-- ★ ----- 右DIVの終端、末尾に ↑ を記述します。 ---------- -->
</body>
</html>
|
../< 補足 > 適時参照あれ!。
../・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。