1. save following as hogege.html
2. replace "<'" to "<"
3. open the file using IE

==sample==

<'?xml version="1.0" encoding="UTF-8" ?>
<'!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<'html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<'head>
<'meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<'meta http-equiv="Content-Style-Type" content="text/css" />
<'meta http-equiv="Content-Script-Type" content="text/javascript" />
<'HTML>
<'HEAD>
<'TITLE>Tree Menu Sample<'/TITLE>
<'link rel="stylesheet" href="../css/sample.css" type="text/css" />
<'script language="JavaScript" type="text/javascript" src="../js/sample.js" charset="utf-8"><'/script><'SCRIPT language="JavaScript">
<'!--
if(document.getElementById){
document.writeln('<'style type="text/css" media="all">');
document.writeln('<'!--');
document.writeln('.hidden-menu{display:none;}');
document.writeln('-->');
document.writeln('<'/style>');
}


function showHide(id){

if(document.getElementById(id) == null){ return false; }

var disp = document.getElementById(id).style.display;

if(disp == "block"){
document.getElementById(id).style.display = "none";
}else{
document.getElementById(id).style.display = "block";
}

hideOther(id);
return false;
}

function hideOther(id){

var first = id.substr(0,1);
var second = id.substr(1,1);
var third = id.substr(2,1);
var fourth = id.substr(3,1);

hideFirstPhase(first);
hideSecondPhase(first, second);
hideThirdPhase(first, second, third);
// hideFourthPhase(id);

}

function hideFirstPhase(first) {

for(var i=1; i<'10; i++){

if ( first == i ) {
i++;
}

if(document.getElementById(i*1000) != null){
document.getElementById(i*1000).style.display = "none";
}
}
}

function hideSecondPhase(first, second) {

// if (second == 0) {
// return;
// }

for(var i=1; i<'10; i++){
if(second == i){
i++;
}

hideId = (first*1000) + (i*100);
if(document.getElementById(hideId) != null){
document.getElementById(hideId).style.display = "none";
}
}
}

function hideThirdPhase(first, second, third) {

// if (third == 0) {
// return;
// }

for(var i=1; i<'10; i++){
if(third == i){
i++;
}

hideId = (first*1000) + (second*100) + (i*10);
if(document.getElementById(hideId) != null){
document.getElementById(hideId).style.display = "none";
}
}
}
// -->
<'/SCRIPT>
<'style type="text/css">
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
/*------------------------------------------------------------------*/
/*-- container --*/
#container {
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
display: block;
position: relative;
width: 100%;
min-height: 100%;
height: 100%;
}

/*------------------------------------------------------------------*/
/*-- header --*/
#header {
padding-left: 0.5em;
border-bottom: 1px solid cornflowerblue;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 20px;
color: cornflowerblue;
}

/*------------------------------------------------------------------*/
/*-- footer --*/
#footer {
position: absolute;
bottom: 0px;
width : 100%;
height: 20px;
color: cornflowerblue;
border-top: 1px solid cornflowerblue;
}

#footer #copyright {
padding-top: 0.5em;
font-size: 8pt;
text-align: center;
}

/*------------------------------------------------------------------*/
/*-- side menu --*/
#tree-menu {
padding: 5px 0px 5px 0px;
border-right: 1px solid cornflowerblue;
float: left;
width: 180px;
max-width: 190px;
height: 100%;
}

#tree-menu li.menu-child {
padding: 1px 1px 1px 10px;
list-style-type: none;
white-space: normal;
display: list-item;
}

#tree-menu li.menu-child a {
color: cornflowerblue;
text-decoration: none;
}

#tree-menu li.menu-child a:link {
color: cornflowerblue;
}

#tree-menu li.menu-child a:visited {
color: cadetblue;
}

#tree-menu li.menu-child a:hover {
color: skyblue;
}

#tree-menu li.menu-child a:active {
color: deepskyblue;
}

/*------------------------------------------------------------------*/
/*-- ope area with treemenu--*/
#ope-area-with-treemenu {
margin-left: 180px;
padding-top: 35px;
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: auto;
}

/*-- sub header --*/
div#sub-header {
padding: 7px 0px 1px 0px;
border-bottom: 1px solid cornflowerblue;
position: absolute;
top: 0px;
width: 99.9%;
height: 35px;
color: cornflowerblue;
text-align: center;
}

/*-- OPE-BODY-PANEL --*/
#ope-body-panel {
position: relative;
width: 100%;
height: 100%;
color: cadetblue;
font-size: 18pt;
text-align: center;
overflow: auto;
}

/*------------------------------------------------------------------*/
<'/style>
<'/HEAD>
<'BODY>
<'div id="container">
<'!-- HEADER START -->
<'div id="header">
Tree Menu Sample
<'/div>
<'!-- HEADER END -->
<'div id="tree-menu">

