placeholder插件
用法:
<style>
input,textarea {
color: #333;
}
.my-placeholder {
color: #999;
}
</style>
<script src="jquery.min.js"></script>
<script src="jquery.placeholder.js"></script>
<script>
$(function() {
$('input, textarea').placeholder({customClass:'my-placeholder'});
});
</script>
默认情况下是添加的class是.placeholder
源码地址 各版本下载地址
TIPS插件
用法:
<style>
#myinput{position:relative;top:200px;left:200px;}
</style>
<script type="text/javascript">
function showThis(data){
if($(data).is(":checked")){
$(data).tips({
side:1, //1,2,3,4 分别代表 上右下左
msg:'上方弹出消息,3秒后自动消失,鼠标悬浮时,自动延时',//tips的文本内容
color:'#FFF',//文字颜色,默认为白色
bg:'#FD9720',//背景色,默认为红色
time:3,//默认为2 自动关闭时间 单位为秒 0为不关闭 (点击提示也可以关闭)
x:0,// 默认为0 横向偏移 正数向右偏移 负数向左偏移
y:0 // 默认为0 纵向偏移 正数向下偏移 负数向上偏移
}).tips({
side:2,
msg:'右方弹出消息,5秒后自动消失,鼠标悬浮时,自动延时',
bg:'#AE81FF',
time:5
}).tips({
side:3,
msg:'下方弹出消息,7秒后自动消失,鼠标悬浮时,自动延时',
bg:'#307FC1',
time:7
}).tips({
side:4,
msg:'左方弹出消息,不自动消失,鼠标点击才会消失',
time:0
});
}else{
$(".jq_tips_box").remove();
}
};
</script>
</head>
<body>
<input onclick="showThis(this)" type="checkbox" style="display:block;margin:100px 200px;"/>
</body>
效果图: