Is it possible to have a CSS toggle button in PhoneGAP ? I want a button that changes color if clicked and when clicked again it must go back to default color . Any idea how to do it in ?

I've edited my post my it can be easy fro you guys to help me out ,because now i'm really confused on how to do this,the simple stuff but trick.

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

Is it possible to have a CSS toggle button in PhoneGAP ? I want a button that changes color if clicked and when clicked again it must go back to default color . Any idea how to do it in ?

I've edited my post my it can be easy fro you guys to help me out ,because now i'm really confused on how to do this,the simple stuff but trick.

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

• javascript
• jquery
• css
• cordova

Share Improve this question Follow edited Apr 4, 2013 at 8:40 Ibonesh asked Apr 4, 2013 at 6:47 IboneshIbonesh 83722 gold badges1010 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

consider that your button is #butt:

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

and CSS:

.red{
 color:red;
}

Phonegap is a library which helps your mobile web app have all the features of a native appliccation. So for designing your application you can use anything like html or any js framework like Sencha, Jquery, YUI, JQM..etc. and make application package using phonegap.

You will be able to access all the native features like camera, contacts, acclerometers..etc using the Phonegap classes. So your CSS toggle button will work in any case. There is nothing Phonegap will do.

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

I dont think you need JS for that, because it can be done with CSS only depending on your browser matrix. Basically you use a checkbox, hide it and style the belonging label how you need it. Then you can switch the styling via the :checked and :not(:checked) selectors on clivk (be sure to check browser support). Demo: http://custom-inputs.felixhagspiel.de/

I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off toggle switches. Maybe this helps :) You can change the styling as you want. Read the tutorial here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs