mailto:リンク機能を利用しやすくする jQuery プラグイン

mailto:~ と記述されたリンク要素をクリックするとメールクライアントの作成フォームが起動されるのはご存知でしょうか?Web メールが主流な昨今あまり見かけなくなりましたが、宛先や本文を指定することでメールテンプレートとしも利用できるので、企業内システムなどで活用すると結構便利かと思います。
Mailto は、そんな mailto リンク機能を利用しやすくする jQuery プラグインです。 jQuery Sitekit の一機能として、もしくは単独の jQuery プラグインとして使用することができます。

使い方

jQuery、Mailto(または jQuery Sitekit)の JS ファイルを読み込みます。

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script src="jquery.mailto.js"></script>


to, cc, bcc, subject, body パラメータを指定(省略可)し、$.mailto() メソッドを実行すると mailto:~ の URL が取得できます。

  1. var url = $.mailto({
  2. to : 'hoge.to@fuga.co.jp',
  3. cc : 'hoge.cc@fuga.co.jp',
  4. bcc : 'hoge.bcc@fuga.co.jp',
  5. subject : 'title',
  6. body : 'text'
  7. });

上記例では以下のような URL が取得できます。

  1. mailto:hoge.to@fuga.co.jp?cc=hoge.cc%40fuga.co.jp&bcc=hoge.bcc%40fuga.co.jp&subject=title&body=text


URL を割り当てたいリンク要素が存在してる場合は、対象要素を選択後 mailto() メソッドを実行します。

  1. $('a.mailto').mailto({
  2. to : 'hoge.to@fuga.co.jp',
  3. cc : 'hoge.cc@fuga.co.jp',
  4. bcc : 'hoge.bcc@fuga.co.jp',
  5. subject : 'title',
  6. body : 'text'
  7. });


$.mailto.call() メソッドを実行することで、直接、メールフォームを起動することもできます。

  1. $('button.send').on('click', function(){
  2. $.mailto.call({
  3. to : $('input.to').val(),
  4. cc : $('input.cc').val(),
  5. bcc : $('input.bcc').val(),
  6. subject : $('input.title').val(),
  7. body : $('textarea.message').val()
  8. });
  9. });

mailto

ダウンロード