<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>jQuery-Tip控件</title>
<script src="jQuery.js" type="text/javascript"></script>
<script src="wdk.tip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
/*
$.toastrNotify.messageFields = {
uuid:'msg_uuid',
title:'msg_title',
sender:'sender_name',
content:'content',
type:'msg_type',
date:'syscreatedate'
};*/
$.toastrNotify.ajaxCallbackFunc = function(uuids){
if(uuids){
}
};
});
function showAlert(){
$.toastrNotify.startBlinkTitle('【提醒xx】');
$.toastrNotify.browserNotify('提醒','消息内容体');
}
function add(a,b,s,d){
$.toastrNotify.showTip(a,b,s,d);
}
$(function() {
//connect();
$("#btn").click(function() {
var value = $("#message").val();
$.ajax({
url : "longpolling?method=onMessage&msg=" + value,
cache : false,
dataType : "text",
success : function(data) {
}
});
});
});
function connect() {
$.ajax({
url : "longpolling?method=onOpen",
cache : false,
dataType : "text",
success : function(data) {
connect();
alert(data);
}
});
}
</script>
<style type="text/css">
body{
background-color: #FFF;
}
.tip-container{
/*height:18px;
filter:alpha(Opacity=50);
-moz-opacity:0.5;
opacity: 0.5;
border: #a6b4cf 1px solid;*/
background-color: #f7f7f7;
z-index:999990;
-moz-box-shadow:5px 5px 15px #ddd;
-webkit-box-shadow:5px 5px 15px #ddd;
box-shadow:-5px -5px 15px #ddd;
/*padding-top:5px;*/
}
.tip-container>.tip-title{
font-size: 12px;
color: #0f2c8c;
/*margin-right:5px;*/
cursor:pointer;
width:100%;
height:25px;
background-color: #666;
}
.tip-container>.tip-title span{
line-height:25px;
color:#FFF;
padding-right:6px;
}
.tip-item{
z-index:999999;
border:1px solid #e5e5e5;
background-color: #fff;
}
.tip-item .tip-item-title{
height:50px;
width:100%;
}
.tip-item-title .tip-icon{
height: 30px;
width:30px;
margin:10px;
line-height: 30px;
text-align: center;
color:#FFF;
float: left!important;
}
.tip-item-title .tip-close{
padding-right:5px;
font-size: 20px;
color:#c9c9c9;
cursor:pointer;
float: right!important;
}
.tip-item-title .tip-title-main{
padding-top:8px;
color:#333;
font-weight: bold;
display: block;
font-size:15px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tip-item-title .tip-title-extra{
color:#999;
font-size:12px;
display: block;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tip-item-title .tip-icon.info{
background-color: #F1C40F;
}
.tip-item-title .tip-icon.message{
background-color: #659BE0;
}
.tip-item .tip-item-content{
height:58px;
margin:10px;
margin-top:1px;
overflow: hidden;
}
.tip-item .tip-item-content span{
display: -webkit-box;
display: -moz-box;
font-size: 14px;
color:#666;
line-height:18px;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}
</style>
</head>
<body>
<input type="button" onclick="showAlert();" value="提醒"></input>
<input type="button" onclick="$.toastrNotify.stopBlinkTitle();" value="关闭提醒"></input>
<a href="javascript:add({
type:'0'
,title:'全新2.0系统可升级'
,content:'1与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket。文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用并未涉及。此外,Servlet的配置也采用注解的方式,相关知'
,isAutomaticClose:true
});">添加1</a>
<a href="javascript:add({
type:'0'
,title:'全新2.0系统可升级'
,content:'2与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket。文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用并未涉及。此外,Servlet的配置也采用注解的方式,相关知'
,isAutomaticClose:false
});">添加2</a>
<a href="javascript:add({
type:'1'
,title:''
,sender_name:'测试人'
,date:'2017.12.11'
,content:'3与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket。文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用并未涉及。此外,Servlet的配置也采用注解的方式,相关知'
,isAutomaticClose:false
,uuid:'xxxx'
});">添加3</a>
<br> <br> <br> <br> <br> <br>
<h1>LongPolling</h1>
<input type="text" id="message" />
<input type="button" id="btn" value="发送" />
<div style="height:10px;"></div>
<div class="tip-item" style="height:130px;width:300px;">
<div class="tip-item-title">
<div class="tip-icon info fa fa-bell-o"">
</div>
<div>
<span class="tip-close">×</span>
<span class="tip-title-main">系统消息:全新2.0系统可升级</span>
<span class="tip-title-extra">管理员  2017.12.4</span>
</div>
<div style="clear: both;"></div>
</div>
<div class="tip-item-content"><span>
与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket。文章旨在演示如何实现以上两种技术手段,Struts2或SpringMVC中的应用并未涉及。此外,Servlet的配置也采用注解的方式,相关知
</span></div>
</div>
<div style="height:10px;"></div>
<div class="tip-item" style="height:130px;width:300px;">
<div class="tip-item-title">
<div class="tip-icon info fa fa-bell-o">
</div>
<div>
<span class="tip-close">×</span>
<span class="tip-title-main">系统消息:全新2.0系统可升级</span>
<span class="tip-title-extra">管理员  2017.12.4</span>
</div>
<div style="clear: both;"></div>
</div>
<div class="tip-item-content"><span>
与传统的MVC模型请求必须从客户端发起由服务器响应相比,使用反向Ajax能够模拟服务器端主动向客户端推送事件从而提高用户体验。本文将分两个部分讨论反向Ajax技术,包括:Comet和WebSocket。文章旨