先上图
HTML
这个插件没有任何样式,所以需要自己写把样式写好
<div class="container">
<p>
<input id="username" type="text" placeholder="This is Test" />
<span data-target="username">×</span>
</p>
<p>
<input id="password" type="text" placeholder="Nothing" />
<span data-target="password">×</span>
</p>
</div>
CSS
样式完全是自己定义
body {
padding: 20px;
}
p {
position: relative;
width: 200px;
padding: 5px;
border: 1px solid lightgray;
}
p input {
display: inline-block;
width: 100%;
font-size: 1em;
border: none;
outline: none;
}
p span {
position: absolute;
top: 50%;
right: 2em;
margin-top: -11px;
display: inline-block;
padding: 0 .5em;
border-radius: 50%;
font-weight: bold;
color: white;
background-color: lightgray;
cursor: pointer;
}
JS
这算是初次写插件吧(这也算插件?-。-)
不知道这样的写法规不规范,希望大家能指正。
+function ($, window, document, undefined) {
var reset = function (ele, opt) {
this.$element = $(ele),
this.$target = null,
this.defaults = {
'value': '',
'autohide': true,
'target': '',
},
this.options = $.extend({}, this.defaults, opt);
}
$.fn.btnReset = function (options) {
var btn = new reset(this, options);
btn.$target = $('#' + btn.options.target);
btn.$element.click(function () {
btn.$target.val(btn.options.value);
if (btn.options.autohide) {
btn.$element.hide();
}
});
if (btn.options.autohide) {
btn.$element.hide();
btn.$target.keyup(function () {
btn.$element.show();
});
}
return btn;
}
}(jQuery, window, document);
调用方法
首先引入相关js
然后就是调用btnReset
方法了
<script>
$(document).ready(function () {
$("span").each(function () {
$(this).btnReset({
'target': $(this).data('target'),
});
});
});
</script>
参数说明
target
输入框的
id
,必须!
value
点击按钮之后设定的值,默认为空字符串
''
autoHide
按钮是否自动隐藏,默认为true