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);
 }`

Answer 1

请注意您的按钮是#butt：

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

和CSS：

.red{
 color:red;
}

Answer 2

Phonegap是一个图书馆，可帮助您的移动网络应用程序具有本机应用程序的所有功能。因此，对于设计应用程序，您可以使用任何类似html或任何js框架，如Sencha，Jquery，YUI，JQM..etc。并使用phonegap制作应用程序包。

您将能够使用Phonegap课程访问所有本机功能，如相机，联系人，acclerometers ..等。所以你的CSS切换按钮在任何情况下都可以使用。没有Phonegap会做的。

Answer 3

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)+';\'' : '')
    + '>';
}

Answer 4

我认为你不需要JS，因为它只能根据你的浏览器矩阵用CSS完成。基本上，您使用复选框，隐藏它并根据需要设置所属标签的样式。然后，您可以通过clivk上的:checked和:not(:checked)选择器切换样式（请务必检查浏览器支持）。演示：http://custom-inputs.felixhagspiel.de/

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

CSS切换按钮？

4 个答案: