Xpages中的FlipSwitch样式

我想创建一个类似flipswitch的复选框。 我使用了这个CSS类。我使用了这种设计元素。但我没有成功。我错过了一些东西。我不知道该怎么办

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>

---

我发现，当您需要将标记放在控件中时，它通常无法工作，因为XPages呈现会更改或忽略它。为了解决这个问题，我使用普通标记和位于标记外部的隐藏控件。我使用JQuery管理隐藏控件的状态

以下是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>

---

我发现，当您需要将标记放在控件中时，它通常无法工作，因为XPages呈现会更改或忽略它。为了解决这个问题，我使用普通标记和位于标记外部的隐藏控件。我使用JQuery管理隐藏控件的状态

以下是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>

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