このページのHTML
<script language = "JavaScript"
charset = "Shift_JIS"
src = "../../lib/jslb_ajax_test.js"></script>
<script language="JavaScript">
<style>
<!--
/**
* メニュー全体用スタイル
*/
.ajaxMenu a {
font-family : "Osaka", "ＭＳ Ｐゴシック", sans-serif ;
font-size : 1.2em ;
text-decoration : none ;
margin-left : 50px ;
}
.ajaxMenu a:hover { text-decoration : underline ; }
.ajaxMenu a:link { color: #444444; background: none;}
.ajaxMenu a:visited { color: #666666; background: none;}
.ajaxMenu a:active { color: #000099; background: none;}
.ajaxMenu .menu {
width : 180px ;
border : outset 2px #ffffff ;
background-color : #3399ff ;
color : #000000 ;
text-decoration : none ;
font : menu ;
line-height : 1.2em ;
padding : 0.2em 1em 0.2em 1em ;
}
.ajaxMenu .items {
width : 180px ;
border : outset 2px #ffffff ;
background-color : #dddddd ;
color : #000000 ;
text-decoration : none ;
font : menu ;
line-height : 1.2em ;
padding : 0.2em 1em 0.2em 1em ;
margin-left : 18px ;
}
-->
</style>
<!-- // メニュー全体にスタイル適用するためのコンテナ// -->
<!-- // class="ajaxMenu"のクラス名は必須// -->
<!-- // id="menu00"のid名は命名自由で必須、ただし重複不可// -->
<div id="menu00" class="ajaxMenu">
<!-- // ここから個々のメニュー// -->
<!-- // id="menu1"等のid名は命名自由で必須、ただし重複不可// -->
<div id="menu1" class="menu">
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_1.txt')">[+]メニュー1</a><br />
</div>
<div id="menu2" class="menu">
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_2.txt')">[+]メニュー2</a><br />
</div>
<div id="menu3" class="menu">
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_3.txt')">[+]メニュー3</a><br />
</div>
</div>
plus_1.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_1.txt')">[+]メニュー1</a><br />
plus_2.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_2.txt')">[+]メニュー2</a><br />
plus_2_2.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_2_2.txt')">[+]メニュー2_2</a><br />
plus_3.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_3.txt')">[+]メニュー3</a><br />
minus_1.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./plus_1.txt')">[-]メニュー1</a><br />
<div class="items">
<a href="http://jsgt.org/mt/01/">item1-1</a><br />
<a href="http://jsgt.org/mt/01/">item1-2</a><br />
<a href="http://jsgt.org/mt/01/">item1-3</a><br />
</div>
minus_2.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./plus_2.txt')">[-]メニュー2</a><br />
<div class="items">
<a href="http://jsgt.org/mt/01/">item2-1</a><br />
<div id="menu22" class="menu">
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./minus_2_2.txt')">[+]メニュー2_2</a><br />
</div>
<a href="http://jsgt.org/mt/01/">item2-3</a><br />
</div>
minus_2_2.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./plus_2_2.txt')">[-]メニュー2_2</a><br />
<div class="items">
<a href="http://jsgt.org/mt/01/">item2-2-1</a><br />
<a href="http://jsgt.org/mt/01/">item2-2-2</a><br />
</div>
minus_3.txt
<a href="javascript:void(0)"
onclick="ajax_dlink(this,'./plus_3.txt')">[-]メニュー3</a><br />
<div class="items">
<a href="http://jsgt.org/mt/01/">item3-1</a><br />
<a href="http://jsgt.org/mt/01/">item3-2</a><br />
</div>
jslb_ajax_test.js
//====================================================================
// jsライブラリ
// 暫定テスト中 jslb_ajax_test.js
//
//
// 2005/05/16 ( Use Free )
// This library is free. You can redistribute it and/or modify it.
//--------------------------------------------------------------------
//--Ajax Menu用関数
// 書式 ajax_dlink(oj,url)
//--XMLHttpRequestオブジェクト生成関数
// 書式 createHttpRequest()
// 例 httpoj = createHttpRequest()
// 戻値 XMLHttpRequestオブジェクトまたはnull
// http://allabout.co.jp/career/javascript/closeup/CU20030920/index.htm
//--------------------------------------------------------------------
// thanx Masanao Izumo for - UTF-8 <=> UTF-16 convertion library
//--------------------------------------------------------------------
// Toshirou Takahashi/サポート http://jsgt.org/mt/01/
//====================================================================
/*
使用例: まだ試しなのでちょとまてね。
*/
//--------------------------------------------------------------------
/**
* createHttpRequest()
*
* @returns XMLHttpRequest object | null
*/
function createHttpRequest(){
if(window.ActiveXObject){
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
return null;
}
}
} else if(window.XMLHttpRequest){
return new XMLHttpRequest();
} else {
return null;
}
}
/**
* ajax_dlink(oj,url)
*
* @param oj current A element oj
* @param url file path of target menu items
*/
function ajax_dlink(oj,url)
{
var xhtoj = createHttpRequest()
xhtoj.open("GET", url , true );
xhtoj.onreadystatechange = function()
{
if (xhtoj.readyState==4)
{
if(chk_browser('konqueror'))
str = utf8to16(xhtoj.responseText)
else if(chk_browser('safari'))
str = utf8to16(xhtoj.responseText)//dame
else str = xhtoj.responseText
//+=ではないのでOpera8もok でも本当はloadで拾うべき？
document.getElementById(oj.parentNode.id).innerHTML = str
}
}
xhtoj.send("")
}
/**
* chk_browser()
*
* @param browserName browser name
* @returns true | false
*/
function chk_browser(browserName)
{
var ua = navigator.userAgent
switch (browserName)
{
case 'konqueror' :
return ua.indexOf("Konqueror") != -1 ; break ;
case 'safari' :
return ua.indexOf("Safari") != -1 ; break ;
dafault :
return false ; break ;
}
}
/* utf.js - UTF-8 <=> UTF-16 convertion
*
* Copyright (C) 1999 Masanao Izumo <mo@goice.co.jp>
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* utf8 = utf16to8(utf16);
* utf16 = utf16to8(utf8);
*/
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for(i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function utf8to16(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
d=""
while(i < len) {
c = str.charCodeAt(i++);
d+=c
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += str.charAt(i-1);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}alert(d)
return out;
}