easyui-tooltip的使用
通常情况下,在提交form表单时,需要验证一些基本信息,下面是一个平时遇到的小例子:
<div class="form-group"> <label for="title" class="col-sm-3 control-label">姓名</label> <div class="col-sm-7"> <input type="text" class="form-control easyui-tooltip" id="name" name="name" placeholder="请输入姓名" data-options="position: 'top',onShow:inputTipOnShow"> </div> <span class="redtip">*</span> </div>
function inputTipOnShow(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
$(document).ready(function() {
//通过tooltip的showEvent和hideEvent来控制tooltip显示,以下设置方式表示tooltip只有主动show的时候才会显示,当键盘有输入就会隐藏,避免鼠标一移到输入框tooltip就显示
$("#name").tooltip({
showEvent: null,
hideEvent: "keydown"
});
//如果form表单在一个弹出的window中,在关闭window时,要将tooltip隐藏,否则如果关闭window之前有tootip信息显示,那么该tooltip会一直显示,直到页面刷新
$('#window').window({
onBeforeClose:function(){
$("#name").tooltip('hide');
}
});
});
//在提交时判断是否为空,如果为空就要tootip提示
if($("#name").val().length == 0){
$("#name").tooltip({
content:"姓名不能为空!"
});
$("#name").tooltip("show");
$("#name").focus();
return false;
}
顺带提一句,如果输入的是年龄,要控制年龄的合法性,首先要用正则表达式判断是否为正整数,然后再看是否在某个范围内,在js中比较大小要用parseInt()不能直接比较,例如if(parseInt(s1)>parseInt(s2)){}