FlipSwitch Stil in Xpages

Question

Ich möchte ein Kontrollkästchen erstellen, das wie Flipswitch aussieht. Ich habe diese CSS-Klassen verwendet. und ich habe diese Designelemente verwendet. Aber ich konnte es nicht schaffen. Es gibt etwas, das ich vermisst habe. Ich weiß nicht, wie ich das schaffen soll.

Codes in XPages:

<div class="onoffswitch"> 
<xp:checkBox text="Label" id="onoffswitch" 
    defaultChecked="true"> 

<span class="onoffswitch-inner"></span> <span class="onoffswitch-switch"></span> 
    </xp:checkBox> 
</div> 

CSS-Klasse: Ressourcen \ Style Sheets

.onoffswitch { 
     position: relative; width: 90px; 
     -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
    } 
    .onoffswitch-checkbox { 
     display: none; 
    } 
    .onoffswitch-label { 
     display: block; overflow: hidden; cursor: pointer; 
     border: 2px solid #999999; border-radius: 20px; 
    } 
    .onoffswitch-inner { 
     display: block; width: 200%; margin-left: -100%; 
     transition: margin 0.3s ease-in 0s; 
    } 
    .onoffswitch-inner:before, .onoffswitch-inner:after { 
     display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px; 
     font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
     box-sizing: border-box; 
    } 
    .onoffswitch-inner:before { 
     content: "ON"; 
     padding-left: 10px; 
     background-color: #34A7C1; color: #FFFFFF; 
    } 
    .onoffswitch-inner:after { 
     content: "OFF"; 
     padding-right: 10px; 
     background-color: #EEEEEE; color: #999999; 
     text-align: right; 
    } 
    .onoffswitch-switch { 
     display: block; width: 18px; margin: 6px; 
     background: #FFFFFF; 
     position: absolute; top: 0; bottom: 0; 
     right: 56px; 
     border: 2px solid #999999; border-radius: 20px; 
     transition: all 0.3s ease-in 0s; 
    } 
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
     margin-left: 0; 
    } 
    .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
     right: 0px; 
    } 

Answer 1

Ich finde, dass, wenn Sie Markup innerhalb einer Kontrolle bringen benötigen wird es meist nicht funktionieren, weil das XPages-Rendering es ändert oder ignoriert. Um dies zu umgehen, verwende ich einfaches Markup mit einem versteckten Steuerelement außerhalb des Markups. Ich verwalte den Status der versteckten Kontrolle mit JQuery. Hier

ist ein funktionierendes Beispiel für Ihre Flipswitch:

<xp:checkBox text="Label" id="checkBox1"></xp:checkBox> 
    <div class="onoffswitch"> 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" 
      onclick="x$('#{id:checkBox1}').prop('checked', !(x$('#{id:checkBox1}').prop('checked')) )" /> 
     <label class="onoffswitch-label" for="myonoffswitch"> 
      <span class="onoffswitch-inner"></span> 
      <span class="onoffswitch-switch"></span> 
     </label> 
    </div> 

Die x$() Funktion ist ein handlicher Dienstprogramm von Mark Roden:

function x$(idTag, param){ //Updated 18 Feb 2012 
    idTag=idTag.replace(/:/gi, "\\:")+(param ? param : ""); 
    return($("#"+idTag)); 
}