闲的蛋疼，演示一下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. 1.1.6-学习Opencv与MFC混合编程之---播放WAV音乐和 alpha融合功能

    源代码:http://download.csdn.net/detail/nuptboyzhb/3961698 Alpha融合菜单项 1.      增加alpha融合菜单项,修改相应的属性,建立类向导 ...

  2. Apache 服务器

    1.介绍 Apache原来用于小型或试验性Internet网络,后来逐步扩展到各种系统中,对Linux的支持几乎完美.Apache可以支持SSL技术,支持多台虚拟主机.Apache是以进程为基础的结构 ...

  3. spring AOP 是如何一步一步被简化的

    Aop的配置使用 Aop的思想实现是基于代理设计模式的, 动态增加某些功能. 因此在最开始阶段 1 所有需要被织入的类都需要被代理(ProxyFactoryBean). 2 切面(advisor)的实 ...

  4. POJ3436 ACM Computer Factory 【最大流】

    ACM Computer Factory Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5412   Accepted: 1 ...

  5. linux（readhat） yum源安装

    在安装測试环境的时候遇到了一个问题,/etc/yum/repos.d中不存在文件或目录,无法更新yum源. 解决方法: (一.配置网络yum源) 1.首先在/etc/yum/repos.d/文件夹下创 ...

  6. (WinForm)文件夹状态监控,最小化到托盘,开机自启动

    原文 (WinForm)文件夹状态监控,最小化到托盘,开机自启动 . 文件夾監控(監測文件夾中的文件動態): //MSDN上的例子 public class Watcher { public stat ...

  7. JavaScript快速入门（二）——JavaScript变量

    变量声明 JavaScript的变量声明分为显式声明跟隐式声明. 显式声明 即带var关键字声明,例如 var example = example; 要注意JavaScript里面声明的关键字只有fu ...

  8. POJ2031Building a Space Station (最小生成树之prim)

    Problem Description You are a member of the space station engineering team, and are assigned a task ...

  9. App 运营 推广相关

    基本要素 1.定位和产品 2.取个好名字,一目了然+下载冲动 3.设计一个好图标,有感性和直观的认识 4.做好产品的说明.关键字,截图(前1-2行是重点) 5.做市场的排名(相关因素如下)   (1) ...

  10. 移植一个开源点餐网到SAE平台上

    记得以前我准备弄个点餐网的,但是由于一些原因没有做下去. 前几天将网上的一个点餐源码移植到了SAE上,网址http://diancan4sae.sinaapp.com. 我想做个外卖网,先选一个学校周 ...