Question

我的要求是在移动网站上显示一个带有消息的切换按钮。我已经实现了此功能，但是我不确定它的性能如何以及它是否可以在大多数移动浏览器上运行。我对UI开发非常陌生，这是我第一次实现UI组件。为了给出一个想法，最终实现的结果看上去有点类似于this

我已将这一要求分为5部分-
1.容器-父div
2.复选框。 -按钮后面的隐藏复选框
3.按钮
4.按钮的内圈
5.消息字符串，将显示在右侧。

此外，需要在页面的前几秒钟禁用此按钮。通过禁用，我的意思是它应该不可单击，并且UX会有所不同，以便用户知道它已被禁用。

HTML-

    <div class = "toggleSwitchContainer">
        <div class = "my-toggle-button" disabled = "true">
            <input type="checkbox" id = "checkBox">
            <div class = "toggle-switch-inner-circle" disabled = "true"> </div>
        </div>
        <div class = "messageString" disabled = "true">
            <text>Some message</text>
        </div>
    </div>

CSS-


.toggleSwitchContainer {
    padding : 10px;
}
.my-toggle-button[disabled] {
    width : 40px;
    height : 20px;
    background-color : #dddddd47;
    border-radius : 30px;
    border-color : #80808017;

}

.my-toggle-button {
    width : 44px;
    height : 22px;
    background-color : #eff0f3;
    border-radius : 30px;
    position : relative;
    transition : all 300ms ease-in-out;
    display : inline-block;
    border : solid 1px;
    border-color : #80808080;
}

.my-toggle-button.active {
    background-color : #ff7800;
}


.my-toggle-button > .toggle-switch-inner-circle {
    position : absolute;
    width : 20px;
    height : 20px;
    background-color : #eff0f3;
    border-radius : 50%;
    border : solid 1px;
    border-color : #80808080;
    transition : all 300ms ease-in-out;

    top : 0;
}

.my-toggle-button.active > .toggle-switch-inner-circle {
    margin-left : 22px;

    background-color : #fff;
}

.messageString[disabled] {
    color : #00000024;
}
.messageString {
    display : inline-block;
    padding : 10px;
}

.my-toggle-button input {
  opacity: 0;
  width: 0;
  height: 0;
}

JS 处理点击的功能-

toggleSwitchObject.unbind().click(function() {
    toggleSwitchObject[0].classList.toggle('active');//On click inner circle will be moved to right & background color will change.
    callRequiredFunctionNow();
});

禁用-

 containerDomNode.children().attr('disabled', true);

因此，其想法是在单击开关时添加一个名为“ active”的css属性，以便将内部圆圈移至右侧并更改背景色。我需要知道我是否正在使用任何有风险的CSS属性，而该属性可能无法在许多浏览器上使用。具体来说，过渡属性对我来说很可怕。此实现有什么改进的范围？

需要有关CSS的建议以实现拨动开关按钮

0 个答案: