• かちびと.net

    ドラッグしたテキストで辞書検索出来るようにするjQueryプラグイン・Wordsmithのご紹介。任意の辞書サイトに対応可能です。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ドラッグしたテキストで辞書検索出来るようにする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

URL :
TRB :

Ads

Posts

Contact

Services