CSS 切换按钮？

Question

有可能在PhoneGAP中使用CSS切换按钮吗？ 我想要一个按钮，当被点击时改变颜色，再次点击时返回默认颜色。您有什么思路吗？

我已经编辑了我的帖子，这样你们帮助我就会更容易了，因为现在我真的很困惑该怎么做，这是一件简单但又棘手的事情。

  `This the function 

  function toggle(ths) {

   //CSS color
   $(ths).toggleClass("btnColor");
   $("#tb").toggleClass("btnColorR")

   //Get value clicked
   var clicked = $(ths).val();

   //diplay on web-page
   $("#lblType").html(clicked);
   $("#setCount").html(" minutes : " + minutes + " seconds : " + seconds);

   //duration time count
   seconds = seconds + 1;
   if (seconds % 60 == 0) {
      minutes += 1;
   seconds = 0;
 }
        timer = setTimeout("toggle()", 1000);   
  }


 The CSS

.btnColor
 {
 background-color:blue;  
 color:white;  
 }
.btnColorR {
 background-color:green;
}


  This is how my buttons are created.

 function createButtons(tbID, tbClass, tbType, tbValue, onClick) {
     return '\n<input '
        + (tbID ? ' id=\'' + tbID + '\'' : '')
        + (tbClass ? ' class=\'' + tbClass + '\'' : '')
        + (tbType ? ' type=\'' + tbType + '\'' : '')
        + (tbValue ? ' value=\'' + tbValue + '\'' : '')
        + (onClick ? ' onclick=\'toggle(this);' + onClick + '\'' : '')
        + '>';
 }

 function DisplayButtons(cableData) {
  var newContent = '';
   $.each(cableData,

    function (i, item) {
       newContent += createButtons("tb" + item.CommonCable, null, "submit",       item.CommonCable, toggle);
   });
   $("#planned").html(newContent);
 }`

- Bonesh

Answer 1

考虑您的按钮是#butt：

$("#butt").click(function(){
     $(this).toggle('red');
})

以及CSS：

.red{
 color:red;
}

- Mostafa Shahverdy

---

非常感谢，但仍然不起作用，我的CSS在我转移到Phonegap之前是可以工作的，我不知道为什么会出现这种情况，甚至在考虑也许我现在疯了。再次感谢。 - Bonesh

看看 $("#butt").click(function(){alert(1)}); 是否能正常工作。 - Mostafa Shahverdy

它不起作用，我可以编辑我的帖子并包含用CSS创建按钮的代码吗？ - Bonesh

Answer 2

function toggle(ths)
{
    if ($(ths).attr('class') == "btnColor") {
        $(ths).removeClass("btnColor");
        $(ths).addClass("btnColorR");
    } else {
        $(ths).removeClass("btnColorR");
        $(ths).addClass("btnColor");
    }
}

function createButtons(tbID, tbClass, tbType, tbValue, onClick)
{
    return '\n<input '
    + (tbID ? ' id=\'' + tbID + '\'' : '')
    + (tbClass ? ' class=\'' + tbClass + '\'' : '')
    + (tbType ? ' type=\'' + tbType + '\'' : '')
    + (tbValue ? ' value=\'' + tbValue + '\'' : '')
    + (onClick ? ' onclick=\''+onClick(this)+';\'' : '')
    + '>';
}

- Sagar

---

当我不使用PhoneGap时，它可以正常工作，但一旦我尝试在PhoneGap上运行它，它就无法工作。我认为我需要花些时间阅读PhoneGap的书籍。 - Bonesh

Answer 3

Phonegap是一个库，它可以帮助您的移动Web应用程序具备本地应用程序的所有功能。因此，在设计应用程序时，您可以使用任何东西，如html或任何js框架，如Sencha、Jquery、YUI、JQM等，并使用Phonegap制作应用程序包。

您将能够使用Phonegap类访问所有本机功能，如相机、联系人、加速度计等。因此，您的CSS切换按钮将在任何情况下都起作用。Phonegap不会做任何事情。

- amrit_neo

Answer 4

我认为你不需要使用JS，因为它可以仅通过CSS完成，具体取决于您的浏览器矩阵。基本上，您使用复选框，隐藏它并根据需要设置标签的样式。然后，您可以通过:checked和:not(:checked)选择器在单击时切换样式（请确保检查浏览器支持）。演示：http://custom-inputs.felixhagspiel.de/

我写了一篇关于如何仅使用CSS自定义复选框和单选按钮以及创建开/关切换开关的教程。也许这可以帮助您 :) 您可以根据需要更改样式。在此处阅读教程：http://blog.felixhagspiel.de/index.php/posts/custom-inputs

- Felix Hagspiel