分享学习心得,记录学习笔记
文章:38   访问:110372
今天是:
2019年10月19日 星期六
  >   文章列表   >   文章详情

基于Jquery的消息弹窗

功能说明

  • 此消息框会在用户进入后台时弹出一次(无消息则不弹出),其后每隔1分钟查询发送一次消息查询请求,消息有变化则再次弹出消息框,否则不弹出。
  • 在模板中创建,后台任意界面都可以看到消息
  • 消息可设置链接

使用说明

1. 任意控制器中加一个查询消息的接口getMsg(),名字自定义

  1. /**
  2. * 后台消息数据监听请求
  3. * @return array
  4. * @throws \think\Exception
  5. */
  6. public function getMsg()
  7. {
  8. $listen = \config('notice_listen');
  9. if (empty($listen)) return [];
  10. $msg = [];
  11. foreach ($listen as $item) {
  12. $num = db($item['table'])->where($item['condition'])->count();
  13. if (!empty($num)) {
  14. $href = !empty($item['url'])?'onclick="self.location=\''.$item['url'].'\'"':'';
  15. $msg[] = '<span style="cursor: pointer;" '.$href.'>'.'<b>'.$item['desc'].'</b>'.$num.'</span>';
  16. }
  17. }
  18. if (!empty($msg)) {
  19. return ['data' => $msg, 'md5' => substr(md5(json_encode($msg, JSON_UNESCAPED_UNICODE)), 0, 8)];
  20. } else {
  21. return ['data' => [], 'md5' => null];
  22. }
  23. }

2. 配置文件中增加监听配置:

  1. //...
  2. 'notice_listen' => [
  3. [
  4. // 表名
  5. 'table' => 'user',
  6. // 条件
  7. 'condition' => 'status = "待审核"',
  8. // 消息名
  9. 'desc' => '待审核项目数量:',
  10. // 消息链接
  11. 'url'=>'/admin/project/project?ref=addtabs'
  12. ],
  13. [
  14. 'table' => 'user',
  15. 'condition' => 'approve = "待审核"',
  16. 'desc' => '待认证用户数量:',
  17. 'url'=>'/admin/user/user?ref=addtabs'
  18. ],
  19. // ...
  20. ],

3. 在后台框架的最底层模板文件中引入fuyelk.js(引入前需引入jquery),
如:application/admin/view/index/index.html 文件:

  1. <script src="/assets/libs/jquery/dist/jquery.js"></script>
  2. <script src="/static/common/js/fuyelk.js"></script>
  3. <script>
  4. // 创建消息对象
  5. var msg = new fuyelk();
  6. // 创建消息监听,接口为前面写的接口,刷新时间为1分钟
  7. msg.createInterval('/admin/index/getmsg',60000);
  8. </script>

js中可用的方法

  1. 创建对象: var msg = new fuyelk('消息框标题')
  2. 创建单条消息: msg.create(data);
  3. 创建列表消息: msg.createList(data)
  4. 显示消息: msg.show();
  5. 关闭消息: msg.close();
  6. 显示消息条: msg.showBar();
  7. 关闭消息条: msg.closeBar();
  8. 销毁消息: msg.destory();
  9. 通过API获取消息(单次): msg.ajax('/api.html');
  10. 定时通过API获取消息: msg.interval('/api.html',10000);


=========================================

fuyelk.js文件如下

/**
* fuyelk.js
*
* 屏幕右下角消息弹窗,十秒钟自动退出
*
* createtime :2019820
* Author: fuyelk
* email: xj@milinger.com
*
* @param title 消息框标题
*
* 可执行方法
*
* 创建对象: var msg = new fuyelk('通知消息')
*
* 创建消息: msg.create(data);
*
* 创建列表消息: msg.createList(data)
*
* 显示消息: msg.show();
*
* 显示消息条: msg.showBar();
*
* 关闭消息: msg.close();
*
* 关闭消息条: msg.closeBar();
*
* 销毁消息: msg.destory();
*
* 通过API获取消息: msg.ajax('/api.html');
*
* 定时通过API获取消息: msg.interval('/api.html',10000);
*/

