wrapResize JavaScript Library
wrapResize version 0.5
wrapResizeはウインドウのりサイズイベントに連動して、デザインやスタイルを動的に変更する処理を簡単に呼出せるようにしてくれる、JavaScriptライブラリです。リサイズイベントをトリガーにして、さまざまな処理を実行できるようになります。
JavaScriptのonResizeイベントではブラウザによってイベントの発生タイミングが異なります。wrapResizeを利用することで、特定のコンテンツ要素に対するサイズ変更と、イベントを発生させる条件を指定できる為、目的の動作のみをJavaScriptで実装すればよくなります。
動作サンプル
ウインドウサイズを小さくすると、ロゴが半透明に変化します。
具体的な実装方法に関するサンプルは現在作成中です、不明な点はメールにてお問い合わせください。
設置の方法
wrapResizeの最新版をダウンロードします。
1. HTMLヘッダに以下を記述します
ご利用の環境に合わせてURLパスは変更してください
<script type="text/javascript" src="./wrapresize.js"></script>
2. JavaScriptを記述します
リサイズイベントのトリガー作成は、以下の記述でwrapResizeオブジェクトを作成します。
<script type="text/javascript">
new wrapResize ("element_id", event, "width < 300");
</script>
3. 独自のイベントFanctionを記述します
リサイズが発生した際に、呼出されるFunctionを作成します。wrapResizeが指定されたFunctionを呼び出す際に、height、widthパラメータを引き渡します。
<script type="text/javascript">
var event = function(height, width){ ... }
</script>
4. HTMLタグへid属性を記述します
HTML中のサイズ変更を監視する部分へid属性(id="element_id")を指定します。
<div id="element_id" ...リファレンス
JavaScriptコードを記述して、wrapResizeの初期化とオプションを制御することができます。利用目的にあわせて、それぞれ必要なコードを作成してください。
1. wrapResizeオブジェクトの作成 (必須)
wrapResizeオブジェクトを作成・初期化を行います、オプションなど指定が無い一番簡単な記述方法です。1番目のパラメータにはサイズ変更を監視したい要素のidを指定します。2番目のパラメータには、リサイズイベント発生時に呼出すJavaScriptのFunctionを指定します。
new wrapResize ("element_id", event);
2. リサイズの条件を指定する
3番目のパラメータは省略できます。2番目のパラメータで指定したイベント(Function)を呼出す条件式を指定します。指定する際の単位はピクセル(px)です。
new wrapResize ("element_id", event, "width > 300");
3. リサイズ時のイベントを追加する (関数)
異なる条件とイベントを追加します。複数追加した場合でも、それぞれ異なる条件として処理されますので、干渉することはありません。
var obj = new wrapResize ("element_id", event_1, "width > 300");
obj.addEvent(event_2, "width < 500");
obj.addEvent(event_3, "width > 400");イベントの呼出しタイミングについて
1. 条件式を指定した場合
条件式を指定した場合、サイズ変更が確定するタイミングで、条件式に対する結果がTRUE(真)の場合に1度だけイベントが発生します。
2. 条件式を指定しない場合
サイズ変更が確定するタイミングで、1度だけイベントが発生します。
サイズ変更の確定は１秒以内にサイズ変更が行われない場合を指します。
リサイズの条件式について
条件式を指定した場合、結果がTRUE(真)の場合のみイベント(Function)が実行されるようになります。リサイズイベント発生時に呼出される条件を指定することで、目的の動作のみをJavaScriptで実装すればよくなります。記述方法はJavaScriptの if(...) と同じ要領です。
条件式には以下の文字列を指定することができます。
height : 指定された要素の縦幅 (px)
width : 指定された要素の横幅 (px)
1. 単純な式
横幅が300ピクセル(px)以上のときに、イベント(Function)が実行されます。
new wrapResize ("element_id", event, "width > 300");
2. 複数の条件での指定 (and)
横幅が300ピクセル(px)以上＋縦幅が300ピクセル(px)以上のときに、イベント(Function)が実行されます。
new wrapResize ("element_id", event, "width > 300 && height > 300");
3. 複数の条件での指定 (or)
横幅が300ピクセル(px)以上、または、縦幅が300ピクセル(px)以上のときに、イベント(Function)が実行されます。
new wrapResize ("element_id", event, "width > 300 || height > 300");条件式は対象となるelement_idのサイズに対して行います、ウインドウサイズでは無い点に注意してください。
対応ブラウザ
- InternetExplore 6.x, 7.0 or later
- Firefox 1.5, 2.0 or later
- Opera 9.x or later
- Safari 1.2 or later, Safari for Windows 3.0
ライセンス
- The wrapResize is licensed under a Creative Commons License. It is provided "as is" and without warranty of any kind.
- 個人利用（非営利）の場合無償でご利用いただけます。商用利用、またはカスタマイズをしての利用は $30 (3,500円) ライセンスを取得してください。ライセンスは以降のバージョンにも適用されます。
- 日本国内の送金は銀行振り込みも受け付けております、メールにてお問い合わせください。
サポート
wrapResizeのサポートはメールで受け付けております。バグレポートや機能要望などございましたら、ご連絡ください。 youmos.com@gmail.com