<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1000');"/>hoge<'/a>
<'div class="hidden-menu" id="1000" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1100');"/>hogege<'/a>
<'div class="hidden-menu" id="1100" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1110');"/>hogegege<'/a>
<'div class="hidden-menu" id="1110" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1120');"/>hogegege<'/a>
<'div class="hidden-menu" id="1120" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1200');"/>hogege<'/a>
<'div class="hidden-menu" id="1200" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1210');"/>hogegege<'/a>
<'div class="hidden-menu" id="1210" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('1220');"/>hogegege<'/a>
<'div class="hidden-menu" id="1220" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'/div>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2000');"/>hoge<'/a>
<'div class="hidden-menu" id="2000" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2100');"/>hogege<'/a>
<'div class="hidden-menu" id="2100" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2110');"/>hogegege<'/a>
<'div class="hidden-menu" id="2110" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2120');"/>hogegege<'/a>
<'div class="hidden-menu" id="2120" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2200');"/>hogege<'/a>
<'div class="hidden-menu" id="2200" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2210');"/>hogegege<'/a>
<'div class="hidden-menu" id="2210" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('2220');"/>hogegege<'/a>
<'div class="hidden-menu" id="2220" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'/div>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('3000');"/>hoge<'/a>
<'div class="hidden-menu" id="3000" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('3100');"/>hogege<'/a>
<'div class="hidden-menu" id="3100" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('3110');"/>hogegege<'/a>
<'div class="hidden-menu" id="3110" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'li class="menu-child"><'a href="javascript:void(0);" onClick="showHide('3120');"/>hogegege<'/a>
<'div class="hidden-menu" id="3120" style="display: none;">
<'ul>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'li class="menu-child"><'a href="#" title="hogeeeee">hogeeeee<'/a><'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'div/>
<'/li>
<'/ul>
<'/div>
<'/li>
<'/ul>
<'br>

<'/div>
<'!--+++++++++++++++++++++++++++++++++++++++++++-->
<'div id="ope-area-with-treemenu">
<'div id="sub-header">
the sample of tree menu
<'/div>
<'div id="ope-body-panel">
<'!-- BODY START -->
<'!-------------------------->
choose a menu!
<'!-------------------------->
<'!-- BODY END -->
<'/div>
<'/div>
<'!--+++++++++++++++++++++++++++++++++++++++++++-->
<'!-- FOOTER START -->
<'div class="clear"><'/div>
<'div id="footer">
<'div id="copyright">
© 2007 8318 All Rights Reserved.
<'/div>
<'/div>
<'!-- FOOTER END -->
<'/div><'!--(id="container")-->
<'/BODY>
<'/HTML>

location.href

==sample==========================================
<'script type="text/javascript">
<'!--

function jump(){
if (confirm("are you sure？")==true)
location.href = "sample.html";
}

// -->
<'/script>


<'form>
<'input type="button" name="hoge" value="thisWay" onclick="jump()">
<'input type="button" name="hogege" value="thatWay" onclick="location.href='sample.html'">
<'/form>

□テーブルにExcelのようなスクロール機構を付加する
==================================================
for(var i=0;i<'oTBL.tHead.rows[0].cells.length;i++) {
oTBL.tHead.rows[0].cells[i].style.width =
oTBL.tHead.rows[0].cells[i].offsetWidth+'px';
oTBL.tBodies[0].rows[0].cells[i].style.width =
oTBL.tHead.rows[0].cells[i].offsetWidth+'px';
}
oTBL.style.width = oTBL.offsetWidth+'px';
==================================================
<'!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<'html>
<'head>
<'title>scroll table as a excel file<'/title>

<'style type="text/css">
<'!--
table {
width:600px;
}
th,td {
width:150px;
}
th {
background:#fdd;
}
td {
background:#ddf;
height:80px;
}
-->
<'/style>
<'script type="text/javascript">
<'!--

// テーブルをthead部分とtbody部分の２個のDIVに分け、
// tbody部分の横スクロールに連動してthead部分を横スクロールさせる。
//
// Tscroller(テーブルのID、tbody部分の横幅、tbody部分の高さ)
// tbody部分の幅や高さは指定値よりスクロールバーの幅（18px）だけ大きくなる。


