一款很实用的小插件,在表单的输入框会显示提示信息,你可能会用的它。

实例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>poshytip漂亮的表单提示插件</title>
<link rel="stylesheet" href="/api/jq/5733e361d3b73/src/tip-yellow/tip-yellow.css" type="text/css" />
<link rel="stylesheet" href="/api/jq/5733e361d3b73/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
<style type="text/css">
.demo{width:500px; margin:60px auto}
input{height:22px; line-height:22px; padding:2px; border:1px solid #ccc}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<h2 class="title"><a href="#">poshytip漂亮的表单提示插件</a></h2>
<p>1、<a id="tips" title="我是不是很漂亮啊!~" href="#">滑动这里有惊喜哦~</a></p>
<br/>
<p>2、邮箱:<br/><input id="email" type="text" size="30" title="请正确输入您的邮箱" /></p>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/api/jq/5733e361d3b73/src/jquery.poshytip.js"></script>
<script type="text/javascript">
$(function() {
$("#tips").poshytip({allowTipHover: true});
$('#email').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5
});
});
</script>
</body>
</html>

  

运行一下

下载地址

poshytip漂亮的表单提示插件的更多相关文章

  1. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  2. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  3. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  4. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  5. 10个强大的Javascript表单验证插件推荐

    创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计.开发与测试等等环节.实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的.本文介绍了10个不错的JavaScri ...

  6. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  7. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  8. JS表单验证插件(支持Ajax验证)

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:ru ...

  9. 【jquery】Validform,一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

随机推荐

  1. 【TCP/IP详解 卷一:协议】第十章 动态选路协议

    更为详细的RIP博客解析: RIP理论 距离向量算法的简介: RIP协议V-D算法的介绍 10.1 引言 静态选路修改路由表的三种方法 (1)主机设置时,默认的路由表项 (2)ICMP重定向报文(默认 ...

  2. UVa 10382 喷水装置(贪心)

    https://vjudge.net/problem/UVA-10382 题意: 有一个长为l,宽为w的草坪,在其中心线不同位置有n个点状的喷水装置,喷水坐标为p,喷水半径为r.求喷到所有草坪的最少喷 ...

  3. windows 模拟用户会话创建进程

    在渗透当中,经常会碰到这样的问题.一个机器,机器上好几个用户,或者域内,想让某个机器的某个会话执行你想要执行的程序,或者中马,以当前会话来上线. 现在模拟如下的一个情况: 严格的DMZ,内网--> ...

  4. spring boot 无法读取application.properties问题

    spring boot 无法读取application.properties问题 https://bbs.csdn.net/topics/392374488 Spring Boot 之注解@Compo ...

  5. Python day17 模块介绍1(time,random)

    module模块和包的介绍(略掉了) 常用模块 # time模块 import time print(time.time())#时间戳,在1970年开始到现在一共多少秒 print(time.gmti ...

  6. VS 常见快捷键有哪些

    自动对齐点[编辑]-[高级]-[设置选定内容的格式]或者按Ctrl + K 然后再按Ctrl + F 就好了 你可以在常用快捷键自定义 窗口中进行查看1.进入工具-选项 对话框2.选择[环境]-[键盘 ...

  7. MySQL数据库性能优化

    mysql查询优化: 1.新增字段索引,查询时若使用到or关键字,则两个字段都需建立索引才能生效 2.sql语句包含子查询,mysql会创建临时表查询结束后删除,影响效率,所以应尽可能使用join替代 ...

  8. Android蓝牙通信功能开发

    1. 概述 Bluetooth 是几乎现在每部手机标准配备的功能,多用于耳机 mic 等设备与手机的连接,除此之外,还可以多部手机之间建立 bluetooth 通信,本文就通过 SDK 中带的一个聊天 ...

  9. (转)netty、mina性能对比分析

    转自: http://blog.csdn.net/mindfloating/article/details/8622930 流行 NIO Framework netty 和 mina 性能测评与分析 ...

  10. 20170711xlVBA批量制图一例

    Public Sub GatherDataPicker() Application.ScreenUpdating = False Application.DisplayAlerts = False A ...