2011-02-01 11 views
0

友達をイベントに招待するときに使用する1つのfacebookと同様のウィンドウを作成する方法に関するjQueryスクリプトやアイデアを探しています。jQueryのチェックボックススクリプトをfacebookとして招待する友達のウィンドウ

基本的にダイアログボックスの中に人のリストがあり、あなたの友人を選択すると背景色が変わり、その友達のチェックボックスがチェックされるので、フォームを送信するとデータを収集できます。

ありがとう、

+0

Facebookが使用しているModalをお探しですか? – kjy112

+0

はい。それは –

+0

で十分でしょうか?jQueryの代わりにMootoolsを使うのはいいですか?プラグインとして。 – kjy112

答えて

0

どうしてこのようなことがありますか?単純化しすぎ、これは...全体でポイントを取得する必要があります

マークアップ:

<div class="member"> 
    <span class="member_name">Mike</span> 
    <input type="checkbox" class="member_checkbox" /> 
    <input type="hidden" value="002" class="member_id" /> 
</div> 

メンバー選択のjavascript:

// .member-selected would set a new background color 
$(".member").click(function() { 

    $(this).addClass("member-selected"); 

    // Find the checkbox 
    var checkbox = $(this).find('.member_checkbox'); 

    // If the checkbox is checked, uncheck it, and 
    // if it's not, then check it 
    if($(checkbox).attr("checked") != true) { 
      $(checkbox).attr("checked", true); 
    } else { 
      $(checkbox).attr("checked" false); 
    } 

}); 

フォーム送信のjavascript:

// Create an array to hold ID numbers to submit 
var add_members = []; 

$(".member").each(function() { 

    if($(this).find('.member_checkbox').is(":checked")) { 

      add_members.push($(this).find('.member_id').val()); 

    } 
}); 

あなたは終わるだろうAJAXを使用して投稿できるメンバーIDの配列を使用します。

**クリック機能でEDIT **

(上記参照)をチェックしたり、現在の状態に基づいて、チェックボックスのチェックを外し、追加の行があるはずです。

+0

divをクリックするとjQuery関数がクリックを受け付けません。どんなアイデアが間違っていますか? –

+0

.memberスタイルでかなり高いZ-インデックスを定義して、異なる結果があるかどうかを確認してください。 – Mike

+0

私はそれをデバッグするために火薬爆弾を使用しているので、私はそれがクリックをピックアップしていないと確信しています。 –

0

EDIT:マイクの提案からJSBINを作成しました。あなたの問題を解決するのに役立ちます。チェックボックスをクリックすると、クラスが警告され、メンバーの選択が追加または削除され、toggleClass()が使用され、そのクラスが再び警告されます。それをチェックアウト:jsbin.com/uxuxu3/4/edit


を私はFacebookの「イベントに友人を招待」ウィンドウは、これらの日に見えますが、私はあなたがFaceboxに類似したモーダルを見つけるだろうと考えているのか分かりません。 Faceboxや他の、おそらくもっと良いオプションは、19 jQuery Modal Boxes to improve your UIでチェックしてください。

+0

Googleで解決策を探している間これを見た。これはスタイリングの問題ではなく機能的な質問のためのものではありません。 –

+0

マイクの提案からJSBINを作りました。あなたの問題を解決するのに役立ちます。チェックボックスをクリックすると、クラスが警告され、メンバーの選択が追加または削除され、toggleClass()が使用され、そのクラスが再び警告されます。それをチェックしてください:http://jsbin.com/uxuxu3/4/edit – slacktracer

関連する問題