вкл/выкл переключатель в smartclient

Question

Я хочу, чтобы включить/выключить переключатель в моем проекте. Я использую Smartclient для javascript и html5, css. Есть ли способ предоставить пользователю возможность включения и выключения. Как у нас есть на сайте или в мобильном телефоне?

Answer 1

хорошо, вы можете голосовать мой (довольно старый) пост на их форуме http://forums.smartclient.com/forum/technical-q-a/32097-switchitem-for-smartclient-10

EDIT: с форматом нового форума, вы не можете голосовать мой пост, вместо этого вы можете поднять его.

Уроженец реализация из команды SmartClient будет намного лучше, чем наши, которые мы используем в ListGridField:

isc.defineClass("SwitchButton", "Canvas").addProperties({ 
    contentsOn: '<div class="switchButton animateToOn"><div class="switchButtonBckgr_ON">' + 'ON' + '</div><div class="switchButtonBckgr_OFF">' + 'OFF' + '</div><div class="switchButtonCircle"></div></div>', 
    contentsOff: '<div class="switchButton animateToOff"><div class="switchButtonBckgr_ON">' + 'ON' + '</div><div class="switchButtonBckgr_OFF">' + 'OFF' + '</div><div class="switchButtonCircle"></div></div>', 
    contentsDefaultTrue: '<div class="switchButton defTrue"><div class="switchButtonBckgr_ON">' + 'ON' + '</div><div class="switchButtonBckgr_OFF">' + 'OFF' + '</div><div class="switchButtonCircle"></div></div>', 
    contentsDefaultFalse: '<div class="switchButton defFalse"><div class="switchButtonBckgr_ON">' + 'ON' + '</div><div class="switchButtonBckgr_OFF">' + 'OFF' + '</div><div class="switchButtonCircle"></div></div>', 
    contents: '<div class="switchButton defFalse"><div class="switchButtonBckgr_ON">' + 'ON' + '</div><div class="switchButtonBckgr_OFF">' + 'OFF' + '</div><div class="switchButtonCircle"></div></div>', 
    click: function() { 
     if (this.contents.contains("animateToOn")) { 
      this.setContents(this.contentsOff); 
     } else if (this.contents.contains("animateToOff")) {   
      this.setContents(this.contentsOn); 
     } else { 
      this.setContents(this.contentsOff); 
     } 
    } 
}); 

использование:

isc.SwitchButton.create({ID: "switchButton"}); 

затем в булевой ListGridField:

{ 
    name: "BOOLEAN_FIELD", type: "boolean", width: 69, canEdit: false, 
    formatCellValue: function (value, record, rowNum, colNum, grid) { 
     if (value === true) { 
      value = null; 
      return switchButton.contentsOn; 
     } else if (value === false) { 
      value = null; 
      return switchButton.contentsOff; 
     } 
     if (value == null) { 
      if (value) { 
       return switchButton.contentsDefaultTrue; 
      } else { 
       return switchButton.contentsDefaultFalse; 
      } 
     } 
    } 
} 

css (будьте осторожны: я не гарантирую совместимость с браузером):

.switchButton { 
    border: 1px solid transparent; 
    min-width: 67px; 
    /*min-width: 77px;*/ 
    max-width: 120px; 
    /*max-width: 130px;*/ 
    border-radius: 14px; 
    -webkit-user-select: none; 
    position: relative; 
    cursor: pointer; 
    display: inline-block; 
    margin-top: 1px; 
    height: 27px; 
    overflow: hidden; 
    user-select: none; 
    box-flex: 0; 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
} 

.switchButton:before { 
    -webkit-box-sizing: border-box; 
    -webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); 
    box-sizing: border-box; 
    border: 1px solid rgba(0, 0, 0, 0.36); 
    border-top-color: rgba(0, 0, 0, 0.34); 
    border-bottom-color: rgba(0, 0, 0, 0.23); 
    border-radius: 14px; 
    background: transparent; 
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.25); 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 100%; 
    height: 100%; 
    z-index: 500; 
} 