// 課題 １ thead部分をclipで表示を制御し、NetscapeやOperaでも動作するようにならないか？
// CLIPでは複雑になるので断念。変わりにabsoluteで配置し、left:-スクロール値とした。
// 課題 ２ 左端の列をthead部のように残すことはできないか？
// 課題 ３ captionへの対応
// 課題 ４ Opera対応（onscrollがないので絶望的か？・・setTimeout使えばいけるかもしれないけど）
function Tscroller(Tid,tWidth,tHeight) {
// if(! navigator.userAgent.match(/firefox|msie\s+6|mozilla/i)) return;

var oTBL = document.getElementById(Tid);

var ThHeight = oTBL.tHead.offsetHeight;
var oTBL1 = oTBL.cloneNode(true);
oTBL1.id += '_H';
while(oTBL1.tBodies[0].rows.length) {
oTBL1.tBodies[0].deleteRow(0);
}
var newDiv1 = document.createElement('div');
newDiv1.id='D_'+oTBL1.id;
newDiv1.style.width = tWidth+'px';
newDiv1.style.height = ThHeight+'px';
newDiv1.style.overflow = 'hidden';
newDiv1.style.position = 'relative';
oTBL1.style.position = 'absolute';
oTBL1.style.left = '0';
oTBL1.style.top = '0';
newDiv1.appendChild(oTBL1);
oTBL.parentNode.insertBefore(newDiv1,oTBL);

var oTBL2 = oTBL.cloneNode(true);
oTBL2.id += '_B';
oTBL2.deleteTHead();
var newDiv2 = document.createElement('div');
newDiv2.id='D_'+oTBL2.id;
newDiv2.style.width = (tWidth+18)+'px';
newDiv2.style.height = tHeight+'px';
newDiv2.style.overflow = 'scroll';
newDiv2.appendChild(oTBL2);
oTBL.parentNode.insertBefore(newDiv2,oTBL);

oTBL.parentNode.removeChild(oTBL);

newDiv2.onscroll = function(){tHeadScroll(newDiv1.id,newDiv2.id)};

}
function tHeadScroll(d1,d2) {
var oD1=document.getElementById(d1);
var oD2=document.getElementById(d2);
oD1.firstChild.style.left = '-'+oD2.scrollLeft+'px';
}

// -->
<'/script>
<'/head>
<'body onload="Tscroller('T01',400,300)">

<'h1>テーブルにExcelのようなスクロール機構を付加する<'/h1>

<'table id="T01">

<'thead>
<'tr><'th>col1<'/th><'th>col2<'/th><'th>col3<'/th><'th>col4<'/th><'/tr>
<'/thead>
<'tbody>
<'tr><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'/tr>
<'tr><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'/tr>
<'tr><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'/tr>
<'tr><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'td>xx<'/td><'/tr>
<'/tbody>
<'/table>

<'p>テーブルを指定の大きさに収め、tHead部分を残してtBody部分のスクロール機構を提供する。<'/p>

<'/body>
<'/html>
==================================================

ref:
http://d.hatena.ne.jp/Mars/20050115#p1

□Abstract
サブミットボタン押下
確認ダイアログ
YES：マウスポインタを砂時計にする
NO：サブミットボタン押下前に戻る

==sample.jsp======================================
<'?xml version="1.0" encoding="UTF-8" ?>
<'!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<'%@ page contentType="text/html;charset=UTF-8" language="java" %>
<'%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<'%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<'%@ page session="true" %>
<'html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<'head>
<'meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<'meta http-equiv="Content-Style-Type" content="text/css" />
<'meta http-equiv="Content-Script-Type" content="text/javascript" />
<'link rel="stylesheet" href="/hlikk-erms/css/vbcp-main.css" type="text/css" />

<'!-- ##### JAVASCRIPT START ##### -->
<'script type="text/javascript" language="javascript">

function loadOpe(){
status='${sampleScope.status}';

if (status == 1) {
msg = '<'spring:message code="sample.label.greeting"/>';
}

alert(msg);

}


function submitOpe(){//サブミットボタン押下

status='${sampleScope.status}';

if (status == 1) {
msg = '<'spring:message code="sample.label.greeting"/>';
}

res=window.confirm(msg);

if(res == true){
document.body.style.cursor = "wait";//マウスポインタを砂時計に変更
return true;
}
else{
return false;
}
}


<'/script>
<'!-- ##### JAVASCRIPT END ##### -->

<'title>sample.jsp<'/title>
<'/head>
<'body onLoad="loadOpe()">

<'form action="sample.form" method="post">

<'td><'spring:message code="sample.label.greeting"/><'/td>

<'input type="hidden" name="_flowExecutionKey" value="${flowExecutionKey}">

<'!--##SUBMIT## -->
<'c:if test="${sampleScope.status == 1}">
<'input type="submit" name="_eventId_sampleSubmit"
value="<'spring:message code="sample.button.theSubmit"/>" onclick="return submitOpe()">
<'/c:if>

<'/form>

<'/body>

<'/html>

==================================================
==applicationContext.xml==========================
<'!-- resource -->
<'bean id="messageSource"
class="org.springframework.context.support.ResourceBundleMessageSource">
<'property name="basenames">
<'list>
<'value>sampe-message<'/value>
<'/list>
<'/property>
<'/bean>
==================================================
==sample-message.properties=======================
sample.label.greeting=HELLO!
==================================================


kw:
jstl spring mouse cursor javascript