一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery实现用户登录框显示/隐藏输入的密码

时间:2015-03-05 编辑:简简单单 来源:一聚教程网

 

jquery实现用户登录框显示/隐藏输入的密码
全部隐藏密码,点击密码框右边的眼睛图标可以显示密码
jquery实现用户登录框显示/隐藏输入的密码
全部显示密码,点击密码框右边的锁头图标可以隐藏密码


今天,我将给大家介绍,在WordPress中如何实现这个的功能,步骤非常简单。

1、添加js

prevue.zip 需要用到的js,将此js文件放到当前使用主题的根目录下(可以百度搜索下载)。

2、添加php代码

 代码如下 复制代码

function ludou_prevue() {
   wp_enqueue_script("jquery");
   wp_enqueue_script( 'prevue', get_template_directory_uri() . '/jquery.prevue.min.js', array(), '1.0', true );
?>


}
add_action( 'login_enqueue_scripts', 'ludou_prevue' );
?>

好了,大功造成!

补充说明

1、如果你要将js文件放在当前主题的js目录,那你需要将php代码第3行中的 /jquery.prevue.min.js 改成 /js/jquery.prevue.min.js
2、此功能需要1.9.0以上版本的jQuery支持。

jquery.prevue.min.js 代码如下

 代码如下 复制代码

(function($){window.log=function(){log.history=log.history||[];log.history.push(arguments);if(this.console){console.log(Array.prototype.slice.call(arguments))}};$.fn.prevue=function(settings){var defaults={fontIconClassNameOff:'prevue-icon-eye',fontIconClassNameOn:'prevue-icon-eye-off',fontSize:'16',color:'#999',offsetX:12,offsetY:0};if(settings){$.extend(defaults,settings)}
return this.each(function(){var $o=$(this);var node=this.nodeName.toLowerCase();if(node=="input"&&this.type=="password"){var $input=$o,$previewIcon=$('').css({'font-size':defaults.fontSize+'px'}).addClass('dashicons-before').addClass(defaults.fontIconClassNameOff),paddingTop=$o.css('padding-top'),paddingBottom=$o.css('padding-bottom'),height=parseInt($o.height())+parseInt(paddingTop.substring(0,paddingTop.length-2))+parseInt(paddingBottom.substring(0,paddingBottom.length-2)),$previewBtn=$('').attr('href','javascript: void(0);').addClass('prevue-btn').css({'text-decoration':'none','position':'absolute','right':parseInt(0+defaults.offsetX)+'px','top': '-7px','height':parseInt(height+defaults.offsetY)+'px','line-height':(height+defaults.offsetY)+'px','color':defaults.color}),$wrapper=$('').addClass('prevue-wrapper').css({'position':'relative'});$previewBtn.append($previewIcon);$o.replaceWith($wrapper);$wrapper.append($input);$wrapper.append($previewBtn);$previewBtn.on('click',function(e){var $el=$(this).prev(),$icon=$(this).children().eq(0);if($el.attr('type')=='password'){$el.attr('type','text');$icon.removeClass(defaults.fontIconClassNameOff).addClass(defaults.fontIconClassNameOn);}
else{$el.attr('type','password');$icon.removeClass(defaults.fontIconClassNameOn).addClass(defaults.fontIconClassNameOff);}});}else{console.log('Prevue.js only works on elements, while you have used it on a <'+node+'> element.');return false;}});};$('input[type=password]').prevue();})(jQuery);

热门栏目