function fuyelk(title) {

// 当前对象别名
var that = this;
// 消息内容高度
this.msg_height = 300;

// 消息框消失时间
this.msg_close_time = 10000; // 10

// 轮询间隔时间
this.reqInterval = 60000; // 1分钟


// 展开图标
this.imgShow = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACYElEQVRoge2XTYhNYRjHnzloQjSaUrJifI2Fna/bWCDUbBQNG5KFpCymJFKWYjFLKzYiSmymRDE+0l0ojY8i6Waa0iQlcrlqpvH7W8xRp+u875175557Uu9vfZ7/8//d2znnPWaBQCAQCAQCgUAN2rIMB+ab2VYzazezB1EUlbPclwnAMmAQ+An8AorAhrx71QWwDnisKoASsCXvftNCUg/wvloiITMK7M67pxdgO/DBJZGQKQMH8+6bCnAA+FpLokrmiKRMHzh1ARwCvjkKfwc+eYTO5t3fzMyAM0DFcz/0AgXgteOaSeCcpHl5CbTHEr8dBUeAnYnr1wJFzz9zOX7vtFRiAXDJU2oY2JgytxoY8sxdBZa0SqJT0hVPmWfASs/8YuCWZ34I6MpUQtJy4K6nxM3p/KLAQuCGK0fSE2BVJhJAF/DIJyGpY7p5kuZIuuDJewdsbrbEemDYs/SipEX15kqKgPOeB0YJKDRLogCMeCQGJM1uNF/SLKAf+OHI/wjsmZGEpD7gs2NBBTgxE4kkwDGg7NhVBvY3GrzPdeSIg482Q6Bq515gzLOzX1JUT+Bxz5FjVFJfsyUSu7fFO9J2TwCnaoZIagNOAhMuCWBHVhIJmU3AC0eHcWAAmOsLOOx5grxq5UcR0A08T+sSc9o3fM8h8RLobpXEXyStAR46Or1xDgLXUwbuACta2L+6UycwmNLrqXNIU5+ppfimqgC31cCLrtlI6gCuxZ0mgTGgN3nNP19n8YGvx8y+mNn9KIrGW9TXi6aONLvMbKmZFaMoept3p0AgEAgEAoHAf8YfRKNn4ePQT5UAAAAASUVORK5CYII=";

// 收起图标
this.imgClose = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACFElEQVRoge2XP2jUYBiH38RWRKTioFQQUeiigw4VKYhLBTcHqYObiwpOulVwEnFQcBB0EgRBxKUugtDFTbCCLg4dimhF6FBbcRCq4PNziRDP5E3uLl+yfM94l/f3J3yXvGcWiUQikUgkEolUkPR+IGm7pCkzW03T9F0HmUoBpsxsr5ktpGm67F14EFhSBvBI0mhrSR2Au7lca8Ax7+I59QDMA2MtZv4HSSPAk4JcryT9d6LMzAx40zuQDb2WNN5yB5O0DXhRkumDpLRwELhSNJQNLgITbZUAdmV3vSzPzSqB287wF0mTLZTYD7x3cjyUNFJHaNYRWQemA5Y4DCw7/nf6FbzgiG0AMwFKHAdWHd9rgwrPABuO8PkGS5wCfjhel4Y1mAbWHYPZBkqcA36X6P8Czg7rYWZmkiazH3pZmVtDlLjs6H4HTjZSImc4ASw6pg8G0Lzu6K0ARxst8RdJ49nLscx8TtKWmiXuOTpLwIEgJXIBxoB5J8RLSTvK5iVtAh4782+BPUFL5MKMAk/7DSNn5ahzE4IB3K97PICdFSvHM9U8lqHK3HDCrWRv6t0VK0ffD4ogVCyba8Bn5/uBH91B8F5qDle7zl1I1ZrRw8Wu87rUWPx+Ame6zlkL4BDwqaDEN+BE1/n6QtI+YCFX4iNwJJRf8Z/3hpC0WdJpM9uaJMnzJEm+hvSLRCKRSCQSiURc/gBmWEcdutN39wAAAABJRU5ErkJggg==";


if (undefined === title) {
this.title = '通知消息';
} else {
this.title = title;
}


/**
* 显示消息框
*/
this.show = function () {
that.closeBar();
$('.fuyelk-notice').stop().animate({
height: 45+that.msg_height
});
setTimeout(that.close,that.msg_close_time);
that.showBar();
};

/**
* 显示消息条
*/
this.showBar = function () {
$('.fuyelk-notice-bar').fadeIn();
};

/**
* 关闭消息框
*/
this.close = function () {
$('.fuyelk-notice').stop().animate({
height: '0'
});
};

/**
* 关闭消息条
*/
this.closeBar = function () {
$('.fuyelk-notice-bar').fadeOut();
};

/**
* 添加关闭按钮的监听
*/
function addCloseListen() {
$('.fylk-nt-close').on('click', function () {
that.close();
});
}

/**
* 创建消息框,及CSS
* @param content
*/
this.create = function (content) {
var dom_notice = '' +
'<div >' +
' <div >' +
' <span>' + that.title + '</span>' +
' <span ><img src="'+that.imgClose+'" title="收起" alt="收起"></span>' +
' </div>' +
' <div >' + content + '</div>' +
'<div >' + getCSS() + '</div>'+
'</div>';
$('body').append(dom_notice);
addCloseListen();

// 检查消息条是否已创建
if ($('.fuyelk-notice-bar').length ===0) {
that.createMsgbar(1);
}

// 消息不为空则显示消息框,否则显示消息条
if (content !== '' && content !== undefined) {
that.show();
}else{
that.showBar();
}
};

/**
* 创建收起的消息条,及CSS
* @param num
*/
this.createMsgbar = function (num) {
if (undefined === num) {
num = 0;
}
var dom_notice = '' +
'<div >' +
' <div >' +
' <span>' + that.title + '</span><span style="color: #fff;font-weight: bold"> '+num+' </span>' +
' <span ><img src="'+that.imgShow+'" title="展开" alt="展开"></span>' +
' </div>' +
'<div >' + getCSS('bar') + '</div>'+
'</div>';
$('body').append(dom_notice);
$('.fylk-nt-show').on('click', function () {
that.show();
});
};

/**
* 销毁消息框
*/
this.destory = function () {
$('.fuyelk-notice').remove();
$('.fuyelk-notice-bar').remove();
};

/**
* 创建列表消息
* @param data 消息数据
*/
this.createList = function (data) {
// 消息框高度为条数*35px
if (data.length < 3) {
that.msg_height = 105;
} else {
that.msg_height = data.length * 35;
}
var dom_content = '';
if (data.length !== 0 ) {
var dom_notice_li = '';
for (var i=0;i<data.length;i++) {
dom_notice_li += '<li >' + data[i] +'</li>';
}
dom_content = '<ul >' + dom_notice_li + '</ul>';
}
that.createMsgbar(data.length);
that.create(dom_content);
};

/**
* 检查消息是否有更新,有则更新消息框和校验值
*/
function checkMsg(data) {
var check_ele = $('.fylk-nt-check');
if(check_ele.length === 0 || check_ele.data('notecimd5') !== data.md5) {
if (check_ele.length ===0) {
$('body').append('<span style="display: none;" >+ data.md5 + '"></span>');
}else{
check_ele.data('notecimd5',data.md5);
}
that.destory();
that.createList(data.data);
}
}

/**
* 通过API创建消息
* @param api 获取消息接口
*/
this.ajax = function (api) {
$(function(){
$.ajax({
type : "GET",
contentType: "application/json;charset=UTF-8",
url : api,
success : function(result) {
checkMsg(result);
},
error : function(e){
console.log(e);
}
});
});
};

/**
* 定时通过API创建消息
* @param api 获取消息接口
* @param time 定时时间(毫秒)
* @returns {boolean}
*/
this.createInterval = function (api,time) {
if (undefined === api) {
return false;
}
if (undefined === time) {
time = that.reqInterval;
}
that.ajax(api);
setInterval(function () {
that.ajax(api);
},time);
};
}

/**
* 获取CSS
* @param ele
* @returns {string}
*/
function getCSS(ele) {
if (ele === 'bar') {
return ''+
'<style>\n'+
'.fuyelk-notice-bar{background-color: #fff;width: 200px;height: 45px;display: none;max-height: 360px;float: left;position: absolute;bottom: 0;right: 0;z-index: 1000;margin: 0;padding: 0;overflow: hidden;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px 0 0 0;}\n' +
'.fuyelk-notice img{max-width: 250px;}\n' +
'.fylk-nt-title{width: 100%;height: 45px;color: #fff;line-height: 45px;padding-left: 15px;font-size: 16px;background-color: rgba(18,188,156,0.9);}\n' +
'.fylk-nt-show {float: right;width: 50px;height: 45px;text-align: center;cursor: pointer;}\n' +
'.fylk-nt-show img{width: 25px;height: 23px;}\n' +
'.fylk-nt-show:hover{background-color: #15A185;}\n' +
'</style>\n';
}
return ''+
'<style>\n'+
'.fuyelk-notice{background-color: #fff;width: 300px;height: 0;max-height: 360px;float: left;position: absolute;bottom: 0;right: 0;z-index: 1000;margin: 0;padding: 0;overflow: hidden;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px 0 0 0;}\n' +
'.fuyelk-notice img{max-width: 250px;}\n' +
'.fylk-nt-title{width: 100%;height: 45px;color: #fff;line-height: 45px;padding-left: 15px;font-size: 16px;background-color: #18BC9C;}\n' +
'.fylk-nt-close {float: right;width: 50px;height: 45px;text-align: center;cursor: pointer;}\n' +
'.fylk-nt-close img{width: 25px;height: 23px;}\n' +
'.fylk-nt-close:hover{background-color: #15A185;}\n' +
'.fylk-nt-content{width: 100%;max-height: 315px;overflow: hidden;}\n' +
'.fylk-nt-ul{width: 100%;margin: 0;padding: 0;}\n' +
'.fylk-nt-li{width: 300px;height: 35px;line-height: 35px;margin: 0 0;padding: 0 10px;border-bottom: 1px dashed #80808073;list-style: none;overflow: hidden;}\n'+
'</style>\n';
}



友情链接 doywb

2018 Copyright© 米灵尔 小熊 豫ICP备15007436号-1

豫公网安备 41152302000146号