ちらっと小窓君
ver.1.4
　
　◆サンプル
　 　 ＜機能と特徴＞
　
　・リンク先を小さいウインドウで開くスクリプトです

　・ウインドウサイズの指定も可能です
 



 

公開日 2002.1.18
最終更新日 2002.10.24
バージョン ver.1.4
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 不使用
CSS 使用
更新履歴 2002.06.15 ver.1.1 ウインドウを開いた状態で再度ボタンを押した場合に ウィンドウがアクティブになる(最前面に来る)ように改良(変更点：ソース１)

ボタンを連打すると複数のウィンドウが開いてしまう点を改善(変更点：ソース１)
2002.07.08 ver.1.2 開くウインドウの名前を指定できるように改良(変更点：ソース１)
2002.10.24 ver.1.3 同一の名前のウインドウを複数のウィンドウから呼び出した場合 最後に呼び出したウィンドウを 親ウィンドウと認識するように改良(変更点：ソース１)
2003.06.15 ver.1.4 同一ページ内の複数設置に対応(変更点：ソース１)

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１を<head>〜</head>の間に書き込んでください。

３．ソース２を<body>〜</body>の間の
　　画像を表示したい位置に書き込んでください。

４．ブラウザでテストしてみてください。
　　正常にウィンドウが開けば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１を<head>〜</head>の間に書き込んでください

２．//設定〜//ここまでの１行目を
　　開きたいファイルのパスに変更してください。 
  w_url = 'komadokun.html';
３．ソース２の使用したい方を<body>〜<body>の間に書きこむか
　　各種イベントハンドラなどでkomadokun()関数を呼び出してください。

４．ブラウザでテストしてみてください。
　　正常にウィンドウが開けば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 
 
■ダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
小窓で開くファイルのパス：
ウィンドウの横幅： (半角数字：正の整数)
ウィンドウの縦幅： (半角数字：正の整数)
スクロールバーの有無： 　
ウィンドウの名前： (半角数字：整数) 
(詳しくは補足説明をご覧ください。)
 
 【ウィンドウとリンクの設定】 
リンクの数：
☆★☆1個目のリンク☆★☆
 リンクの形式：  
 ボタンの文字：  
 
 【ウィンドウとリンクの設定】(標準設定と同じ場合は空白にしてください。)  
 小窓で開くファイルのパス：  
 ウィンドウの横幅： (半角数字：正の整数)
 ウィンドウの縦幅： (半角数字：正の整数)
 スクロールバーの有無： 　 　 　
 ウィンドウの名前： (半角数字：整数) 
 
　
 カスタマイズフォーム   補足説明   改造方法 
 
■ウィンドウの名前

ウィンドウの名前を指定しておくと
開いたウィンドウに名前がつけられます。
同じ名前を指定してウィンドウを開こうとした時
そのウィンドウに対してジャンプさせたりすることができます。
ウィンドウの名前を省略した場合、
リンクをクリックするたびに新しいウィンドウを開きます。
 
■ウィンドウのサイズ

100以下の数字も指定は出来ますが、
ほとんどのブラウザでは100以下を指定した場合
ウィンドウサイズは100で表示されます。
 
 カスタマイズフォーム   補足説明   改造方法 
 
■開くウィンドウの大きさを変更する。(半角数字：正の整数)

　//設定〜//ここまでの２〜３行目を変更してください。
　２行目がウィンドウの横幅、３行目が縦幅です。
w_x   = 210;
w_y   = 120;
■スクロールバーの有無を変更する。

　//設定〜//ここまでの４行目を変更してください。
　表示するなら『yes』、表示しないなら『no』を指定します。
w_bar = 'no';
■ウィンドウの名前を変更する。(半角英数字)

　//設定〜//ここまでの５行目を変更してください。
w_id  = 'komado_win';
■ウィンドウを開くリンクを複数にする。

　ソース２の使用したい方を表示したい位置に書き込んでください。
　この時にリンク毎に設定をする場合は
　komadokun()関数の引数を指定してください。

　第一引数から順に『開くファイルのパス』『ウィンドウの横幅』
　『ウィンドウの縦幅』『スクロールバーの有無』『ウィンドウの名前』になります。
　該当の引数がない場合は//設定〜//ここまでの設定に従います。

　以下にonClickでkomadokun関数を呼び出す場合での例を示します。

　例：ファイルのパスのみを個別に設定する 
onClick="komadokun('komadotyan.html')";
　例：ファイルのパス、ウィンドウの名前を個別に設定する。
　　　(設定しない引数のスペースも必ず取ってください。) 
onClick="komadokun('komadotyan.html','','','','komado_win2')";
　例：ウィンドウの大きさを個別に設定する。
onClick="komadokun('','320','300')";
 
 
  

■ソース１(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.1.4


//設定
w_url = 'komadokun.html'; //小窓で開くファイルのパス
w_x   = 210;              //ウィンドウの横幅
w_y   = 120;              //ウィンドウの縦幅
w_bar = 'no';             //スクロールバーの有無
w_id  = 'komado_win';     //ウィンドウの名前
//ここまで


function komadokun(w_url2,w_x2,w_y2,w_bar2,w_id2)
{if(!w_url2){w_url2 = w_url}
 if(!w_x2)  {w_x2   = w_x;}
 if(!w_y2)  {w_y2   = w_y;}
 if(!w_bar2){w_bar2 = w_bar;}
 if(!w_id2) {w_id2  = w_id;}
 w_komado = open(w_url2,w_id2,"width="+w_x2+",height="+w_y2+",resizable=yes,scrollbars="+w_bar2);
 w_opener = Math.random();
 if(w_opener != w_komado.opener.w_opener)
 {w_komado.close();
  komadokun();}
 w_komado.focus();
 return false;}


// -->
</script>

■ソース２(以下のソースを<body>〜</body>の間に書き込んでください)  
  
<!--1個目のウィンドウを開くリンク-->
<form>
<input type="button" value="小窓を開く" onClick="komadokun('','','','','')">
</form>


■スクリプト無効時にはウィンドウは開きません。
　リンク形式にした時の場合のみ、
　href属性の属性値にジャンプしたいファイルのパスを指定しておくと
　スクリプト無効時のみジャンプさせる事が出来ます。

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう