Tag/plugin
jQueryでaタグをサムネイルにするプラグイン書いたよ。
abdeluxe な方にお願いされて、またまた調子に乗りました。
今回はaタグをサムネイルにする jQuery の野良プラグイン書いたよ ![]()
こんな感じにするとaタグがサムネイル画像になる。(実際はもうちょっとメンドクサイ)
// コレがデフォルト
$('a').asThumbnail();
サイズもちゃんと指定出来るよ。当たり前だけども。
// 引数でオプションを指定
$('a').asThumbnail({
width: 100,
height: 100
});
で、どうやって画像のパスを指定するかと言うと、 ぶっちゃけaタグの href 属性を正規表現で抜いてきて、 それを CSS で背景に指定してあげるだけ。 使い勝手が良いんだか悪いんだか分からんですが、 とりあえずソースを晒しておきます。
/**
* show element(s) as thumbnail
*
* @author Takanobu Izukawa
* @version 0.0.1
*/
jQuery.fn.extend({
/**
* asThumbnail
*
* @param options Object that contains some parameter.
* width: specified element width.
* default value is 170px.
* height: specified element height.
* default value is 170px.
* pattern: specified retrievable regex pattern.
* default value is `abdeluxe` custom.
* replacement: specified replace format.
* default value is `abdeluxe` custom.
* @return jQuery.
*/
asThumbnail: function (options)
{
// fix options.
options = options || {};
// declared default options.
var defaultOptions = {
'width': 170,
'height': 170,
'pattern': /^.*\/(\d+)\.html$/,
'replacement': '/blog/entryimg/$1.jpg'
};
// merge options.
options = jQuery.extend({}, defaultOptions, options);
// execute effect to each element(s).
return this.filter('a')
.each(function()
{
// retrieve image url.
var imageURL = this.href.replace(options.pattern,
options.replacement);
// attach new css.
jQuery(this).css({
'display': 'block',
'width': options.width + 'px', // should be width method instead?
'height': options.height + 'px', // should be height method instead?
'background-image': 'url(' + imageURL + ')',
'background-repeat': 'no-repeat',
'background-position': '50% 50%'
}).empty();
}).end();
}
});
たぶん、画像の position とかは指定出来た方が良いんだろうなぁ。
まぁ、そこらへんは勢いで作ったのでご愛嬌 ![]()
ツッコミ大歓迎でございます!
- Posted at:
- 2008/03/19 03:02:49
- 2 Comments
- 2 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2008/03/19/make-anchor2thumbnail-plugin-on-jquery/trackback/
monologista用AutoPagerizeのSITEINFO書いたよ。
monologista を Greasemonkey の AutoPagerize に対応させて欲しい! って話が出てたんで、頼まれてもないのにやってみたよ。
で、結論出来た。
けど、どこで晒せば良いのか分からなかったので、 とりあえずココで晒しておくよ。
url: http://monologista.jp/.*?,
nextLink: id("contents")/p[@class="pagination"]/a[last()],
pageElement: id("contents")/div,
insertBefore: id("contents")/p[@class="pagination"],
exampleUrl: http://monologista.jp/?page=nsIObserver
一応、 AutoPagerize (swdyh) にある書き方に沿って書いたから、 jsにベタで貼る時はシングルクォートが要るよ。
慣れてないと、このスクロール感がキモいなぁ ![]()
- Posted at:
- 2008/03/17 01:54:39
- 0 Comments
- 1 TrackBack
- Trackback:
- http://humming.via-kitchen.com/2008/03/17/wrote-autopagerize-siteinfo-of-monologista/trackback/
jquery.hotkeys.jsを試してみたよ。
jQuery のプラグイン jquery.hotkeys.js を試してみたよ。
ダウンロードは js-hotkeys - Google Code から。 落としてきたものを展開するんだけれども、 カレントディレクトリに散乱してしまうのでディレクトリを掘った方が良いと思う。
展開した中に入っている jquery.hotkeys.js がそれ。 一緒に入ってる jQuery は 1.1.4なものの、 1.2.1もサポートされているみたいなので気にせず1.2.1で動かす。 サンプル的な動きは Live Demo を見るのが良いと思う。
インターフェイスはこうなってるらしい。
// イベント設定。
$.hotkeys.add(KEY, OPTIONS, CALLBACK);
// イベント削除。
$.hotkey.remove(KEY, OPTIONS);
引数の中で、 OPTIONS はオプションで、 特に指定が無ければ省略出来るよ。 なので、一番簡単な使い方はこんな感じになる。
// "j"のkeydown(デフォルト)にイベントリスナーを設定。
$.hotkeys.add('j', function ()
{
alert('hit.');
});
// "j"のkeydown(デフォルト)のイベントリスナーを削除。
$.hotkeys.remove('j');
オプションは以下のようなものがある。
| キー | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| type | String | keydown | 補足するイベント |
| propagate | Boolean | false | イベントの伝達を制御 |
| disableInInput | Boolean | false | inputやtextareaのフォーカス時の処理を制御 |
| target | element/String | html | callbackのthisを指定 |
| checkParent | Boolean | true | OperaとSafariのバグ依存回避用? |
オプション指定する場合こんな感じ。
// "Ctrl+a"のkeyupにイベントリスナーを設定。
$.hotkeys.add('Ctrl+a',
{
target : 'div.select',
type : 'keyup'
}, function()
{
// クラスhigeをトグル。
$(this).toggleClass('hige');
});
// "Ctrl+a"のイベントリスナーを削除。
$.hotkeys.remove('Ctrl+a', {target: 'div.select'});
このオプションの中でも良く使うと思うのが、 type はまぁ良しとして、 disableInInput だと思う。 これ、物凄く便利っす。 こいつを true にしておくだけで、 input や textarea にフォーカスしてる時は処理をスルーしてくれる。 今回はフォームとは全く関係ない処理を書いてたので、 本当に助かった。
何となくですが、今回書いたものを晒してみたり。 jとkでh1〜h6を行ったり来たりするだけ。
(function ()
{
// hotkeysのオプションを定義。
var options = {
'type': 'keydown',
'disableInInput': true
}
// ポジションホルダー
var positions = [0];
// それぞれのヘッダの位置を取ってくる。
$('h1, h2, h3, h4, h5, h6').each(function ()
{
positions.push(this.offsetTop + 15);
});
// ソート。
positions.sort(function (a, b)
{
return a > b ? 1 : -1;
});
// 現在の位置を取得する関数を定義。
var getOffset = function ()
{
if ($.browser.msie)
return document.body.scrollTop || document.documentElement.scrollTop;
else
return window.pageYOffset;
}
// "j"にイベントリスナーを登録。
$.hotkeys.add('j', options, function ()
{
var offset = getOffset();
for (var i = 0; i < positions.length; i++)
{
if (offset < positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
// "k"にイベントリスナーを登録。
$.hotkeys.add('k', options, function ()
{
var offset = getOffset();
for (var i = positions.length; i >= 0; --i)
{
if (offset > positions[i])
{
window.scrollTo(0, positions[i]);
break;
}
}
});
})();//END: lambda.
- Posted at:
- 2008/01/07 23:34:25
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2008/01/07/tried-using-js-hotkeys/trackback/
snippetsEmu.vimメモ
snippetsEmu.vim が更新されてたので入れ直したよ。 そのせいで自分で書き換えた部分が全部ぶっ飛んでしまったのは秘密です。
結構使い勝手が良くて使い続けているものの、キーバインドを <TAB> のまま使っていたので、 普通にタブを入れたいときでも反応してしまいイライラする事もしばしば。 良いタイミングなので、キーバインドも変えてしまおうと思って色々調べてみた。
if exists('loaded_snippet')
imap <C-B> <Plug>Jumper
endif
これを .vimrc を書くと \C-b に変えれるらしい。が、変わらなかった。 if文をコメントアウトしてやると動いたので、書く場所が悪いんだろうと推測。
良く分からないながらに snippetsEmu.vim を眺めてみると、165行目付近に、
function! s:SnipMapKeys()
if (!hasmapto('<Plug>Jumper','i'))
if s:supInstalled == 1
exec 'imap '.g:snippetsEmu_key.' <Plug>Jumper' "<--ココとか
else
exec 'imap <unique> '.g:snippetsEmu_key.' <Plug>Jumper' "<--ココとか
endif
endif
g:snippetsEmu_key ってのを使って定義してる。こいつで検索してみる。 と、125行目付近に、
if !exists("g:snippetsEmu_key")
let g:snippetsEmu_key = "<Tab>" "<--ココ
endif
とか、 g:snippetsEmu_key が定義されてなければ <TAB> を使うらしい。 ので .vimrc にコイツを定義してみる。
let g:snippetsEmu_key = "<C-B>"
これでちゃんと \C-b で動くようになったよ。 間違って反応する事が無くなって、抜群に書き易くなった。 こういう細かい事が、意外に物っ凄い嬉しかったりするなぁ。
snippetsEmu.vim は snippetsEmu - An attempt to emulate TextMate's snippet expansion : vim online からダウンロード出来るっす。
- Posted at:
- 2007/10/08 00:27:50
- 0 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/10/08/snippetsemu-memo/trackback/
TextMateでvimキーバインド
ViMate っていう TextMate で vim のキーバインドを使えるようにするプラグイン。
結構前に入れたものの、使い勝手がイマイチで使ってなかった。
改めて使ってみると結構いい感じ。 一通り良く使うものは実装されてるっぽいよ。 でも、やっぱり \C-[ はダメみたい。 escape は遠いんだよなぁ。
実際使うにはまだもうちょっと。 入れといても邪魔にはならないから良いけどね。
- Posted at:
- 2007/09/30 04:51:51
- 0 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/09/30/vim-keybind-on-textmate/trackback/
stripe野良プラグインを修正
946 な方から色々指摘を受けて修正しました。
- CSSの指定からクラス名の指定にした。
- tableの場合の修正。
/**
* stripe.js
*/
jQuery.fn.extend({
stripe : function (o)
{
o = o || {};
var even = o.even || 'even';
var odd = o.odd || 'odd';
return this.each(function ()
{
switch (this.nodeName.toLowerCase())
{
case 'ul':
case 'ol':
jQuery(this).children('li:even')
.addClass(even)
.end().children('li:odd')
.addclass(odd);
break;
case 'table':
jQuery(this).children('tbody')
.children('tr:even')
.addClass(even)
.end().children('tr:odd')
.addClass(odd);
break;
default:
break;
}//END: switch.
});//END: each.
}//END: stripe.
});//END: jQuery.fn.extend.
しょせんは野良な訳ですがw
って思ってたら 946 な人の こんなエントリー が。 なんだ、プラグインじゃなくて良かったのか。
- Posted at:
- 2007/09/25 20:29:54
- 2 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2007/09/25/modified-jquery-stripe-nora-plugin/trackback/
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/
jQueryでpopupな野良プラグイン
jQuery でpopupなプラグインを作ってみたよ。
たしか既に公開されてるのがあったような気がするけど、 引数の種類とか思い出す為にも自作してみた。
jQuery.extend({//START: jQuery.extend.
/**
* flattenAttrs.
*/
flattenAttrs : function (o, s)
{
var retval = []
$.each(o||{}, function (k, v)
{
retval.push(k+'='+v);
});
return retval.join(s||',');
}//END: flattenAttrs.
});//END: jQuery.extend.
jQuery.fn.extend({//START: jQuery.fn.extend.
/**
* popup.
*/
popup : function (name, options)
{
var settings = {
'titlebar' : 'no',
'resizable' : 'yes',
'scrollbars' : 'yes',
'left' : screen.width,
'top' : screen.height,
'width' : screen.availWidth,
'height' : screen.availHeight
}
options = jQuery.extend({}, settings, options||{});
name = name || 'piggy';
return this.filter('a[href]')
.click(function (evt)
{
window
.open(this.href, name, jQuery.flattenAttrs(options))
.focus();
return false;
})
.end();
}//END: popup.
});//END: jQuery.fn.extend.
これを読み込ませておいて、使うときはこんな感じ。
<script type="text/javascript">
//<![CDATA[
$(function (){
$('a.popup').popup();
});
//]]>
</script>
見事に車輪です。
- Posted at:
- 2007/09/23 05:23:52
- 0 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- plugin
- Trackback:
- http://humming.via-kitchen.com/2007/09/23/jquery-popup-nora-plugin/trackback/
vimでsnippet
最近 vim を使う事が何かと多くなってきてるのですが、 今まで TextMate を使って来てたのもあって、HTMLとか書く時結構ツライ。
何か良いプラグイン無いかな?と探してみたら snippetsEmu ってプラグインを発見!
これ、拡張子が .vba だけど、どうやって入れるの?と思ってた矢先に ZeroMemory さんの コチラのエントリー を見つけた。ので、これに従ってインストールしてみる。
そう言えば、 snippetsEmu のページに $HOME/.vim/after/ftplugin なディレクトリを作ってからインストールしてね。みたいな事が書いてあったので、まずは作っておく。
$ mkdir ~/.vim/after
$ mkdir ~/.vim/after/ftplugin
で、落として来た snippetsEmu.vba を vim で開いて以下を実行。
:source %
なんか見慣れないアラートみたいなのが画面いっぱいに表示される。 画面下に more な文字が出ているのでとりあえず最後まで見る。(コレを途中で止めるとインストールも途中で止まっちゃう!)
後は .vimrc に一行追加しておしまい。
filetype plugin on
適当にHTMLなファイル開いて doctype<TAB> とかやるとDOCTYPE宣言が補完されます。他にもたくさんあって、 TextMate の snippet さながらの動きをしてくれます。素敵。
デフォルトだと余計なものまで吐いたり、ちょっと気持ち悪かったりしたので、 $HOME/.vim/after/plugin の中にあるファイルを修正して回避。使っていくうちに自分で拡張していけばかなり感じになりそう。
vim7 required なので、インストールする前にご確認を。
- Posted at:
- 2007/08/12 17:34:11
- 0 Comments
- 0 TrackBacks
- Trackback:
- http://humming.via-kitchen.com/2007/08/12/snippet-on-vim/trackback/