Carpe Diem

  Top > スポンサー広告> JavaScript > ブロックレベル要素にリンクをつける  

スポンサーサイト

-- - --/-- [--] - --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ブロックレベル要素にリンクをつける

2013 - 04/20 [Sat] - 23:30

HTML5からはdiv要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいようになりました。
それによって、より使いやすいWebページが作成できるようになります。

イメージとしてはこんなサイトです。ここは今回使用するJavaScriptで実装をしていますが。

Demo

◆実装方法
実装の仕方としては、単純にaタグの中にブロックレベル要素を入れます。

<a href="http://www.yahoo.co.jp/">
    <div>
    <p> foo </p>
    <p> bar </p>
    </div>
<a>



◆問題点
しかしこの手法は、ブロックの中に別のリンクがある場合は使用できないです。

<a href="http://www.yahoo.co.jp/">
    <div>
    <p> foo </p>
    <a href="https://www.google.co.jp/">Google</a>
    <p> bar </p>
    </div>
<a>


だと構文エラーになり、最初のリンクしか使えません。マウスを乗せると他のリンクもリンク先を確認できますが、クリック先は最初のリンクのみになります。


◆解決方法
ブロックにもリンクをつけ、中のリンクも生きたままに出来る方法がありましたのでご紹介を。

jQuery plugin Biggerlink を用います。

まずはそれぞれのJavaScriptファイルをダウンロードしてHTMLソースに書き込みます。
jQuery
Biggerlink

書き方はこんな感じです。適宜自分のサイトに合わせてパスを変更してください。
<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>



◆使用方法
各.jsファイルをロードできるようにしたら、関数を定義します。以下の様にします。
<script type="text/javascript">
    $('.links li').biggerlink();
</script>


これによって
<ul class="links">
    <li><a href="http://www.fusion.com.au/">Fusion</a></li>
    <li><a href="http://jquery.com/">jQuery</a></li>
    <li><a href="http://www.google.com.au/">Google</a></li>

</ul>


のブロック要素が、文字の部分だけでなくブロックでリンク付けできるようになります。divなら
<script type="text/javascript">
    $('.links div').biggerlink();
</script>



<div class="links">
    <div><a href="http://www.fusion.com.au/">Fusion</a></div>
    <div><a href="http://jquery.com/">jQuery</a></div>
    <div><a href="http://www.google.com.au/">Google</a></div>

</div>

という感じですね。


◆複数リンクのブロックに
関数にはオプションを付けることが可能で、その1つが今回の「ブロックの中に複数リンクがあっても使える」手法です。

<script type="text/javascript">
    $('.links li').biggerlink({otherstriggermaster:false});
</script>


とすると

<ul class="links">
    <li>
        <h3><a href="http://www.fusion.com.au/">Fusion</a></h3>
        <p>Where Ollie works in Adelaide <a href="http://www.google.com/search?q=fusion">Google search</a></p>

    </li>
    <li>
        <h3><a href="http://jquery.com/">jQuery</a></h3>
        <p>The write less, do more, JavaScript library <a href="http://www.google.com/search?q=jquery">Google search</a></p>

    </li>
    <li>
        <h3><a href="http://www.google.com.au/">Google</a></h3>
        <p>Find out more about everything <a href="http://www.google.com/search?q=everything">Google search</a></p>

    </li>
</ul>



のように複数リンクがある場合でも、最初のリンクだけブロック全体にし、残りのリンクはそのまま生きたまま使えるようになります。


ソース:
HTML5では、div要素やh要素、p要素などのブロックレベル要素をa要素で囲っていいんです。
Biggerlink – jQuery plugin
div要素もリンクにするjavascript「jquery.biggerlink」


コメントの投稿





管理者にだけ表示を許可する

 | ホーム | 

プロフィール

Cicatrice

Author:Cicatrice
備忘録

検索フォーム

カテゴリ

最新記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。