-PR-
解決
済み

シャドウボックスとjQueryを共存させるには

  • すぐに回答を!
  • 質問No.6827576
  • 閲覧数832
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 85% (76/89)

シャドウボックス3.0.3を利用しています。
チェックボックスを複数選択するjQueryをシャドウボックス内で利用したいのですが、
シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。
共存させるにはどのように記述を変えれば良いでしょうか?

<head>
<script type="text/javascript" src="../common/js/jquery-1.3.1.min.js"></script>

<!-- シャドウボックス -->
<script type="text/javascript" src="../common/js/shadowbox/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="../common/js/shadowbox/shadowbox.css">
<script type="text/javascript">
$(document).ready(function(){
Shadowbox.init();
});
</script>

<!-- チェックボックスの複数選択 -->
<script type="text/javascript">
$(function(){
$("#toggle").click(function(){
$('.chkbox').attr('checked', $(this).attr('checked'));
});
});
</script>
</head>

<body>
<a href="#inline" title="シャドウボックス" rel="shadowbox;width=900;height=1200">シャドウボックス</a>
<div id="inline" style="display:none">
<input type="checkbox" id="toggle"> toggle<br>
<br>
<input class="chkbox" type="checkbox" name="ids[]" value="1"> 1<br>
<input class="chkbox" type="checkbox" name="ids[]" value="2"> 2<br>
<input class="chkbox" type="checkbox" name="ids[]" value="3"> 3<br>
</div>
</body>
通報する
  • 回答数1
  • 気になる
    質問をブックマークします。
    マイページでまとめて確認できます。

質問者が選んだベストアンサー

  • 回答No.1
レベル14

ベストアンサー率 61% (1594/2576)

shadowboxってこれでしょうか?
http://shadowbox-js.com/

ちゃんとみてませんが、フレームワークを選択できるようになっているのみたいなので、jquery版を利用すればコンフリクトはおこらないと思いますが…? (ご質問文にないものを他に何か使っているのでしょうか?)


(試しに、jquery版でinlineHTMLのものをDLするとエラーで動作しなかったので、以下はstandalone版でテストしました)

>シャドウボックスとjQueryがコンフリクトしてしまうようで、実現できません。
上記のようにコンフリクトを避けていれば、動作はしているはずですが、ご提示の例だと動作しているようには見えないと思います。
理由は、shadowboxが表示しているのは、もともとHTMLに記述されている要素ではなく表示用のレイヤーに都度コピー生成されたソースだからです。
それなので、最初に設定したイベントはそのまま有効ですが、実際に表示している要素には設定されていないことになります。
(display:noneを消してみれば、動作していることが確認できることでしょう)

表示中に同じidの要素がコピーされているので一時的に文法違反になってしまいますが、それは置いておくとして、ご希望のように動作するためには、jqueryのliveでイベントを設定するか、または、documentなどにイベントを設定しておいて都度判断をするかということになるでしょう。

◇後者の例
$(document).ready(function(){
 Shadowbox.init(); //shadowboxの設定

 $(document).click(function(evt){
  var t = $(evt.target);
  if(t.attr("id")=="toggle")
   $('#toggle, .chkbox').attr('checked', t.attr('checked'));
 });
});

2つ存在するidで要素を特定しているのがとても気持ち悪いですが、とりあえず見かけ上は動作するようになります。(スクリプトでの処理はdisplay:noneの要素にも反映されます)
但し、個々のチェックボックス(toggleでないinput要素)をクリックした際の状態は元の要素には反映されませんので、shadowboxの表示を消すとその状態はどこにも残りません。

さらには、shadowboxは表示のために要素を生成する際に、チェックボックスのチェック状態まではコピーしてくれないようですので、元のソースに動的にチェックが入っていてもそれは無視されてしまい、表示する度に常に初期状となり、チェックの状態が保持されているようには見えないでしょう。


もしも、これらを解消しようとするのであれば、一時的に表示されるshdowboxの状態を常に元のHTMLに反映しておくようにするのがよろしいかと思われます。
幸いにも、shaowboxではいろいろなイベントフックが可能なようになっているようですので、
 onFinishで元ソースからチェック状態をコピーし
 onCloseでshadowboxの表示要素からチェック状態を元の要素にコピー
みたいなことで可能になると思われます。
http://shadowbox-js.com/options.html

HTML全体がどうなっているか不明ですが、shadowboxでの表示対象が他にもある場合は、上記の処理を無条件で行なうわけにはいかないので、対象となるid="toggle"のときだけ処理されるようにする必要があるでしょう。
お礼コメント
25taku

お礼率 85% (76/89)

返事が遅くなりすみません。
ありがとうございました!
投稿日時 - 2011-12-16 17:38:34
-PR-
-PR-
このQ&Aで解決しましたか?
関連するQ&A
-PR-
-PR-
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する
-PR-
-PR-
-PR-

特集


いま みんなが気になるQ&A

関連するQ&A

-PR-

ピックアップ

-PR-
ページ先頭へ