OKANOWEB WEB PARTS SAMPLE

DHTML（DOM）サンプル

リストの並び替え

実例: このようになります。

<html>
<head>
<title>テスト</title>
<script type="text/javascript">

</script>
</head>
<body>
<h1>Große Städte <span id="Art">alphabetisch von A bis Z</span></h1>
<ol>
<li>B　ベルリン</li>
<li>D　ドルトムント</li>
<li>D　ドレスデン</li>
<li>D　デュッセルドルフ</li>
<li>E　エッセン</li>
<li>F　フランクフルト</li>
<li>H　ハンブルク</li>
<li>H　ハノーファー</li>
<li>K　ケルン</li>
<li>L　ライプツィッヒ</li>
<li>M　ミュンヘン</li>
<li>N　ニュルンベルク</li>
<li>S　シュトゥットガルト</li>
</ol>
<form action="" name="Formular">
<input type="button" name="abc" value:値="アルファベット順" onClick="ABC()">
<input type="button" name="geo" value:値="地理的な順番" onClick="GEO()">
</form>
</body>
</html>

表示位置の変動

例:

実例: このようになります。

<html>
<head>
<title>テスト</title>
<script type="text/javascript">
<!--
var rp, bp, ich;
var rpGeschw = 10, bpGeschw = 20;
var rpGrad = 0, bpGrad = 0;
var rpX = 170, rpY = 170, bpX = 170, bpY = 170;
var rpRadius = 150, bpRadius = 150;function Init() {
rp = eval(document.getElementById("roterPunkt"));
bp = eval(document.getElementById("blauerPunkt"));
ich = eval(document.getElementById("ich"));
rp.style.position = "absolute";
rp.style.top = 20;
rp.style.left = 320;
bp.style.position = "absolute";
bp.style.top = 320;
bp.style.left = 320;
ich.style.position = "absolute";
ich.style.top = 110;
ich.style.left = 90;
ich.style.fontFamily = "Courier New,Courier";
ich.style.fontSize = "72pt";
ich.style.fontWeight = "bold";
ich.style.color = "#009900";
rpKreis();
bpKreis();
}function rpKreis() {
rpGrad += rpGeschw/1000;
if(rpGrad > 360) rpGrad = 0;
rp.style.top = Math.round(rpY + (rpRadius * Math.cos(rpGrad)));
rp.style.left = Math.round(rpX + (rpRadius * Math.sin(rpGrad)));
window.setTimeout("rpKreis()",100/rpGeschw);
}function bpKreis() {
bpGrad += bpGeschw/1000;
if(bpGrad > 360) bpGrad = 0;
bp.style.top = Math.round(bpY + (bpRadius * Math.cos(bpGrad)));
bp.style.left = Math.round(bpX + (bpRadius * Math.sin(bpGrad)));
window.setTimeout("bpKreis()",100/bpGeschw);
}
//-->
</script>
</head>
<body onLoad="Init()"><div id="roterPunkt">
<img src="ichkreis1.gif" width="20" height="20" border="0" alt="roter Pbunkt"></div>
<div id="blauerPunkt">
<img src="ichkreis2.gif" width="20" height="20" border="0" alt="blauer Pbunkt"></div>
<div id="ich">ICH</div></body>
</html>

例:エディター

実例: このようになります。

<html>
<head>
<title>テスト</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal;
 border-bottom:2px solid red; }
h2 { font-family:Arial,sans-serif; font-size:20pt; font-weight:normal; 
border-bottom:1px solid red; }
h3 { font-family:Arial,sans-serif; font-size:12pt; font-weight:bold; }
p { font-family:Arial,sans-serif; font-size:11pt; }
-->
</style>
<script type="text/javascript">
<!--
function Hinzufuegen() {
var Typ = document.Formular.
Elementtyp.options[document.Formular.Elementtyp.selectedIndex].value:値;
var Elementknoten = document.createElement(Typ);
if(Typ == "hr")
document.getElementById("User").appendChild(Elementknoten);
else {
var Textknoten = document.createTextNode(document.Formular.Elementinhalt.value:値);
Elementknoten.appendChild(Textknoten);
document.getElementById("User").appendChild(Elementknoten);
}
}
//-->
</script>
</head>
<body><form action="" name="Formular" style="background-color:#EEEEEE; padding:10px">
<select name="Elementtyp" size="1">
<option value:値="h1">見出し 1</option>
<option value:値="h2">見出し 2</option>
<option value:値="h3">見出し 3</option>
<option value:値="p">段落</option>
<option value:値="hr">横線</option>
</select>
<input type="text" name="Elementinhalt" size="50">
<input type="button" value:値="Hinzuf&uuml;gen" onClick="Hinzufuegen()">
</form><div id="User" style="background-color:#FFFFC0; padding:10px">
</div></body>
</html>