jQuery Toggles 技术文档

2024-12-28 14:08:32作者：秋泉律Samson

1. 安装指南

在您的项目中使用 jQuery Toggles 前，您需要先引入 jQuery 库和 jQuery Toggles 的相关文件。

引入 CSS 文件

在 HTML 页面的 <head> 部分引入以下 CSS 文件：

<link rel="stylesheet" href="css/toggles.css">
<link rel="stylesheet" href="css/toggles-modern.css">

您可以选择引入其他的主题样式文件，例如 soft, light, dark, iphone 等。

引入 JS 文件

在 HTML 页面的 <body> 部分底部引入以下 JS 文件：

<script src="js/toggles.js" type="text/javascript"></script>

在生产环境中，建议使用压缩过的 JS 文件 toggles.min.js。

2. 项目的使用说明

创建切换按钮

首先，在 HTML 中创建一个带有特定主题类的元素，如下所示：

<div class="toggle toggle-modern"></div>

初始化

接下来，使用 jQuery 初始化这个元素，使其变为可切换的：

$('.toggle').toggles();

您还可以自定义一些选项，如下：

$('.toggle').toggles({
  drag: true,
  click: true,
  text: {
    on: 'ON',
    off: 'OFF'
  },
  on: true,
  animate: 250,
  easing: 'swing',
  checkbox: null,
  clicker: null,
  width: 50,
  height: 20,
  type: 'compact'
});

监听状态变化

$('.toggle').on('toggle', function(e, active) {
  if (active) {
    console.log('Toggle is now ON!');
  } else {
    console.log('Toggle is now OFF!');
  }
});

3. 项目 API 使用文档

jQuery Toggles 提供了一系列方法来控制切换按钮的状态和外观。

初始化方法

$('.toggle').toggles([options]): 初始化切换按钮。

方法

toggle([state, [noAnimate, [noEvent]]]): 切换按钮的状态，可选参数包括状态、是否动画过渡和是否触发事件。

属性

active: 表示按钮当前是否处于激活状态。

事件

toggle: 当按钮状态发生变化时触发。

4. 项目安装方式

项目可以通过 NPM 或 Bower 进行安装。

使用 NPM

npm install jquery-toggles

使用 Bower

bower install jquery-toggles

登录后查看全文

jQuery Toggles 技术文档

1. 安装指南

引入 CSS 文件

引入 JS 文件

2. 项目的使用说明

创建切换按钮

初始化

监听状态变化

3. 项目 API 使用文档

初始化方法

方法

属性

事件

4. 项目安装方式

使用 NPM

使用 Bower

热门内容推荐

最新内容推荐

项目优选

jQuery Toggles 技术文档

1. 安装指南

引入 CSS 文件

引入 JS 文件

2. 项目的使用说明

创建切换按钮

初始化

监听状态变化

3. 项目 API 使用文档

初始化方法

方法

属性

事件

4. 项目安装方式

使用 NPM

使用 Bower

相关内容推荐

热门内容推荐

最新内容推荐

项目优选