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

实例代码

<!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. POJ 1625 Censored!（AC自动机+高精度+dp）

    http://poj.org/problem?id=1625 题意: 给出一些单词,求长度为m的串不包含这些单词的个数. 思路: 这道题和HDU 2243和POJ 2778是一样的,不同的是这道题不取 ...

  2. 实现简单的ORM

    介绍 本篇将介绍实现简单的ORM,即:对数据表的通用操作:增.删.改.查 数据访问层 数据访问层类图 类说明: 1.DbProvider(供应):为数据操作提供基本对象,如:连接.操作对象.事务... ...

  3. P2865 【[USACO06NOV]路障Roadblocks】（次短路）

    传送门 算法Dijkstra要求次短路 那么在不考虑重复走一条边的情况下 肯定是把最短路中的一段改成另一段 至少要换另一条边到路径里所以可以枚举所有不属于最短路的每条边(a,b) 那么dis(1,a) ...

  4. python 元组元素反转

    #create a tuple x = ("w3resource") # Reversed the tuple y = reversed(x) print(tuple(y)) #c ...

  5. ubuntu16.04 kinetic 安装 robot-pose-publisher

    sudo apt-get install ros-kinetic-robot-pose-publisher

  6. shell 逻辑操作符

    Shell还提供了与( -a ).或( -o ).非( ! )三个逻辑操作符用于将测试条件连接起来,其优先级为:"!"最高,"-a"次之,"-o&qu ...

  7. c++ 判断给定区间是否是一个heap. O(N) (is_heap)

    #include <iostream> // cout #include <algorithm> // is_heap, make_heap, pop_heap #includ ...

  8. jekins 实现Django项目的自动部署(ubuntu16.04,python2.7,django1.11)

    1.依赖的插件 如果插件下载失败 更换源 http://mirror.xmission.com/jenkins/updates/current/update-center.json 因为我们只需要构建 ...

  9. jenkins 插件，下载地址

    http://updates.jenkins-ci.org/download/plugins/ 通常我们需要下载的插件有如下几个:

  10. onLoad和DomContentLoad的区别

    onLoad是的在页面所有文件加载完成后执行 DomContentLoad是Dom加载完成后执行,不必等待样式脚本和图片加载 domContentLoad更为合理, 原理: 如果是webkit引擎则轮 ...