Лучший способ кодировать большую кнопку переключения одним щелчком мыши, чтобы заменить один флажок и отправить форму кнопки? - PullRequest
Новая
       1

Лучший способ кодировать большую кнопку переключения одним щелчком мыши, чтобы заменить один флажок и отправить форму кнопки?

3 голосов
/ 26 сентября 2010

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

Учитывая простоту, я хотел бы заменить его одним DIV и графическим изображением переключателя или переключателя или чего-то еще, чтобы пользователи могли щелкнуть его, чтобы отметить, но не беспокоиться о глупом одиночном флажке и отправить кнопка, что довольно некрасиво.

Короткое и быстрое решение, которое я могу придумать, состоит в том, чтобы div был ссылкой типа

markme.php?id=XYZ&user=123

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

Это было бы разумно? Есть ли лучший способ?

/ я - начинающий энтузиаст

1 Ответ

6 голосов
/ 26 сентября 2010

Сделайте это <button>, с которым связано событие onclick, которое выполняет AJAX-запрос на отправку запроса некоторому обработчику страниц, который обновит базу данных или подобное, и при успешном завершении изменяет свой стиль CSS, чтобы сделать это выглядит нажатым.

Используйте jQuery для привязки события , AJAX-запрос и изменение класса CSS , и этот стиль должен работать, чтобы кнопка выглядит нажатой. 

<button type="button" id="btnPlay">Play</button>

Тогда: 

 $("#btnPlay").click(function(){

    var button = $(this) ;

    if (!button.hasClass('pressed')) {
        //button is unpressed
        $.post("ajax.php", { userId: "5512", action: "play" },
            function(data){
               button.addClass('pressed');
               button.html("Playing!") ;
            }
        );
    }
    else {
        //button is pressed, toggle it back
        $.post("ajax.php", { userId: "5512", action: "stopPlaying" },
            function(data){
               button.removeClass('pressed');
               button.html("Play") ;
            }
        );
    }


});
...