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