jQuery清除插件addclear js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery清除插件addclear js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>jQuery清除插件addclear</title>
	<meta name="author" content="Stephen Korecky">
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="addclear.js"></script>
	<script type="text/javascript" charset="utf-8">
	  $(function(){
	    $("input").addClear();
	  });
	</script>
	<style type="text/css" media="screen">

	body {
	  font:normal 12px/1.5 "Helvetica Neue", Helvetica, sans-serif;
	}

	 #wrapper {
	   margin:100px auto 0;
	   width:500px;
	 }

	 #wrapper h1 {
     border-bottom:1px solid #EEE;
     color:#666;
	   font-size:18px;
	 }

	 #wrapper #search {
	   background:#F5F5F5;
 	   border-radius: 2px;
 	   font-weight:bold;
 	   padding:10px;
 	 }

	 #wrapper #search label {
     color:#999;
	   font-weight:bold;
	   margin:0 5px;
	 }

	 #wrapper #search input {
	   width:200px;
	 }

	 #wrapper #search span.note {
     color:#CCC;
     display:block;
	   font-size:10px;
	   font-weight:normal;
     margin:5px 0 0 ;
	 }
	</style>
</head>
<body>
  <div id="wrapper">
    <h1>jQuery清除插件addclear</h1>
    <p id="search">
      <label for="search_input">搜索</label>
      <input type="text" name="search" value="" id="search_input">
      <span class="note">当您输入文字的时候就能显示清除按钮.</span>
    </p>
  </div>
</body>
</html>

JS代码(addclear.js):

(function($){
	$.fn.extend({
	addClear:function(options){
	var options = $.extend({
	closeSymbol:"&#10006;
	",color:"#CCC",top:1,right:4,returnFocus:true,showOnLoad:false,onClear:null}
,options);
	$(this).wrap("<span style='position:relative;
	' class='add-clear-span'>");
	$(this).after("<a href='#clear'>"+options.closeSymbol+"</a>");
	$("a[href='#clear']").css({
	color:options.color,'text-decoration':'none',display:'none','line-height':1,overflow:'hidden',position:'absolute',right:options.right,top:options.top}
,this);
	if($(this).val().length >= 1 && options.showOnLoad === true){
	$(this).siblings("a[href='#clear']").show();
}
$(this).keyup(function(){
	if($(this).val().length >= 1){
	$(this).siblings("a[href='#clear']").show();
}
else{
	$(this).siblings("a[href='#clear']").hide();
}
}
);
	$("a[href='#clear']").click(function(){
	$(this).siblings("input").val("");
	$(this).hide();
	if(options.returnFocus === true){
	$(this).siblings("input").focus();
}
if (options.onClear){
	options.onClear($(this).siblings("input"));
}
return false;
}
);
	return this;
}
}
);
}
)(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)