![Blog [Home]](http://higash.net/higash/wp-content/themes/higash/img/gnavi_blog.jpg)
痒いところに手が届くJavaScriptをバンドル化 — bundle.js
前回のエントリー 「痒いところに手が届くJavaScriptライブラリたち」 でリストアップしたJavaScriptのうち、画像のロールオーバーを自動化する smartRollover.js 、 テキストフィールドのフォーカス時に背景色を変更する colorful.js 、 1行おきにテーブルの背景色を変える Auto-striped table using Javascript 、 ページ内リンクのスムーススクロールを行う smoothscroll.js の4つのJavaScriptを、僕がWebサイトを作る際に（基本的に）必ず読み込むデフォルトのJavaScriptとしてバンドル化することにします。名付けて bundle.js 。
onloadのイベントハンドラで記述されたJavaScriptを複数読み込む場合、一般的なブラウザでは 一番最後に記述されたonloadイベントが優先されます 。従って、JavaScriptのバンドル化といっても単純にコピー&ペーストで、すべてのJavaScriptのソースをひとつのファイルにまとめればいいというものではありません（参考： 複数のjsライブラリを利用する際にonloadを書き換える方法[to-R] ）。
[to-R] さんのエントリーにある通り、addEventListener（attachEvent）を利用してこれらのJavaScriptをバンドル化することにします。
/*
---------------------------------------------------------
bundle.js ver 1.0 [2008/9/2]
*http://higash.net/20080902/bundljs.html
---------------------------------------------------------
*/
/*
---------------------------------------------------------
smartRollover
*Modify smartRollover.js
*http://css-happylife.com/log/javascript/000157.shtml
---------------------------------------------------------
*/
function smartRollover() {
if(document.getElementsByTagName) {
var images = document.getElementsByTagName("img");
var preImages = new Array();
for(var i=0; i < images.length; i++) {
if(images[i].getAttribute("src").match("_off.")) {
var preImage = new Image();
preImage.src =
images[i].getAttribute("src").replace("_off.", "_on.");
preImages.push(preImage);
images[i].onmouseover = function() {
this.setAttribute("src",
this.getAttribute("src").replace("_off.", "_on."));
}
images[i].onmouseout = function() {
this.setAttribute("src",
this.getAttribute("src").replace("_on.", "_off."));
}
}
}
}
}
/*
---------------------------------------------------------
inputColorInit
*Modify colorful.js
*http://espion.just-size.jp/archives/05/231211111.html
---------------------------------------------------------
*/
var colorful = new ColorfulInput;
var inputColorInit = function() {
colorful.set();
}
function ColorfulInput() {
// 処理をスキップしたい属性
this.skip = ['button','checkbox','radio','search','submit'];
// 処理をスキップしたいid
this.skip_id = ['#'];
this.color = { 'blur': '', 'focus': '#dcf7c1' };
this.set = function() {
var i;
for (i = 0; i < document.forms.length; i++) {
for (var f = 0; f < document.forms[i].length; f++) {
var elm = document.forms[i][f];
if(!this._checkSkip(elm)) continue;
this._setColor(elm, 'focus');
this._setColor(elm, 'blur');
}
}
};
this._checkSkip = function(elm) {
var i;
for(i in this.skip) {
if(elm.type == this.skip[i]) return false;
}
for(i in this.skip_id) {
if(elm.id == this.skip_id[i]) return false;
}
return true;
};
this._setColor = function(elm, type) {
var i;
var color = this.color[type];
var event = function() {
elm.style.backgroundColor = color;
};
if(elm.addEventListener) {
elm.addEventListener(type, event, false);
} else if(elm.attachEvent) {
elm.attachEvent('on'+type, event);
} else {
elm['on'+type] = event;
}
};
}
/*
---------------------------------------------------------
Auto-striped table
*Modify http://www.wellstyled.com/files/css-striped-tables/example02.html
*http://www.wellstyled.com/css-striped-tables.html
---------------------------------------------------------
*/
function init() {
stripeAllTables();
// stripeTableById('#');
}
function stripeTable(t) {
var i, odd = true;
for (i=0; i<t.rows.length; i++) {
t.rows[i].className += odd ? ' odd' : ' even';
odd = !odd;
}
}
function stripeTableById(id) {
var t = document.getElementById(id);
if (t) stripeTable(t);
}
function stripeAllTables() {
var t = document.getElementsByTagName('TABLE');
for (var i=0; i<t.length; i++) stripeTable(t[i])
}
/*
---------------------------------------------------------
Smooth scrolling
*Changes links that link to other parts
of this page to scroll
*smoothly to those links
rather than jump to them directly, which
*can be a little disorienting.
*sil, http://www.kryogenix.org/
*v1.0 2003-11-11
*v1.1 2005-06-16 wrap it up in an object
---------------------------------------------------------
*/
var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},
smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;
// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}
// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;
// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}
if (!destinationLink) destinationLink =
document.getElementById(anchor);
// If we didn't find a destination,
give up and let the browser do
// its thing
if (!destinationLink) return true;
// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}
// Stop any current scrolling
clearInterval(ss.INTERVAL);
cypos = ss.getCurrentYPos();
ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+', '+desty+',"'+anchor+'")',10);
// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},
scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll
// (i.e., we're at the bottom of the page)
// then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
},
getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement &&
document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},
addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}
ss.STEPS = 25;
/*
---------------------------------------------------------
addLoadEvent
---------------------------------------------------------
*/
function addOnLoadEvent(func) {
if (window.attachEvent){
window.attachEvent('onload', func);
}
else {
window.addEventListener('load', func, false);
}
}
addOnLoadEvent(smartRollover);
addOnLoadEvent(inputColorInit);
addOnLoadEvent(stripeAllTables);
addOnLoadEvent(ss.fixAllLinks);
bundle.jsについてまとめたHTML（bundle.js — HiGash.Net）を http://higash.net/bundlejs/ にアップしました。この bundle.js — HiGash.Net のファイル一式は下記リンクよりダウンロードしてご覧ください。
bundle.js — HiGash.Net（Zip圧縮・12.5KB）
- Share & Bookmark
