任意のclassを振った要素にメールアドレスを自動挿入するMooToolsクラスです。
@やドットを置換するっていうのはヴァニラJSやver1.1で昔書いたけど、
@の前後にある文字列を置換する手もあるなあと。substituteの説明見てたら思いついた次第。
(X)HTMLソースは出力したい場所の要素にclassをつけるだけ。
body以下を対象にオプションで指定された要素があるかどうかを判別するので、タグやクラス名はなんでもいい。
<span class="email">Mail to Us? Please Enable JavaScript on you Browser.</span>
中に入っているテキストやHTMLはクリアされる。
画像作るの面倒でメッセージにしたけど、代わりに入れておくならメアド画像がおすすめ。
出力されるHTMLは以下2種類。
mailtoリンクを有りにした場合:
<span class="email"><a href="mailto:info@example.com" title="メールを送信">info@example.com</a></span>
リンク無しの場合:
<span class="email">info@example.com</a>
Source
動作にはMooTools-Core ver1.2以上が必要です。
var hideEmail = new Class({ Implements: [Options], options: { target:".email", before:'info', domain:'example.com', mailto:true, atitle:'メールを送信' }, initialize: function(options){ this.setOptions(options); var add = "{b}@{d}".substitute({b:this.options.before,d:this.options.domain}); $$(this.options.target).set("html",""); if(this.options.mailto) $$(this.options.target).grab(new Element("a",{'href':'mailto:'+add,'title':this.options.atitle,'html':add})); else $$(this.options.target).set("html",add); } });
Options
(タイプ/デフォルト値)
- target
- (misc/”.email”) メアド挿入先の要素。CSSセレクタの文字列、HTMLオブジェクト、オブジェクトが入った配列などで指定。»Function: $$
- before
- (string/”info”) @より前の文字列
- domain
- (string/”example.com”) @より後ろの文字列。通常はドメイン
- mailto
- (bool/true) mailtoリンクにするかどうか。falseでテキストのみになる。
- atitle
- (string/”メールを送信”) mailtoリンクのタイトル