JavaScriptいぢってるのは楽しいけど、書くことはまったく出来ないので、似たような機能を持つのが多い中でも選ぶ理由の一つが、class名が気に入るかとかhtmlがごちゃごちゃしないかとかそんな基準だったり。
んで、jQueryのプラグインの中でもjquery_autoさんがぼちぼち気に入ったけど、class名が！とか思ったので、いぢって自分用にしてみました。
そんな事してたら、他の便利なJavaScriptも足してみたくなったので、足したりしてたらこんなんなりましたっていうのを公開。
今回その実験に使わせていただいたJavaScriptたちは以下。
上記の色々なJSたちを自分用にしたサンプル？デモ？とダウンロードは以下。
見てお分かりのとおり、基本的には全部足しただけで別にどーこうってしてません。
主にclass名やらを自分の好みにして、重複しちゃってる機能を消したりという感じです。
こういうのはちょっとライセンス問題が気になるので、間違ってたらご指摘ください。
いちお、MIT LicenseとPublic Domainだったので、勘違いしてないか調べた限りでも、まぜまぜして公開するのはOKだったので公開してます。
いぢった部分の詳細をば。
まずは、jQuery_Auto.jsの変更箇所。
$.auto.hide
「.Hide」を「.noScript」でhiddenになるように。
$.auto.hover
yuga.jsで同じことが出来たので、消しました。
$.auto.tabs
- タブ切り替えの範囲を囲ってる要素のclass名を「.Tabs」から「.tabContainer」に。
- タブとして認識させるための、「.Tab」ってのがli要素につけなきゃいけないのを、ul要素でOKにしてclass名は「.Tab」から「.tab」に。
- タブの中身のclass名（div要素とか）は、「_body」とつけるのを「Body」に。
$.auto.submit
class名「.Submit」から、「.changeSubmit」に。
$.auto.select
class名「.Select」から、「.fieldSelect」に。
heightLine.jsの変更箇所
全くいぢってません。
ブロックレベル要素の高さを揃えてくれるJSで、かなり重宝します。
使いすぎると、JSをOFFってる環境でレイアウトがガタガタとかになり兼ねないので、min-heightプロパティとか使って最低限のレイアウトは確保するようにして、プラスアルファの機能として使うと良い感じだと思います。
詳細は、ブロックレベル要素の高さを揃えるheightLine.js[to-R]に。
続いてyuga.jsの変更箇所でも。
ロールオーバー
- 「.btn」でロールオーバーから、「.imgLink」で。
- src属性の変更が「_on」から「_over」に。
- class="imgLink"の子要素にimg要素でもロールオーバー。
子要素に適用されるっていう変更だけで、グローバルナビゲーションとかに使う際にスッキリ出来る感じ。
自分専用にしちゃうなら、「.nav」とかって具体的にclass名やらId名にしちゃえば、htmlは一番良い状態に出来ていいっすね。
thickbox、外部リンクは別ウインドウ設定
変更無し
現在のページへのリンク
img要素が含まれていたら現在用画像「_cr」から「_over」に。
するするアニメーション
$("body").ScrollToAnchors(500);
から
$(function(){
$('.pageTop a').click(function(){
$('#page').ScrollTo(500, 'easeout');
return false;
});
})
に変更。
タブ辺りがうまく動かなかったので、特定のclassがある場合だけに。
削除したの
- 奇数、偶数を自動追加
- :first-child, :last-childをクラスとして追加
- css3の:emptyをクラスとして追加
便利だけど、今回はいいかと思ったので消しちゃってます。
だいたいこんな感じです。
使い方とかは、サンプルをダウンロードして試してみてください。
まぁ、head要素内で読み込ませて、特定の条件やらを満たせば全部動くかと思います。