4

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

4 回答 4

5

考虑您的按钮是#butt：

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

和 CSS：

.red{
 color:red;
}
于 2013-04-04T06:52:13.293 回答
0 
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)+';\'' : '')
    + '>';
}
于 2013-04-04T10:56:23.873 回答
0

Phonegap 是一个库，可帮助您的移动 Web 应用程序具有本机应用程序的所有功能。因此，为了设计您的应用程序，您可以使用 html 之类的任何东西或任何 js 框架（例如 Sencha、Jquery、YUI、JQM..等）。并使用phonegap制作应用程序包。

您将能够使用 Phonegap 类访问所有本机功能，如相机、联系人、加速度计等。所以你的 CSS 切换按钮在任何情况下都可以工作。Phonegap 无能为力。

于 2013-04-04T07:06:49.263 回答
0

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

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

于 2015-01-19T11:19:11.033 回答