jquery的jquery消息插件jquery.messager.js

 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>
posted on 2017-01-18 22:31 Sharpest 阅读(621) 评论(0) 收藏举报