1. 程式人生 > >Bootstrap 寫一個表單+內嵌圖示

Bootstrap 寫一個表單+內嵌圖示

使用輕量級jquery框架+css+div+Bootstrap親和移動端框架

HTML:
<div class = 'form-group has-feedback'>
		<div class = 'col-lg-3'>
		<label for = 'psd' >密碼:  </label>
		<!--<button type = 'button' id = 'spsd' class = 'form-control-feedback'></button>-->
		<span class="cover"></span>
		<span class="glyphicon glyphicon-eye-close form-control-feedback" id = 'spsd'></span>
		<span class="glyphicon glyphicon-eye-open form-control-feedback" id = 'spsd2' ></span>
		<input type = 'password' name = 'gyl_admin_password' id = 'psd' class = 'form-control fc-clear' placeholder = '請輸入管理員密碼' >
		</div>
		</div>
CSS:
   #spsd
   {
   cursor:pointer;
   z-index:999999999999;
   color:white;
   }
   .cover
   {
   display:inline-block;
   border:0px;
   width:30px;
   height:30px;
   position:absolute;
   right:18px;
   top:27px;
   z-index:100;
   cursor:pointer;
   
   }
   #spsd2
   {
   display:none;
   color: rgb(116, 255, 255);
   }
jquery:

$(document).ready(function()
{
		var count = 0;
	$('.cover').click(function()
	{
		count += 1;
		//alert('test');
		if(count % 2 == 0)
		{
			$('#spsd2').hide(500);
			$('#spsd').show(500,function()
			{
				$('#psd').attr('type','password');
			});
		}else{
		$('#spsd').hide(500);
		$('#spsd2').show(500,function()
		{
			$('#psd').attr('type','text');
		});
		}
	});
});