ios. 复选框控件_使用Switchery.js将HTML复选框转换为iOS 7开关

最新推荐文章于 2021-05-30 19:22:52 发布

cune1359

最新推荐文章于 2021-05-30 19:22:52 发布

阅读量164

点赞数

文章标签： java html css javascript js ViewUI

复选框对于提供用户输入非常有用。当用户输入真值时，它将在小方框内显示一个复选框。通过CSS可以轻松自定义复选框的外观。即使这样，自定义仅影响box和check样式 。要使用真正不同的设计自定义复选框，需要进行大量编码。

不过，在Switchery的帮助下，复选框自定义已成为小菜一碟。它能够自动将您的复选框元素转换为类似iOS7的漂亮开关按钮。还可定制开关，以完美匹配您的设计。让我们来看看。

Switchery入门

Switchery是一个免费的独立javascript库。要安装它，您只需要将Switchery javascript和样式文件包含到您的网络中即可。您可以从GitHub获取这两个文件。

<link rel="stylesheet" type="text/css" href="css/switchery.css" />
<script type="text/javascript" src="js/switchery.js"></script>

要转换您的老式复选框，只需将您的checkbox元素包含在将被称为Switchery的类中即可。

提供复选框的初始状态也非常容易。您可以通过在首次加载时将checked属性包含在HTML中以获取选中状态来做到这一点。例如，我们将demo类添加到具有选中状态的复选框，如下所示：

<input type="checkbox" class="demo" checked />

目前，该复选框尚未更改。我们仍然需要将以下JavaScript代码添加到HTML中。这是我们放置定义的复选框类的地方，并提供一些选项（如果需要）。

<script>
var elem = document.querySelector('.demo'); // referred checkbox class is here
var init = new Switchery(elem); // put option after elem attribute
</script>

而已！

自定义开关

要提供一些选项，可以在javascript中完成。此选项可以更改默认开关的外观。以下是所有可用选项：

color ：更改开关元件的颜色，使用HEX或RGB值
secondaryColor ：更改开关阴影和边框的“关闭”状态颜色
className ：自定义switchery.css中样式的开关元素类名称
disabled ：启用或禁用点击事件的开关，以布尔值（真或假）填充
disabledOpacity ：当disabled为true时，更改开关的不透明度，范围从0到1
speed ：更改过渡时间长度，例如“ 0.1s”，“ 0.5s”，“ 2.2s”

例如，使用我们之前的开关，让我们更改其第一和第二颜色。在init变量的elem属性之后，只需将选项放在一对大括号中即可，如下所示：

<script>
var elem = document.querySelector('.demo');
var init = new Switchery(elem,{ 
    color: '#fec200', 
	secondaryColor: '#41b7f1' 
});
</script>

结果如下：