README

安装

Composer

composer require gaomingcode/switchery

原始README

描述

Switchery是一个简单的组件，只需几个简单步骤，就可以将默认的HTML复选框输入转换为美观的iOS 7风格开关。您可以轻松自定义开关，使其与您的设计完美匹配。

支持所有现代浏览器：Chrome、Firefox、Opera、Safari、IE8+

实时预览

安装

独立

<link rel="stylesheet" href="dist/switchery.css" />
<script src="dist/switchery.js"></script>

组件

$ component install abpetkov/switchery

Bower

$ bower install switchery

Rails

要在Rails应用程序中使用Switchery，请将以下内容添加到您的Gemfile中

gem 'switchery-rails'

或者访问Switchery Rails软件包页面获取更多信息、文档和说明。

Angular JS

有关如何使用Angular JS与Switchery进行彻底的安装和使用说明，请查看此存储库：servergrove/NgSwitchery

Meteor

您可以通过以下方式将Switchery安装到您的Meteor.js应用程序中

$ meteor add abpetkov:switchery

Atmosphere上的Switchery

用法

var elem = document.querySelector('.js-switch');
var init = new Switchery(elem);

用于独立版本。

设置和默认值

defaults = {
    color             : '#64bd63'
  , secondaryColor    : '#dfdfdf'
  , jackColor         : '#fff'
  , jackSecondaryColor: null
  , className         : 'switchery'
  , disabled          : false
  , disabledOpacity   : 0.5
  , speed             : '0.4s'
  , size              : 'default'
};

color：开关元素的颜色（十六进制或RGB值）
secondaryColor：开关关闭时的背景颜色和边框的次要颜色
jackColor：默认的jack/handle元素的颜色
jackSecondaryColor：未选中jack/handle元素的颜色
className：开关元素的类名（默认使用switchery.css进行样式化）
disabled：启用或禁用点击事件和开关的状态更改（布尔值）
disabledOpacity：开关禁用时的不透明度（0到1）
speed：过渡将花费的时间长度，例如'0.4s'、'1s'、'2.2s'（注意：手柄的过渡速度是两倍短）
size：开关元素的大小（小或大）

API

.destroy()

解除所有附加到开关元素的的事件处理器，以便准备对象进行垃圾回收。

.enable()

通过重新添加事件处理器并将不透明度更改为1来启用禁用开关。

.disable()

通过解除附加的事件并更改不透明度到disabledOpacity值来禁用开关。

.isDisabled()

通过检查复选框和通过JS设置的disabled选项上的readonly和disabled属性，检查开关是否当前禁用。如果其中任何一个存在，则返回值是true。

示例

选中

您只需要在复选框输入中添加一个checked属性。就这么简单。

<input type="checkbox" class="js-switch" checked />

多个开关

您可以添加任意多的开关，只要相应的复选框有相同的类。选择它们，并为每个创建一个新的Switchery类实例。

var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));

elems.forEach(function(html) {
  var switchery = new Switchery(html);
});

多次调用

您可以通过查找data-switchery="true"来过滤掉已调用过的现有元素。

禁用

使用disabled选项来使开关激活或禁用。

var switchery = new Switchery(elem, { disabled: true });

使用disabledOpacity选项自定义禁用开关的默认不透明度。

var switchery = new Switchery(elem, { disabled: true, disabledOpacity: 0.75 });

将disabled或readonly属性添加到本地输入元素将导致开关也禁用。

彩色

您可以更改开关的主色（开启状态）和副色（关闭状态），以便完美地适应您的设计。通过更改 color 和 secondaryColor 选项来实现这一点。插孔颜色也可以通过 jackColor 和 jackSecondaryColor 选项进行自定义。下面是一个使用这些选项所能实现的良好示例。

var switchery = new Switchery(elem, { color: '#7c8bc7', jackColor: '#9decff' });

或

var switchery = new Switchery(elem, { color: '#faab43', secondaryColor: '#fC73d0', jackColor: '#fcf45e', jackSecondaryColor: '#c8ff77' });

如果您想对颜色进行任何其他更改，应在 switchery.css 中进行。

尺寸

从版本 0.7.0 开始，您可以通过 size 选项更改开关元素的尺寸。将其值设置为 small 或 large 将分别添加 switchery-small 或 switchery-large 类，这将更改开关的大小。

不使用此属性将渲染默认尺寸的开关元素。

var switchery = new Switchery(elem, { size: 'small' });
// ... or
var switchery = new Switchery(elem, { size: 'large' });

检查状态

在许多情况下，您需要检查复选框的当前状态，即选中或未选中。我将演示如何在两种最常见的情况下执行此操作 - 点击时获取状态和更改时获取状态。

点击时

var clickCheckbox = document.querySelector('.js-check-click')
  , clickButton = document.querySelector('.js-check-click-button');

clickButton.addEventListener('click', function() {
  alert(clickCheckbox.checked);
});

更改时

var changeCheckbox = document.querySelector('.js-check-change');

changeCheckbox.onchange = function() {
  alert(changeCheckbox.checked);
};

旧版浏览器

如果您是一位喜欢支持旧版浏览器的冒险家，如 IE8 和 IE7，请应用您最喜欢的圆角和阴影修复，并尝试稍微不同的方法。

var elems = document.querySelectorAll('.js-switch');

for (var i = 0; i < elems.length; i++) {
  var switchery = new Switchery(elems[i]);
}

我个人推荐使用 CSS3 PIE。对于工作示例，您可以查看演示页面。

开发

如果您已决定进入开发模式并对所有这些进行一些调整，有一些事情您应该做。

在您克隆了存储库之后，在您的终端中执行以下操作（需要 NPM）

$ npm install

在其余部分之前添加以下代码

var Switchery = require('switchery');

确保您正在使用 build/build.js 和 build/build.css 文件，并且您已准备好。

有一些有用的命令您可以使用。

$ make install - 将安装 Node.js 模块、组件等。

$ make build - 将创建构建文件

$ make standalone - 将创建独立和压缩的文件

致谢

向以下人员表示衷心的感谢：

Veselin Todorov

联系方式

如果您喜欢这个组件，请通过在 Twitter、GitHub 或 Dribbble 上关注我，来表达您的赞赏。

许可证

MIT 许可证（MIT）

特此免费授予任何获得本软件及其相关文档文件（“软件”）副本的任何人，无限制地处理软件的权利，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或出售软件副本的权利，并允许向软件提供方提供软件的人这样做，但前提是遵守以下条件

gaomingcode / switchery

维护者

详细信息