ドラッグしたテキストで辞書検索出来るようにするjQueryプラグイン・Wordsmith

テキストをドラッグすると
アイコンが表示されて、ク
リックすると辞書サイト等
で検索結果を表示する、と
いうjQueryプラグインです。

用途は多くは無いかもしれませんけど、ちょっと面白かったので備忘録。ドラッグしたテキストに任意のサイトで検索結果を表示するリンクを表示させる、というもの。

Wordsmith

動作サンプル見たほうが早そうですね。サンプルはGoo辞書で検索出来るように、アイコンは任意の画像に変更して有ります。

確認出来ましたでしょうか。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript' src='wordsmith.js'></script>

コアとプラグインを読み込みます。

$('.foo').wordsmith();

指定したセレクタ内で辞書検索が適応されます。

$('.foo').wordsmith({
        maxWordLength: 20, //最大文字数
        popupWidth: 700, //ポップアップウィンドウの幅
        popupHeight: 450, //ポップアップウィンドウの高さ
        lookupImage: 'http://placehold.it/28x28', //アイコン画像のパス
        lookupMessage: '辞書検索する',//アイコンのtitle属性
        lookupUrl: 'http://dictionary.goo.ne.jp/srch/jn/{word}/m0u/'//辞書サイト
    });

オプションは上記の通り。lookupUrlオプションが辞書サイトの指定です。言葉が入る部分を{word}にします。

例えばWikipediaなら

lookupUrl: 'http://ja.wikipedia.org/wiki/{word}'

と書く。

辞書と書きましたけど、他の用途でも使えるかもしれませんね。割と便利な気がしないでもない。

Wordsmith