この汎用ベースはこのままでも使えます。
CSSファイルとJSファイルを外部ファイル化してあります。
設定項目をコメントを参考に設定してください。
色々変えてみながら好みに合わせてください。
設定項目は普通の変数代入ではなくオブジェクト記述の方法なので
項目名:値
の様に書きます。値が文字列の場合は '' で囲んでください。
行末に『;』等はつけないでください。
設定3のロード中の非表示 を使う場合は、
非表示にさせるコンテンツをDIVやTABLE等のブロックで囲みIDをinbodyにする必要があります。
これを忘れてもエラーは出ませんが、表示/非表示ができません。
inbodyを別のIDにしたい場合はスクリプトの中のこの文字列を探して変えてください。
この設定を非表示で使うと、リロードする度にページトップに戻る(一旦display:noneになるので)ので注意です。
■使い方
HEAD内の最後(なるべくBODYに近い位置)にまたはBODYタグ直後に
外部ファイルとしてCSSとJSファイルを読み込ませるようにしてください。
基本形は
<html>
<head>
<link rel="stylesheet" type="text/css" href="./base.css">
<script type="text/javascript" src="./base.js"></script>
<title></title>
</head>
<body>
<div id="inbody">
</div>
</body>
</html>
です。
デフォルトではHTMLファイルと画像は同じディレクトにある事を前提にした相対パスですが、
複数ページで使う場合などは、画像指定は httpからのフルパスにする方がトラブル無く汎用性があります。
■ 使用してる 変数 など
グローバル変数名として Cset を１個使用しています。
IDとして Loadouter 、 Loadinner、Loadmsg の３個と、
ボディ内を非表示にする場合はデフォルトではもう一つinbodyというIDを使用します。
■ グローバル関数名を使わない方法
アドオンを使わずベーススクリプトだけ使う場合は
var Cset = {
処理
};Cset.set(Cset);
を
;(function(){
var Cset = {
処理
};Cset.set(Cset);
})();
の様に、最初の行と最後の行を書き加えて配布スクリプトが無名関数として実行されるようにします。
■イベント
ウィンドウオンロードで表示中画像を消します。
その他スクロールイベントなども全てメソッドによるイベント付加なので、
他のスクリプトの同じオブジェクトの同じイベントと干渉しあいません。
■共通ファイルを使うがページごとに違う設定にしたい
この場合は各ページにスクリプトをそれぞれ付けた方が手っ取り早いかもしれません。
が、そうなるとJSファイルが増えますから微妙な所ですね。
共通のまま設定を変えるには共通ファイルとして使うスクリプトの最下部
Cset.set(Cset);
を、外します(消します)。
次にスクリプトタグの直後に設定を上書きする方法で設定項目を書きます。
追加上書きしする項目を書いた最後にCset.set(Cset);を書きます。
<html>
<head>
<link rel="stylesheet" type="text/css" href="./base.css">
<script type="text/javascript" src="./base.js"></script>
<script type="text/javascript">
Cset.Inn = '<img src="./gear1.gif" border=0><br>ロードしています';
Cset.Top = 150;
Cset.Disp = 1;
Cset.Scroll = 1;
Cset.delay = 1000;
Cset.set(Cset);
</script>
<title></title>
</head>
<body>
<div id="inbody">
</div>
</body>
</html>
必要な項目だけを上書きするようにします。
共通ファイルを使いながら1ページでもこの方法を使うと元の共通スクリプトに
Cset.set(Cset);が存在しませんので、
追加上書きしないページでも、スクリプトの後に
Cset.set(Cset);を書かねば動きません。
<html>
<head>
<link rel="stylesheet" type="text/css" href="./base.css">
<script type="text/javascript" src="./base.js"></script>
<script type="text/javascript">
Cset.set(Cset);
</script>
<title></title>
</head>
<body>
<div id="inbody">
</div>
</body>
</html>
また、この方法の場合はグローバル変数無しの方法は使えません。
■ アドオン
アドオンを使う場合はグローバル変数を使用する方法で使います。
説明は各アドオンの方で。