jQuery_autoが入手できない？

以下覚書です。
つらつらとmootools以外でjqueryを使ってみたいと思ってググっていると、ロールオーバーでmootoolsのrolloverっぽいのをやるには、jquery_autoを使うようだ（yuga.jsでも大丈夫のようだけど）・・と思ったもののjquery_autoのリンクを辿るともう存在しない・・とは言えさすがのJP/s、ブログ系には配布がされていた。で、ロストを恐れて自分の所にも覚書をして公開して備えておきましょう。

まずSHOWZINEさんの記事で見つけた。ぴたっと貼り付けておきましょう。
これは僕の覚書なので、参照する人は上記SHOWZINEさんのページで内容を良く確認して、そっちからコピーしてね。

// jQuery_Auto 0.9
// Automatic functions for webpages (using the wonderful jQuery library)

// Copyright: (c) 2006, Michal Tatarynowicz (tatarynowicz@gmail.com)
// Licenced as Public Domain (http://creativecommons.org/licenses/publicdomain/)
// $Id: jquery_auto.js 426 2006-05-06 19:54:39Z Michał $

// Initialization

$.auto = {
init: function() {
for (module in $.auto) {
if ($.auto[module].init)
$.auto[module].init();
}
}
};

$(document).ready($.auto.init);

// Auto-hidden elements

$.auto.hide = {
init: function() {
$(’.noScript’).hide();
}
};

// Mouse hover

$.auto.hover = {

init: function() {
$(’IMG.Hover’)
.bind(’mouseover’, this.enter)
.bind(’mouseout’, this.exit)
.each(this.preload);
},

preload: function() {
this.preloaded = new Image;
this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, “$1_over$2″);
},

enter: function() {
this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, “$1_over$2″);
},

exit: function() {
this.src = this.src.replace(/^(.+)_over(\.[a-z]+)$/, “$1$2″);
}
};

// Auto-submitting SELECTs

$.auto.submit = {
init: function() {
$(’select.changeSubmit’).bind(’change’, this.on_change);
},

on_change: function() {
if (this.value) this.form.submit();
}
};

// Auto-selected text in text fields after a label click

$.auto.select = {
init: function() {
$(’label.fieldSelect’).each(this.label_action);
$(’input.fieldSelect’).bind(’click’, function(){ this.select(); });
},

label_action: function() {
var field = $(’#'+this.htmlFor).get(0);
if (field && field.focus && field.select) {
$(this).bind(’click’, function(){ field.focus(); field.select(); });
}
}
};

// Switches tabs on click

$.auto.tabs = {

init: function() {

$(’.tabContainer’).each(function(){
var f = $.auto.tabs.click;
var group = this;
$(’.tab li, li.tab’, group).each(function(){
this.group = group;
$(this).click(f);
$(’#'+this.id+’_Body’).hide();
}).filter(’:first’).trigger(’click’);
});

click: function() {
var tab = $(’#'+this.id+’_Body’).get(0);
$(’.tab li, li.tab’, this.group).each(function(){
$(this).removeClass(’active’);
$(’#'+this.id+’_Body’).hide();
});

$(this).addClass(’active’);
$(tab).show();
this.blur();

return false;
}

};

次はflat memoさんの記事で見つけた。これもDLしてぴたっと貼り付けておきましょう。
同じくこれは僕の覚書なので、参照する人は上記リンクのflat memoさんのページで内容を良く確認して、そっちからDLしてね。
「prototype.js とのコンフリクト解消版」という但し書きがあるし、DLしたサンプルはprototype.jsと併用を視野に入れたものなので、やはりflat memoさんでDLしよう。

// jQuery_Auto 0.9
// Automatic functions for webpages (using the wonderful jQuery library)

// prototype.js use $();
// jQuery use j$();
jQuery.noConflict();
var j$ = jQuery;

// Initialization

j$.auto = {
init: function() {
for (module in j$.auto) {
if (j$.auto[module].init)
j$.auto[module].init();
}
}
};

j$(document).ready(j$.auto.init);

// Auto-hidden elements

j$.auto.hide = {
init: function() {
j$('.Hide').hide();
}
};

// Mouse hover

j$.auto.hover = {

init: function() {
j$('IMG.Hover')
.bind('mouseover', this.enter)
.bind('mouseout', this.exit)
.each(this.preload);
},

preload: function() {
this.preloaded = new Image;
this.preloaded.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

enter: function() {
this.src = this.src.replace(/^(.+)(\.[a-z]+)$/, "$1_over$2");
},

exit: function() {
this.src = this.src.replace(/^(.+)_over(\.[a-z]+)$/, "$1$2");
}
};

// Auto-submitting SELECTs

j$.auto.submit = {
init: function() {
j$('SELECT.Submit').bind('change', this.on_change);
},

on_change: function() {
if (this.value) this.form.submit();
}
};

// Auto-selected text in text fields after a label click

j$.auto.select = {
init: function() {
j$('LABEL.Select').each(this.label_action);
j$('INPUT.Select').bind('click', function(){ this.select(); });
},

label_action: function() {
var field = j$('#'+this.htmlFor).get(0);
if (field && field.focus && field.select) {
j$(this).bind('click', function(){ field.focus(); field.select(); });
}
}
};

// Switches tabs on click

j$.auto.tabs = {

init: function() {

j$('.Tabs').each(function(){
var f = j$.auto.tabs.click;
var group = this;
j$('.Tab', group).each(function(){
this.group = group;
j$(this).click(f);
j$('#'+this.id+'_body').hide();
}).filter(':first').trigger('click');
});

click: function() {
var tab = j$('#'+this.id+'_body').get(0);
j$('.Tab', this.group).each(function(){
j$(this).removeClass('Active');
j$('#'+this.id+'_body').hide();
});

j$(this).addClass('Active');
j$(tab).show();
this.blur();

return false;
}

};

■ 1. scriptファイルを読み込ませます

■ 2. ロールオーバー画像ファイル名の最後に _over をつける。

例：　【image.gif】の場合　【image_over.gif】

■ 3. HTMLの＜img＞タグに属性 class="Hover" を追加する

以上の手順で完了。

・・ということです。

で、ロールオーバーと言うと、上記SHOWZINEさんの記事（同ページ）の参照ウール（URLですがｗ）を辿ると、

「JavaScript色々まぜまぜ。主にjQuery使ったヤツ」というcsshappylifeさんのかな？？、ページがあって、

そこではロールオーバーにyuga.jsを使ったパターンが掲載されています。これは、いつものrolloverの”imgタグのclassに特定名を指定するパターン”ではなくて・・・

”imgタグの親要素になるタグのclassに特定名を指定するパターン”の様子。うーん、これって結構いいかもしれない。

例えば、アプリケーションをカスタマイズする場合のように、imgタグ自体の書き換えが出来ないケースで、その親要素は変更可能な場合等にはいいんじゃないでしょうか。

以上