jQuery水印插件 - Watermark 和 FormWatermark
Form Watermark 是一个跨浏览器的可以给表单文本框和文本区域增加水印的插件,使用Form Watermark给表单增加水印提示功能,这有助于提高用户交互和友好度,如果配合jQuery插件Validation可 提供强大的用户体验,Form Watermark使用简单,效果图如下:
使用说明
需要使用jQuery库文件 和Form Watermark库文件
使用实例
一,包含文件部分
<script language="javascript" src="js/jquery-1.3.2.min.js"></script> <script language="javascript" src="jquery.watermark.min.js"></script> /* 同时可结合Validation插件(可选) */ <script language="javascript" src="js/jquery.validate.min.js"></script>
二,HTML部分
<form id="frm" method="post"><input id="un" name="un" type="text" class="required" watermark="用户名" /><input id="pwd" name="pwd" type="password" class="required lock pad" watermark="{html:'密码 ',cls:'pad empty'}"/><input type="submit" value="登陆"/>
</form>
直接使用watermark标签就可以给文本框或文本区域增加水印效果,如上用户名,同时也可以使用对象的形式{},如上密码部分使用{html:'密码 ',cls:'pad empty'},html表示水印文字,cls表示水印的CSS样式。
详细看附件 jquerywatermark..rar
Watermark ,同样是一个给文本框增加水印效果的插件,实现文本框必填提示或自动时间间隔提示等,使有非常简 单,效果图如下:
使用说明
需要使用jQuery库文件和Watermark库文件
http://jquery.com/
http://plugins.jquery.com/project/jquery-watermark
同时需要自定义表单CSS样式
使用实例
一,包含文件部分
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.watermark-2.0.min.js"></script>
二,HTML部分
<form id="gideon" action="" method="GET" class="cmxform"><h3>Watermark Demonstration </h3><fieldset><ol><li><label for="d5-username">用户名 <em>*</em></label> <input id="d5-username" name="d5-username" /></li><li><label for="d5-password">密码 <em>*</em></label> <input id="d5-password" name="d5-password" type="password" maxlength="10" /></li><li><label></label> <input type="submit" value="提交" /></li></ol></fieldset></form>
三,javascript部分
$(function () { $("#d5-username").watermark("biuuu.com请你需入用户名"); $("#d5-password").watermark("biuuu.com请你需入需入你的密码"); });
如上实例,使用jQuery插件Watermark实现自定义文本框水印提示效果,只需要指定所提示水印效果的ID,然后提供提示文字,就能实现简单的文 本框水印效果。
$("#ID").watermark("水印提示");
其它应用可以根椐具体需求进行扩展,使用watermark 插件实现自定义文本框水印提示效果值得推荐。
下载Watermark插件源代码
http://plugins.jquery.com/project/jquery-watermark
或下载附件 jquery.watermark.zip
jQuery水印插件 - Watermark 和 FormWatermark相关推荐
- html 水印插件,Watermark.js 在浏览器端添加水印插件 - 文章教程
Watermark.js 是一个 JavaScript 框架用于以批量的方式对图片插入水印.它利用 HTML5 canvas 标签实现,只要为图片添加特定的 Class 就能添加水印.采用 ES6 编 ...
- html 水印插件,jquery图片水印插件
Img2Blob.js是一款可以为图片添加自定义水印的jquery插件.该jquery图片水印插件可以将图片转换为blob对象,然后为其添加自定义水印效果. 使用方法 在页面中引入jquery和img ...
- WordPress图片水印插件 Easy Watermark
1.概述 WordPress图片水印插件Easy Watermark 是一款实现上传图片自动添加水印LOGO功能的高效插件.当我们在WordPress网站后台上传图片文件到媒体库时,或者在发布文章上传 ...
- 超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
- 超强1000个jquery极品插件!(连载中。。。。最近更新20090710)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 超强1000个jquery极品插件!(感觉好强大,转载一下)
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++++++++++++++++++++++++ ...
- 超强1000个jquery极品插件!
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ accordion类 +++++++++++++ ...
- typecho图片水印插件
注意 插件目录必须为 waterMark,不然会无法启用. 如果使用后无法上传图片,请检查是否安装 php-gd 更新 2021-9-27 取消了对 typecho 版本的要求 增加了 2x 水印的支 ...
- VMware 云桌面水印插件
本插件是VMware下一款基于Horizon虚拟桌面的盲水印插件. 什么是盲水印? 它可以在Horizon虚拟桌面的屏幕上,叠加一层肉眼无法看到的"水印"图片.更重要的是,这个&q ...
最新文章
- VS2013 越来越慢
- 输出可爱的”杨辉三角”
- 搜索打表大找规律 (hdu2045)
- Sequence Sorting CodeForces - 1223D(思维)
- CentOS安装cheat和tldr
- java导出服务器已经配置好的excel模板
- img src SVG使用CSS更改样式
- 如何在Mac上合并日历
- base/7/x86_64/filelists_db FAILED
- OSI七层模型及TCP/IP五层模型
- 数据库系统原理及mysql应用教程第二版_数据库系统原理及MySQL应用教程(第2版十三五普通高等教育规划教材)...
- Python日期时间格式转换
- 利用计算机可视化画一个矩形,可视化程序设计大作业题目
- 使用JOPENS-MSDP系统进行简单的地震定位
- java 12306 源码_java Web SpringMVC项目实现12306余票查询功能
- vue音乐卡住_大神教你解决vue怎么添加音乐【突破措施】
- python快速幂算法解决大数取模
- 创益德:30条APP开发商必懂原则话您知
- 关于红黑树:了解是什么? 为什么设计? 会有什么效果? 什么时候用?
- 【JUC源码专题】Striped64 核心源码分析(JDK8)