1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>jQuery消息插件</title> 8 <script src="jquery-1.5.2.js"></script> 9 <script src="jquery.messager.js"></script> 10 <script src="jquery-offset.js"></script> 11 <script> 12 $(document).ready( function() { 13 $.messager.show(0,'送你一个Jquery Messager消息弹出插件！'); 14 $("#showMessager300x200").click( function() { 15 //该开发方法 主要用来定义弹出窗口的宽度和高度。 16 //1.$.messager.lays(width, height); 17 $.messager.lays(300, 200); 18 //3.$.messager.show(title,text,time); 19 //该开发方法 主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。 20 $.messager.show(0, '300x200的消息'); 21 }); 22 $("#showMessagerFadeIn").click( function() { 23 //2.$.messager.anim(type,speed); 24 //该开发方法 主要定义窗口以什么样的方式和速度呈现。 25 $.messager.anim('fade', 2000); 26 $.messager.show(0, 'fadeIn动画消息'); 27 }); 28 $("#showMessagerShow").click( function() { 29 $.messager.anim('show', 1000); 30 $.messager.show(0, 'show动画消息'); 31 }); 32 $("#showMessagerDim").click( function() { 33 $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>'); 34 }); 35 $("#showMessagerSec").click( function() { 36 $.messager.show(0, '一秒钟关闭消息', 1000); 37 }); 38 }); 39 </script> 40 <style type="text/css"> 41 <!-- 42 body,td,th { font-size: 12px; } 43 body { background-color: #fefefe; } 44 p { width:80%; height:auto; padding:10px; background-color:#D6F097; border:solid 1px #FF9900; color:#333; margin-left:auto; margin-right:auto;} 45 input { background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;} 46 --> 47 48 </style> 49 </head> 50 <body> 51 <p> 52 <input type="button" id="showMessager300x200" value="显示一个300x200的消息" /> 53 </p> 54 <p> 55 <input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /> 56 </p> 57 <p> 58 <input type="button" id="showMessagerShow" value="显示一个show动画消息" /> 59 </p> 60 <p> 61 <input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /> 62 </p> 63 <p> 64 <input type="button" id="showMessagerSec" value="一秒钟关闭消息" /> 65 </p> 66 </body> 67 </html>
