언어 설정

Menu
Sites
Language
gear s2 app toggle button Event!

 

Hi.

I want to occur 'toggle button' switch event!

How can I do it?

I alreaty read API References..

Below is My code..

 

---------------------------------------------------<JavaScript>---------------------------------------------------

function init(){

   var lockActivationToggleBtn = getElementById('lockActivationBtn'),
      lockActivationToggleWidget = tau.widget.ToggleSwitch(lockActivationToggleBtn);

   lockActivationToggleBtn.addEventListener('click', function(){
      createHTML("toggleButtonClicked")
      if (lockActivationToggleWidget.value())
      {
         createHTML("Checked");
      }
      else
      {
         createHTML("Unchecked");
      }
   });
}

window.onload = init;

 

 

-----------------------------------------------------------------------------------------------------------------------

 

<HTML>

   <div id="page-list-lockManage" class="ui-page">
   
      <header class="ui-header">
         <h2 class="ui-title">잠금관리</h2>
      </header>
      
      <div class="ui-content">
         <ul class="ui-listview">
             <li id="lockActivation-control" class="li-has-toggle">
                 <!-- <label class="ui-custom-toggleswitch-label"> -->
                     <div class="ui-marquee ui-marquee-gradient">잠금 활성화
                     <div class="ui-toggleswitch">
                     <input id="lockActivationToggleBtn" type="checkbox" class="ui-switch-input">
                     <div class="ui-switch-button"></div>
                  </div>
               <!-- </label> -->
             </li>
         </ul>
      </div>
      
   </div>

 

 

목록

Responses

1 댓글
Armaan-Ul- Islam

Hello,

You can add event using javascript. I am sharing a sample code here.

 

HTML

<ul class="ui-listview">
    <li class="li-has-toggle">				
        <label> Toggle Button
            <div class="ui-toggleswitch">
                <input type="checkbox" class="ui-switch-input" id="toggle1" onchange="toggleAction(this.id)">
		    <div class="ui-switch-button"></div>
	     </div>
	</label>
    </li>
</ul>

<script type="text/javascript" src="lib/tau/wearable/js/tau.min.js"></script>
<script type="text/javascript" src="js/circle-helper.js"></script>
<script type="text/javascript" src="toggle.js"></script>

 

JavaScript

toggle.js

function toggleAction(id){
  if(document.getElementById(id).checked) {
    alert('On');
  }else{
    alert('Off');
  }
}

 

Please add the tau library for UI look or start from the template 'TAU Basic'.