jQueryでstripeな野良プラグイン
気の向くままにまた jQuery の野良プラグイン。
今度はリストとかテーブルをシマ模様にしてみたよ。 $.stripeSettings に全体共通の設定を仕込んでおいて、 $(...).stripe の引数で上書きする。 どっちも省略出来るけど、どっちかやらないと何も変わらない。
内容はこんな感じ。
/**
* stripe.js
*/
if (jQuery.stripeSettings === window.undefined)
jQuery.stripeSettings = {};
jQuery.stripeSettings.even = {};
jQuery.stripeSettings.odd = {};
jQuery.fn.extend({
stripe : function (o)
{
o = o || {};
// Override default settings.
var even = jQuery.extend({}, jQuery.stripeSettings.even, o.even || {});
var odd = jQuery.extend({}, jQuery.stripeSettings.odd, o.odd || {});
return this.each(function ()
{
switch (this.nodeName.toLowerCase())
{
case 'ul':
case 'ol':
jQuery(this).children('li:even')
.css(even)
.end().children('li:odd')
.css(odd);
break;
case 'table':
$self = jQuery(this);
if ($self.children('tbody').size() > 0)
{
$self = $self.children('tbody');
}
$self.children('tr:even')
.css(even)
.end().children('tr:odd')
.css(odd);
break;
default:
break;
}//END: switch.
});//END: each.
}//END: stripe.
});//END: jQuery.fn.extend.
実際使うときはこんな感じ。
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(function ()
{
// 全体の設定。
$.stripeSettings = {
even : {
'background-color' : '#ffa0a0'
},
odd : {
'background-color' : '#a0a0ff'
}
};
// id="hige"の中のtableにstripeを付ける。
$('#hige table').stripe();
// 個別にオーバーライドする場合。
var settings = {
even : {
'background-color' : '#ffa0a0'
}
};
// class="stripe"なul, ol, tableにstripeを付ける。
$('.stripe').stripe(settings);
});
//]]>
</script>
引数は色だけに固定してないので、 jQuery から渡せるCSSは一通り渡せる（ハズ）。
やっつけな部分が見え隠れしてたりするものの、まぁそのへんはご愛嬌。 946 な方、またもサンプルが用意出来てなくてすいません。
- Posted at:
- 2007/09/24 03:44:19
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2007/09/24/jquery-stripe-nora-plugin/trackback/
TrackBacks
まだ登録されていません。
Comments
まだ登録されていません。