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

实例代码

<!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. Win7上安装WMware虚拟机和Ubuntu操作系统

    效果图: 问题拾遗: 一.如何划分一个新硬盘空间? 参考链接:如何新建磁盘空间 效果图: 我划分了20G的内存空间给Ubuntu的硬盘空间.一般来说15G就够用了. 二.VMware上拷贝Ubuntu ...

  2. python 写文件刷新缓存

    搞爬虫的时候,结果是通过file.write(strs)写入文件的. 带来的问题是,进程如果是被杀死的时候,最后一条结果总是缺损的,因为缓存的部分还未写入文件. 解决办法是每次写入文件时,都刷新缓存, ...

  3. Selenium UI 举例 getCssValue

    selenium jar包中,在WebElement的接口中, String getCssValue(String var1); 可以通过标签,获取对应的css值.具体要怎么用呢,如下: WebEle ...

  4. XML_CPP_资料_libXml2_01_Code_ZC（?.pro）

    ZC:最下面有 ?.pro文件的设置写法 ZC: Win7x64,qt-opensource-windows-x86-msvc2010_opengl-5.3.2.exe,cn_visual_studi ...

  5. 基于 Flutter 以两种方式实现App主题切换

    概述 App主题切换已经成为了一种流行的用户体验,丰富了应用整体UI视觉效果.例如,白天夜间模式切换.实现该功能的思想其实不难,就是将涉及主题的资源文件进行全局替换更新.说到这里,我想你肯定能联想到一 ...

  6. Codeforces 877E - Danil and a Part-time Job（dfs序＋线段树）

    877E - Danil and a Part-time Job 思路:dfs序+线段树 dfs序:http://blog.csdn.net/qq_24489717/article/details/5 ...

  7. php 7.2 安装 mcrypt 扩展: mcrypt 扩展从 php 7.1.0 开始废弃；自 php 7.2.0 起，会移到 pecl

    升级 php 7.2 后,使用微信提供的加解密代码时,提示 call to undefined function mcrypt_module_open() :大脑疯狂运转1秒钟后,得出结论:php 7 ...

  8. spojPlay on Words

    题意:给出几个词语,问能不能接龙. 一开始猜只要所有字母连通,并且只有一个字母出现在开头次数为奇,一个字母末尾为奇,其它偶,就行.后来发现全为偶也行.而且条件也不对,比如ac,ac,ac就不行.实际上 ...

  9. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.autumn.book/com.autumn.book.MainActivity}: android.os.NetworkOnMainThreadException

    不能把http请求写在主线程里,改为这样 Runnable runnable = new Runnable() { public void run() { HttpClient.post2(" ...

  10. git 添加tag

    前言 什么是tag?tag是节点的意思,一般在上线的时候使用.比如说:你在本地做了好几个功能,然后把这些功能提交到了上线的分支上,某个时刻,你想上线你的新功能,这个时候你需要你个tag来标记一下,告诉 ...