闲的蛋疼，演示一下Jquery插件placeholder的用法，借助该插件能够轻松实现HTML5中placeholder特效：

效果图：

实现代码：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

	<head>

	    <title>借助jquery placeholder实现HTML5中placeholder特效</title>

	    <script type="text/javascript" src="<%=basePath%>js/jquery-1.8.3.min.js"></script>

	    <script type="text/javascript" src="<%=basePath%>js/jquery.placeholder.js"></script>

		<script type="text/javascript">

			$(function() {

				$('input, textarea').placeholder();

			});

		</script>

		<style type="text/css">

			input, textarea { font-family: Helvetica, Arial; color: #000;}

			.placeholder {color: #aaa;}

		</style>

	</head>

	<body>

		<center style="margin-top: 10%"><font style="font-size: 18pt; font-weight: bold;font-weight: bold; color: red;">借助jquery placeholder实现HTML5中placeholder特效</font></center><br><br>

	    <input type="text" id="userName" name="userName" placeholder="请输入username…" style="margin-bottom: 12px;"><br>

        <input type="password" id="password" name="password" placeholder="请输入密码…" style="margin-bottom: 12px;"><br>

        <textarea id="personalInformation" name="personalInformation" rows="3" cols="50" maxlength="200" placeholder="请输入个人信息…"></textarea>

	</body>

</html>

说明：上面样例并非HTML5页面，但因为使用了该插件所以看上去和HTML5的效果差点儿相同；上面样例使用了jquery-1.8.3.min.js和jquery.placeholder.js两个文件，这两个文件可在以下的下载资源中找到。

【0分下载资源】

Jquery插件placeholder的用法的更多相关文章

  1. jQuery插件placeholder的使用方法

    借助该插件可以轻松实现HTML5中placeholder特效: 实例代码如下: <script type="text/javascript" src="<%= ...

  2. jquery插件之jquery.extend和jquery.fn.extend的区别

    jquery.extend jquery.extend(),是拓展jquery这个类,即可以看作是jquery这个类本身的静态方法,例如: <!DOCTYPE html> <html ...

  3. 解决HTML5中placeholder属性兼容性的JQuery插件

    //调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text&quo ...

  4. jQuery插件制作之全局函数用法实例

    原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...

  5. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  6. 实用的placeholder插件，兼容IE下的placeholder，jquery插件

    placeholder在IE下无法兼容 ,下面的插件很好的处理了这个问题,拿去不谢 /* * jQuery placeholder, fix for IE6,7,8,9 * @website itmy ...

  7. JQuery插件之Jquery.datatables.js用法及api

    1.DataTables的默认配置 $(document).ready(function() { $('#example').dataTable(); } ); 示例:http://www.guoxk ...

  8. jquery插件Flot的简单讲解

    只是说一下基本用法,举一两个例子,详细用法请查看官方文档 使用方法是要先引入jquery插件,然后引入flot插件. <script type="text/javascript&quo ...

  9. html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...

随机推荐

  1. 1352 - Colored Cubes (枚举方法)

    There are several colored cubes. All of them are of the same size but they may be colored differentl ...

  2. 编译mapnik（win7 环境下vs2008编译mapnik 0.7.1 成功）

    编译mapnik(win7 环境下vs2008编译mapnik 0.7.1 成功) ------by  wangsh 2012.02.22 Mapnik 是一个开源的 Python/C++ 地图渲染引 ...

  3. 玩转大数据：深入浅出大数据挖掘技术(Apriori算法、Tanagra工具、决策树)

    一.本课程是怎么样的一门课程(全面介绍) 1.1.课程的背景           “大数据”作为时下最火热的IT行业的词汇,随之而来的数据仓库.数据分析.数据挖掘等等围绕大数据的商业价值的利用逐渐成为 ...

  4. uvc摄像头代码解析5

    8.初始化uvc控制 8.1 重要结构体 struct uvc_control { //uvc控制 struct uvc_entity *entity; //uvc实体 struct uvc_cont ...

  5. SRM 583 Div Level Two：IDNumberVerification

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12610 这道题比较有意思,估计是中国人出的吧,以前都不知道身份 ...

  6. [置顶] 无名管道的C++封装

    xpipe-无名管道的C++封装类 无名管道的C++封装类,用于父子进程进行通信 基础介绍 unix下一切皆文件,管道也不例外.无名管道pipe定义在<unistd.h>中. #inclu ...

  7. WPF的消息机制

    前言 谈起“消息机制”这个词,我们都会想到Windows的消息机制,系统将键盘鼠标的行为包装成一个Windows Message,然后系统主动将这些Windows Message派发给特定的窗口,实际 ...

  8. hdu 4706

    注意一点 空的地方打空格而不是空字符,我因为这wa了一次... #include<cstdio> #include<cstring> #include<cstdlib&g ...

  9. Lucene.Net 2.3.1开发介绍 —— 一、接触Lucene.Net

    原文:Lucene.Net 2.3.1开发介绍 -- 一.接触Lucene.Net 1.引用Lucene.Net类库找到Lucene.Net的源代码,在“C#\src\Lucene.Net”目录.打开 ...

  10. Android 系统搜索框（有浏览记录）

    实现Android 系统搜索框(有浏览记录),先看下效果: 一.配置搜索描述文件  要在res中的xml文件加创建sreachable.xml,内容如下: <?xml version=" ...