表单/表格

Bootstrap显示或隐藏密码jQuery插件

也想出现在这里?联系我们
面包多

Bootstrap显示或隐藏密码jQuery插件-创客云
这是一款 Bootstrap 显示或隐藏密码 jquery 插件。该插件支持 bootstrap2 和 bootstrap3,可用于在表单密码字段上显示或隐藏用户输入的密码。

使用方法

在页面中引入 jquery,bootstrap 和 bootstrap-show-password 相关文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="assets/bootstrap-v3/css/bootstrap.css">
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/bootstrap.min.js"></script>
  4. <script src="js/bootstrap-show-password.js"></script>

HTML 结构

该插件主要在密码字段上使用:

  1. <input id="password" class="form-control" type="password" data-toggle="password">

初始化插件

初始化插件的方法有两种,可以使用 data-*属性来初始化插件,或使用 js 的方法来初始化插件。
1、通过 data-*属性来初始化插件:

  1. <input id="password" class="form-control" type="password" data-toggle="password">

2、通过 js 的方法来初始化插件:

  1. $('#password').password();

配置参数

参数 data 属性 类型 默认值 描述
- data-toggle String password Active password without writing JavaScript
placement data-placement String after 替代显示/隐藏图标,可以是'before'或 'after'
message data-message String Click here to show/hide password 提示文本
white data-white Boolean false 显示白色图标(仅对 bootstrap v2 有效)
eyeClass data-eye-class String glyphicon 眼睛小图标的 class 类
eyeOpenClass data-eye-open-class String glyphicon-eye-open 眼睛打开小图标的 class 类
eyeCloseClass data-eye-close-class String glyphicon-eye-close 眼睛关闭小图标的 class 类
eyeClassPositionInside data-eye-class-position-inside Boolean false 将 open/close class 放入<i>标签中。该参数用于谷歌 material 图标。

该插件默认使用 bootstrap Glyphicon 字体图标,你可以通过参数来设置使用其它的字体图标,例如:

  1. $("#password").password({
  2.     eyeClass: 'fa',
  3.     eyeOpenClass: 'fa-eye',
  4.     eyeCloseClass: 'fa-eye-slash'
  5. })

方法

bootstrap-show-password 插件的可用方法有:

password('show'):手动显示密码。

  1. $('#password').password('show');

password('hide'):手动隐藏密码。

  1. $('#password').password('hide');

password('toggle'):手动切换密码的可见状态。

  1. $('#password').password('toggle');

password('val', [value]);:设置或获取当前密码的值。

  1. $('#password').password('val'); // get value
  2.     $('#password').password('val', 'password'); // set value

password('focus'):将密码字段设置焦点

事件

bootstrap-show-password 插件的可用事件有:

事件类型 事件描述
show.bs.password 当显示实例方法使用时该事件会立即被触发。
hide.bs.password 当隐藏实例方法使用时该事件会立即被触发。
  1. $('#password').on('show.bs.password', function (e) {
  2.     // code here
  3. });

Github 地址:https://github.com/wenzhixin/bootstrap-show-password

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(1)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!