Сценарий флажка jQuery как окно приглашения друзей в Facebook - PullRequest
Новая
       30

Сценарий флажка jQuery как окно приглашения друзей в Facebook

0 голосов
/ 01 февраля 2011

Я ищу сценарий jQuery или идею о том, как создать окно, подобное тому, которое использует Facebook, когда вы приглашаете друзей на событие.

Таким образом, в основном это диалоговое окно со списком людей.внутри и когда вы выбираете своих друзей, он меняет цвет фона и проверяет флажок этого друга, чтобы при отправке формы я мог собирать данные.

Спасибо,

Ответы [ 2 ]

0 голосов
/ 02 февраля 2011

РЕДАКТИРОВАТЬ: Я сделал JSBIN по предложению Майка. Может помочь вам решить вашу проблему. Когда флажок установлен, его класс оповещается, а затем изменяется (выбранный элемент добавляется или удаляется, я использую toggleClass ()), а затем его класс снова получает предупреждение. Проверьте это: jsbin.com / uxuxu3 / 4 / edit

Я не знаю, как в эти дни выглядит окно "пригласить друзей на событие" в Facebook, но я верю, что вы найдете Facebox похожим модальным. Проверьте Facebox и другие, возможно, даже лучшие варианты, на 19 jQuery Modal Boxes, чтобы улучшить ваш интерфейс .

0 голосов
/ 01 февраля 2011

Как насчет этого? Упрощенно, но это должно понять суть ...

Markup: 

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

Member Select 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.

** РЕДАКТИРОВАТЬ **

В функции щелчка (см. Выше) должны быть дополнительные строки, которые проверяют или снимают флажок в зависимости от его текущего состояния.

...