【ＭＥＮＵ】
【マウスカーソルの形を変える】
◆概要
※通常、テキスト上にマウスカーソルをオンしたときⅠ(テキスト)の形になるがこれを矢印にしたい等等、マウスカーソルの形を指定する。
◆CSS
[stylesheet]
※cursor属性を記述する
<img style="cursor:not-allowe">
auto /自動
crosshair
default /初期設定
pointer
hand /リンク
move
text /テキトス文字
wait
help /ヘルプ
all-scroll
no-drop
not-allowed
progress
vertical-text
col-resize /列幅変更
row-resize /行幅変更
(その他省略)
◆メモ
※カーソルはOSやブラウザによって異なるので注意。
※自作カーソルも使用可とのこと(必要性を感じないので省略)
(DataID：000058 Date：2008/03/21)
【どのラジオボタンが選択されているかチェックする】
◆数設置されたのラジオボタンのどれが選択されているかチェックする。ラジオボタンに設定された値(value)を取得することもできる。
◆javascript Tips
[XHTML]
//複数のラジオボタン
<form name="FORM">
<input type="radio" name="dbnMenu" value="1" onclick="fnSelRab2(this)" />その1
<input type="radio" name="dbnMenu" value="2" onclick="fnSelRab2(this)" />その2
<input type="radio" name="dbnMenu" value="3" onclick="fnSelRab2(this)" />その3
<input type="radio" name="dbnMenu" value="4" onclick="fnSelRab2(this)" />その4
</form>
<a href="javascript://" onclick="fnSelRab()">実行</a>
...
[javascript]
//まとめて
function fnSelRab(){
for(i=0;i<=3;i++){
if(document.FORM.elements["dbnMenu"][i].checked){
rdbValue=document.FORM.elements["dbnMenu"][i].value
}
}
alert(rdbValue);
}
//チェックするたびに
function fnSelRab2(Obj){
alert(Obj.value);
}
◆ラジオボタンのname属性を同じにすることで、submitしてpost送信したときサーバー側のPHPでは下記のようにしてラジオボタンの値を取得することができる。
<?php
$strSelrdb= $_POST['dbnMenu'];
?>
(DataID：000026 Date：2008/03/04)
【選択したラジオボタンの値をテキストフィールドに表示する】
◆概要
※選択したラジオボタンの値(value)をテキストフィールドに表示しする。(どのラジオボタンが選択されたか調べる。)
◆javascript Tips
[XHTML]
<form name="FORM">
//ラジオボタンの値を表示するテキストフィールド
<input type="text" name="txtFild" id="txtFild" />
//複数のラジオボタン
<input type="radio" name="dbnMenu" value="A" onclick="fnSelRab(0)" />その1
<input type="radio" name="dbnMenu" value="B" onclick="fnSelRab(1)" />その2
<input type="radio" name="dbnMenu" value="C" onclick="fnSelRab(2)" />その3
<input type="radio" name="dbnMenu" value="D" onclick="fnSelRab(3)" />その4
<input type="radio" name="dbnMenu" value="0" onclick="fnSelRab(4)" />消去
</form>
[javascript]
function fnSelRab(g){
var strRdbtn =document.FORM.elements["dbnMenu"][g].value
if(strRdbtn=="0"){ //表示を消去
document.getElementById("txtFild").value="";
}else{
document.getElementById(strTxtbox).value=strRdbtn;
}
}
◆メモ
※fnSelRab(g)---gは0から
(DataID：000086 Date：2008/04/11)
【リンク文字の色を設定する】
◆概要
※リンク文字の色・太さ等を設定する
◆Tips
[CSSの設定例]
※みていないリンク(文字色)
a:link{color:#0000a2}
※すでにみたリンク
a:visited {color:#0080ff}
※マウスカーソルが重なっているリンク(太字さも指定)
a:hover {color:#da70d6; font-Weight:bold}
※リンクを選択した瞬間
a:active {color:#ff0000}
(DataID：000076 Date：2008/03/31)
【サブウィンドウから親ウィンドウのURLを変える】
◆親ウィンドウからオープンしたサブウィンドウに、親ウィンドウのフォームデータを渡します。
◆HTML/javascript Tips
[親ウィンドウHTML]
<form name="FORM">
<input type="text" name="txtData" />
</form>
<a href="javascript:fnWinOpen()">サブウィンドウを開く</a>
[親ウィンドウjavascript]
function fnWinOpen(){
//ファイル名はsubwindow.html)
window.open("subwindow.html","win","width=150,height=200");
}
[サブウィンドウHTML]---起動時実行
<body onload="fnStart">
<input type="text" id="txtSubData" />
<divid="divSubData" ></div>
[サブウィンドウjavascript]
function fnStart(){
document.getElementById("txtSubData").value=window.opener.FORM.txtData.value;
document.getElementById("divSubData").innerHTML= window.opener.FORM.txtData.value;
}
◆メモ
※親ウィンドウ側はwindow.opener.FORM.txtData.valueのようにform属性を使っていることから、親ウィンドウのフォームデータのみ送ることができると思われる。form属性を用いないとデータは渡らない。
※サブウィンドウ側はid属性でdocument.getElementById()を使用できることから、フォームに限らず受け取ることかできる。但しフォームの場合とそれ以外では、半角空白等の扱いが異なるようなので、必ず見え方をチェックしておかなければならない。
(DataID：000025 Date：2008/03/04)
【親ウィンドウのURLをサブウィンドウから変える】
◆親ウィンドウからオープンしたサブウィンドウから、親ウィンドウのURLを変える。サブウィンドウを小さく開いてナビページ(サイトマップ等)にして、親ウィンドウに表示するURLを変えるような場合に使う。
◆HTML/javascript Tips
[親ウィンドウHTML]
<a href="javascript:fnWinOpen()">サブウィンドウを開く</a>
[親ウィンドウjavascript]
function fnWinOpen(){
//幅150px,高さ200pxで左上端に開く
//ファイル名はsubwindow.html)
window.open("subwindow.html","win","width=150,height=200,top=0,left=0");
}
[サブウィンドウHTML]
<a href="javascript:fnPage(1)">ページ(1)</a><br />
<a href="javascript:fnPage(2)">ページ(2)</a><br />
...
[サブウィンドウjavascript]
function fnPage(f){
switch(f){
case 1:
window.opener.location.href="http://～～";
case 2:
window.opener.location.href="http://～～";
....
}
}
(DataID：000023 Date：2008/03/04)
【水平線を加工する(色付、線の太さ、長さ等)】
◆概要
※HTML上で、エリアの区分け等に簡便に用いる水平線(<hr />の、色・太さ・長さ等を指定する。
◆HTML
[XHTML]
<hr width="100px" /> //線の長さ(pxまたは%等)
<hr size="4" /> //線の太さ
<hr alige="right" /> //右寄せleft・左寄せright・中央center
<hr color="red" /> //色指定
<hr noshade> //影なし指定(指定しなければ影あり)
◆メモ
※色指定はIE専用機能ということらしい。
(DataID：000057 Date：2008/03/21)
【背景画像を一枚だけ表示する】
◆Tips
[stylesheet]
background-image:url(../gif/golf-1.JPG); //画像へのパス
background-position:right top; //画像の表示位置指定
background-repeat:no-repeat; //繰り返さない指定
または
background:url(../gif/golf-1.JPG') no-repeat top left;
※表示位置の指定(上中下右左指定)
左上 background-position:left top;
中上 background-position:center top;
右上 background-position:right top;
左中 background-position:left;
中央 background-position:center;
右中 background-position:right;
左下 background-position:right bottom;
中下 background-position:center bottom;
右下 background-position:right bottom;
※表示位置の指定(ウィンドウ左端・上端からのピクセル指定)
左上 background-position:100px 200px;
※表示位置の指定(ウィンドウ左端・上端からのパーセント指定)
左上 background-position:10% 20%;
◆メモ
※doby/div/table/h等、範囲指定できるタグに指定可能
(DataID：000074 Date：2008/03/31)