jQueryのBiggerlinkプラグインでポップアップがしたかった

divタグとかをまるっとリンクにしたいときに利用するBiggerlinkライブラリ.
共同制作者の方のソースを改変して,ポップアップにしたいと思っていた.

日本語ではあまり情報がなかったので,公式に行きました.

With JavaScript pop-ups

Using JavaScript to open the link in a new window is one likely scenario where you will to want to prevent the link’s default action.

HTML as above. (Note the added title attributes will be applied to the <li> elements by the plugin).

<ul class="links">
    <li><a href="http://www.fusion.com.au/" title="Fusion web site in a
      new window">Fusion</a></li>
    <li><a href="http://jquery.com/" title="The write less, do more,
      JavaScript library">jQuery</a></li>
    <li><a href="http://www.google.com.au/" title="More about everything in
      a new window">Google</a></li>
</ul>

JavaScript. Setting follow to false ensures the link will not be followed by the browser as it would by default; Thus not interferring with the action os JavaScript pop-ups applied to the same link.

<script type="text/javascript"src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.biggerlink.js"></script>
<script type="text/javascript">
    $('.links a').click(function(){
        window.open(this.href);
        return false;
    });
    $('.links li').biggerlink({follow:false});
</script>

As of version 2 of biggerlink there is now a new default value for follow of 'auto'. In the code above where biggerlink is bound next after the pop-up event setting follow to false in unnecessary. If the click event before biggerlink returns false biggerlink will not cause the link to be followed. Any other events bound to the link will be triggered normally.

というわけで無事に解決.
ちゃんとポップアップしました.

カテゴリー: 技術的なこと パーマリンク