简单弄得表单提示功能

领导说：“一定要提高程序与用户交互效果，不要存在歧义字段。”

员工说：“那我们给表单中每个字段都加上提示信息吧，用白话文解释特有名词。”

领导说：“好的，就这么干吧！”

于是，就有了下面的成果。首先说明一下实现的基本原理，使用onmouseout方法判断用户鼠标放在哪个元素上，然后给定义一个方法，执行显示提示信息框。核心思想就是当鼠标放置元素上显示提示框。为了考虑兼容问题也下了很多工夫。

我知道bootstrap也有现成的提示工具Tooltip，也希望此功能可以慢慢优化做成功能完善的插件。

代码很简单，直接上代码了，有什么不足还望多多请教。

css代码：

/**提示框样式*/
.tips_box{
    font-size:12px;color: black;padding:5px;text-align:left;
     position:absolute;line-height:16px;background-color:#FFFFE6;
     width:600;height:16;border:1px solid orange;display:none;
     filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=3);
     left:0; top:5
}
.tips_message{
    margin:5px;
    padding-top:2px;
    padding-bottom:2px;
}

js代码：

/**
 *自己封装的信息提示工具 by ytd
 * 基于jquery
 * 使用方式：o

简单弄得表单提示功能相关推荐

js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
jquery parsley ajax,用户体验超棒且功能强大使用简单的javascript表单验证 - Parsley.js...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧,使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能.是不是超棒? 今天介绍的 ...
运用php制作一个表单,PHP 表单处理,一个简单的 HTML 表单
PHP 超全局变量 $_GET 和 $_POST 用于收集表单数据(form-data). PHP - 一个简单的 HTML 表单,我们在平时运用PHP这门语言的时候,最频繁的是就是表单提交了.如:用 ...
工作流表单自定义功能的误区
表单自定义功能看似非常方便,可以不用写代码即可完成表单的开发设计,表面上看的确是减少不少开发成本,但深入研究,发现是有不少误区的. 1. 对于整体成本来讲,当表单自定义功能能 ...
ajax刷新iframe页面,通过iframe实现简单的ajax表单提交
之前做项目都是用现成的jquery插件实现表单的校验以及ajax提交,但是今天有个简单的头像图片ajax上传,以及一个很简单的表单提交,实在不想引入一个插件了,本着代码量最小,最简单的原则,照着豆瓣照 ...
HTML5新的解析顺序,HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. HTML5表单新功能解析 ...
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通过pattern验证的元 ...
java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
表单引擎功能研究分析
概述表单引擎产品提供表单及视图快速定制.快速搭建部署, 高效运行支撑,尤其善于实现流程业务表单,与流程引擎完美结合.实现化繁为简.减少代码开发.缩短交付工期.降低交付成本的目标,打造软件行业产业链条 ...

简单弄得表单提示功能

简单弄得表单提示功能相关推荐

最新文章

热门文章