0

複数のリンクでフェイスボックス（ライトボックススタイルのdiv）を開くページを作成しています。

div内のページ上のリンクの場合#artworks-col、フェイスボックスを800px幅で強制的に開くようにします。他のすべての場合は、デフォルトの計算を使用するだけです。

これをページに配置すると、すべてのリンクが800px幅で開くように強制されます。

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

しかし、内のリンクにのみ適用するように何度も試みた後で#artworks-colも、すべてにのみ適用するか、まったく適用しないようにすることができます。このバインドイベントをフィルタリングして、リンクのサブセットに固有にする方法はありますか？

これを実行できると思った唯一の方法は$("a#artworks-col").click(var flag = true);、ドキュメント全体のバインドイベントでそのフラグを使用して確認することです（幅の変更を実行した後、バインドイベントでフラグをクリアすることです）が、実際にはそう思われます厄介で、これを行うためのより良い方法があるはずです。

このページのRoRビューは次のとおりです（これが機能すると、スクリプトは外部ファイルに移動されることに注意してください。今のところ、すべてを1か所にまとめる方が簡単です）。

<div id="admin_logo">
    <%= image_tag("logo_admin.png", alt: "Administration") %>
</div>
<div id="artworks-col"><%= render partial: "artworks_list" %></div>
<div id="artists-col"><%= render partial: "artists_list" %></div>
<div id="locations-col"><%= render partial: "locations_list" %></div>
<div id="insurers-col"><%= render partial: "insurers_list" %></div>
<div id="users-col"><%= render partial: "users_list" %></div>

<div id="show-object" style="display:none;"></div>

<script type="text/javascript">
  $(document).bind('beforeReveal.facebox', function() { $('#facebox .content').css('width', '800'); });
</script>

上記のerbコードの部分レンダリング<a href>は、データベース内のそのタイプのすべてのオブジェクトのリストを追加するだけです。これらのリンクは、この機能を適用したいリンクです。

編集

これをjQueryで希望どおりに機能させることができないため、CSSを使用して回避策を導入し、特定のリンクがクリックされたときに表示される幅800pxのdivを定義します。より動的なアプローチが必要な他の状況で使用されるため、jQueryを介してこれを行うことをお勧めしますが、今のところこれを行う必要があります。

4

3 に答える 3

1

編集：ワーキングアンサー

ここに例の作業バージョンをアップロードしました：http：//fluidev.com/stack/fbox/test.html

これは、個別のクリックイベントをバインドし、それぞれに異なる幅を実現する方法です。コールバック関数（最初の呼び出し関数が完了した後に実行される関数）を使用することで、フェイスボックスのロード後に発生した場合でも、さまざまなセット幅の錯覚を実現できます。これのすごいところは、必要に応じてアニメーションなどを使用して幅を変更できることです。

$(document).ready(function() {
        $("#artworks-col").bind("click", function() {
            $.facebox({ div: '#artworks-col' }, function() { $('#facebox .content').css('width', '800px'); } ); 
        });
        $("#artists-col").bind("click", function() {
            $.facebox({ div: '#artists-col' }, function() { $('#facebox .content').css('width', '200px'); } ); 
        });
    });
于 2012-10-10T02:09:30.817 に答える
0

あなたのマークアップをもっと見ることなく、私はあなたがこのような何かを意味していると仮定することができるだけです：

$(document).bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', 'auto');
});
$('div#artworks-col a').click(function (e) {
    $('#facebox .content').css('width', '800px');
});
//Try doing this instead, but I suspect links outside $('div#artworks-col a')
//will also set the width to 800px...
$('#facebox .content').bind('beforeReveal.facebox', function () {
    $('#facebox .content').css('width', '800px');
});
于 2012-10-10T02:03:56.517 に答える
0

これを試してください..jQuery1.7以降で使用可能な.on（）を使用してください。

$(document).on('beforeReveal.facebox','#artworks-col', function() { 

              $('#facebox .content').css('width', '800'); 
 });

ページに同じIDの要素が複数あるようです。代わりにクラスを使用してみてください。

于 2012-10-10T02:04:16.713 に答える