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 とかは指定出来た方が良いんだろうなぁ。 まぁ、そこらへんは勢いで作ったのでご愛嬌 :-P

ツッコミ大歓迎でございます!

Posted at: 
2008/03/19 03:02:49
2 Comments
2 TrackBacks
Tags: 
design
JavaScript
jQuery
plugin
Trackback: 
http://humming.via-kitchen.com/2008/03/19/make-anchor2thumbnail-plugin-on-jquery/trackback/

monologista用AutoPagerizeのSITEINFO書いたよ。

monologistaGreasemonkeyAutoPagerize に対応させて欲しい! って話が出てたんで、頼まれてもないのにやってみたよ。

で、結論出来た。

けど、どこで晒せば良いのか分からなかったので、 とりあえずココで晒しておくよ。

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にベタで貼る時はシングルクォートが要るよ。

慣れてないと、このスクロール感がキモいなぁ :-P

Posted at: 
2008/03/17 01:54:39
0 Comments
1 TrackBack
Tags: 
Firefox
Greasemonkey
JavaScript
plugin
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 にしておくだけで、 inputtextarea にフォーカスしてる時は処理をスルーしてくれる。 今回はフォームとは全く関係ない処理を書いてたので、 本当に助かった。

何となくですが、今回書いたものを晒してみたり。 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.vimsnippetsEmu - An attempt to emulate TextMate's snippet expansion : vim online からダウンロード出来るっす。

Posted at: 
2007/10/08 00:27:50
0 Comments
0 TrackBacks
Tags: 
plugin
vim
Trackback: 
http://humming.via-kitchen.com/2007/10/08/snippetsemu-memo/trackback/

TextMateでvimキーバインド

ViMate っていう TextMatevim のキーバインドを使えるようにするプラグイン。

結構前に入れたものの、使い勝手がイマイチで使ってなかった。

改めて使ってみると結構いい感じ。 一通り良く使うものは実装されてるっぽいよ。 でも、やっぱり \C-[ はダメみたい。 escape は遠いんだよなぁ。

実際使うにはまだもうちょっと。 入れといても邪魔にはならないから良いけどね。

Posted at: 
2007/09/30 04:51:51
0 Comments
0 TrackBacks
Tags: 
plugin
TextMate
vim
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.vbavim で開いて以下を実行。

:source %

なんか見慣れないアラートみたいなのが画面いっぱいに表示される。 画面下に more な文字が出ているのでとりあえず最後まで見る。(コレを途中で止めるとインストールも途中で止まっちゃう!)

後は .vimrc に一行追加しておしまい。

filetype plugin on

適当にHTMLなファイル開いて doctype<TAB> とかやるとDOCTYPE宣言が補完されます。他にもたくさんあって、 TextMatesnippet さながらの動きをしてくれます。素敵。

デフォルトだと余計なものまで吐いたり、ちょっと気持ち悪かったりしたので、 $HOME/.vim/after/plugin の中にあるファイルを修正して回避。使っていくうちに自分で拡張していけばかなり感じになりそう。

vim7 required なので、インストールする前にご確認を。

Posted at: 
2007/08/12 17:34:11
0 Comments
0 TrackBacks
Tags: 
plugin
vim
Trackback: 
http://humming.via-kitchen.com/2007/08/12/snippet-on-vim/trackback/

Categories

Archives