.switchButtonBckgr_ON { 
    position: absolute; 
    left: -60px; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    border-radius: 14px; 
    color: rgba(0, 0, 0, 0.43); 
    font: bold 16px/ 28px Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    z-index: 0; 
    line-height: 30px; 
    background: #218FEC; 
    background: -webkit-gradient(linear, left top, left bottom, from(#218fec), color-stop(.6, #218fec), to(#6eafe6)); 
    -webkit-box-shadow: inset 0 9px 0 4px #007fea; 
} 

.switchButtonBckgr_OFF { 
    display: block; 
    position: absolute; 
    left: 10px; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    border-radius: 14px; 
    color: rgba(0, 0, 0, 0.43); 
    font: bold 16px/ 28px Helvetica, sans-serif; 
    text-transform: uppercase; 
    text-align: center; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    z-index: 0; 
    line-height: 30px; 
    -webkit-box-shadow: inset 0 9px 0 4px rgba(0, 0, 0, 0.04); 
} 

.switchButtonCircle { 
    -webkit-box-sizing: border-box; 
    background: #D3D3D3; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(.15, #d3d3d3), to(#fefefe)); 
    -webkit-box-shadow: inset 0 2px 2px white, inset 0 -1px 2px white; 
    position: absolute; 
    top: 0; 
    left: 0; 
    box-sizing: border-box; 
    border: 1px solid #999; 
    border-radius: 14px; 
    width: 27px; 
    height: 27px; 
    background: linear-gradient(to bottom, #d3d3d3 15%, #fefefe 100%); 
    box-shadow: inset 0 2px 2px white, inset 0 -1px 2px white; 
    z-index: 750; 
} 

div.defTrue div.switchButtonCircle { 
    left: 40px; 
} 

div.defTrue div.switchButtonBckgr_ON { 
    left: -10px; 
} 

div.defTrue div.switchButtonBckgr_OFF { 
    left: 50px; 
} 

div.defFalse div.switchButtonCircle { 
    left: 0px; 
} 

div.defFalse div.switchButtonBckgr_ON { 
    left: -60px; 
} 

div.defFalse div.switchButtonBckgr_OFF { 
    left: 10px; 
} 

div.switchButton.animateToOn { 
    border-radius: 14px; 
} 

div.animateToOn div.switchButtonCircle { 
    -webkit-animation: myAnimateToOnButton 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOnButton 0.2s; 
    animation-timing-function: linear; 
    left: 40px; 
} 

div.animateToOn div.switchButtonBckgr_ON { 
    -webkit-animation: myAnimateToOnSfondoOn 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOnSfondoOn 0.2s; 
    animation-timing-function: linear; 
    left: -10px; 
    /*-webkit-transform: translate(-10px);*/ 
} 

div.animateToOn div.switchButtonBckgr_OFF { 
    -webkit-animation: myAnimateToOnSfondoOff 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOnSfondoOff 0.2s; 
    animation-timing-function: linear; 
    left: 50px; 
} 

/* Standard syntax */ 
@keyframes myAnimateToOnButton { 
    from { 
     left: 0px; 
    } 
    to { 
     left: 40px; 
    } 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myAnimateToOnButton { 
    from { 
     left: 0px; 
    } 
    to { 
     left: 40px; 
    } 
} 

@-webkit-keyframes myAnimateToOnSfondoOn { 
    from { 
     left: -60px; 
    } 
    to { 
     left: -10px; 
    } 
} 

@-webkit-keyframes myAnimateToOnSfondoOff { 
    from { 
     left: 10px; 
    } 
    to { 
     left: 50px; 
    } 
} 

/* Mozilla */ 
@-moz-keyframes myAnimateToOnButton { 
    from { 
     left: 0px; 
    } 
    to { 
     left: 40px; 
    } 
} 

@-moz-keyframes myAnimateToOnSfondoOn { 
    from { 
     left: -60px; 
    } 
    to { 
     left: -10px; 
    } 
} 

@-moz-keyframes myAnimateToOnSfondoOff { 
    from { 
     left: 10px; 
    } 
    to { 
     left: 50px; 
    } 
} 

div.animateToOff div.switchButtonCircle { 
    -webkit-animation: myAnimateToOffButton 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOffButton 0.2s; 
    animation-timing-function: linear; 
    left: 0px; 
} 

div.animateToOff div.switchButtonBckgr_ON { 
    -webkit-animation: myAnimateToOffSfondoOn 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOffSfondoOn 0.2s; 
    animation-timing-function: linear; 
    left: -60px; 
} 

div.animateToOff div.switchButtonBckgr_OFF { 
    -webkit-animation: myAnimateToOffSfondoOff 0.2s; 
    -webkit-animation-timing-function: linear; 
    animation: myAnimateToOffSfondoOff 0.2s; 
    animation-timing-function: linear; 
    left: 10px; 
} 

/* Standard syntax */ 
@keyframes myAnimateToOffButton { 
    from { 
     left: 40px; 
    } 
    to { 
     left: 0px; 
    } 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes myAnimateToOffButton { 
    from { 
     left: 40px; 
    } 
    to { 
     left: 0px; 
    } 
} 

@-webkit-keyframes myAnimateToOffSfondoOn { 
    from { 
     left: -10px; 
    } 
    to { 
     left: -60px; 
    } 
} 

@-webkit-keyframes myAnimateToOffSfondoOff { 
    from { 
     left: 50px; 
    } 
    to { 
     left: 10px; 
    } 
} 

/* Mozilla */ 
@-moz-keyframes myAnimateToOffButton { 
    from { 
     left: 40px; 
    } 
    to { 
     left: 0px; 
    } 
} 

@-moz-keyframes myAnimateToOffSfondoOn { 
    from { 
     left: -10px; 
    } 
    to { 
     left: -60px; 
    } 
} 

@-moz-keyframes myAnimateToOffSfondoOff { 
    from { 
     left: 50px; 
    } 
    to { 
     left: 10px; 
    } 
}