Question

我想创建一个看起来像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>

CSS类：资源\样式表

 .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

我发现当你需要在控件中放置标记时，它几乎不起作用，因为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>

x$()函数是Mark Roden的一个实用工具：

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

Xpages中的FlipSwitch样式

1 个答案: