3 に答える
$(function()
{
$('#linkid').click(function(e)
{
e.preventDefault();
$.colorbox({opacity:0.3, href: this.href});
});
});
そして、このようなリンクを作成します
<a href="ext/popup.php" id="linkid">click me</a>
アップデート
このロジックを複数のリンクに適用する場合は、IDの代わりにクラスを使用する必要があります
<a href="ext/popup.php" class="colorbox">click me</a>
そしてjqueryのターゲットは
$('.colorbox').click(...)
コメント
コードに関する一般的なコメント。andを使用する必要はありませ$(function(){..})
ん$(window).bind('load'
。
最初の部分は、DOM対応のイベントをバインドします。DOMロードの2番目。イベントの後に必ず来る
ので、直接行うことができますload
ready
$(window).load(function(){...});
ただし、ロードは、コード(通常は画像)を実行する前にサブ要素を完全にロードする必要がある場合にのみ使用する必要があります。
読む:http ://api.jquery.com/load-event/
$('a#yourLinkId').click(function(e){
// prevents default behaviour
e.preventDefault();
// your stuff
$.colorbox({opacity:0.3, href:"ext/popup.php"});
});
問題ない。ここ Stackoverflow で JQuery に関する質問をすることができます。
ご質問について。メイン ウィンドウに URL をロードするデフォルト アクションの代わりに、 JQuery を使用してColorBox内にページをロードしたいと思います。
次の 2 つのことを行う必要があります。
- イベント ハンドラーをすべてのアンカー タグ (
<a>
) にバインドして、それらがクリックされるたびにイベントが実行されるようにします。 - デフォルトのイベント ハンドラーが URL を開くのを防ぎます (preventDefault)
次のように、イベントをすべてのアンカー タグにバインドできます。
//for all links that exist on this page up to when this line is executed
$("a").click(function(){...});
on()
ただし、ボタンを使用してイベントをバインドすることをお勧めします。そうすれば、イベント バインディング コードの実行後にタグが作成された場合でも、すべての<a>
タグがこのイベント ハンドラーを実行します。
//for all links that are created on this page even after this lines of code is executed
$("a").on( "click", function(){...});
デフォルトのアクション (ページの参照) を防ぐには、preventDefault()メソッドを使用するだけです。
//assuming event argument is called e
e.preventDefault();
そうは言っても、コードは次のようになります。
<script type="text/javascript">
//this will run when the current document is loaded
$(document).ready(function(){
$("a").on("click",function(e){
e.preventDefault();
//$(this).attr("href") contains the href attribute of the <a> tag
$.colorbox({opacity:0.3, href:$(this).attr("href")});
});
});
</script>