仿win10侧边滑出提示框

所属分类:UI-工具提示

 24896  356  查看评论 (11)
分享到微信朋友圈
X
仿win10侧边滑出提示框 ie兼容9

更新时间:2021-09-30 18:27:54

更新说明:新增紧凑布局功能,修改了一些问题隐患代码,重新更新了api说明

{
    title: "",
    head头部显示的标题内容
    message: "", // 内容区域 动态生成div时,将根据ajax获取的数据并拼接好的html字符串放到此处即可       
    duration: 5000, // 提示框停留时间(毫秒为单位)  默认值为5000ms       
    space: 10, // 通知窗之间上下间隔 单位px(默认值为8)       
    firstSpace: 8, // 第一个提示框距离页面 上方或(下,左,右)的距离 (默认值为8)       
    margin: 15, // 提示框 距离左右两边的距离 (默认值15px)        
    width: 300, // 提示框宽度,默认为auto不换行        
    limit: 4, // 限制提示框数量(默认值为4)        
    compact: true, // 是否为紧凑型,开启后当某一个tip被关闭,后面的tip会自动向前靠        
    toastType: 'info', // tip的样式,默认四种 info danger warning error        
    timingFun: 'linear', // 动画运动曲线(默认值为ease)        
    direction: 'right bottom', // 提示框滑出方向默认right bottom       
    type: 'click', // 触发方式(内容区域)        // 上方type属性的事件触发后的回调函数        
    action: function() {
        console.log('执行了')
    }
}

更新时间:2019/1/17 下午8:25:46

更新说明:

  • 更新了UI,使其更简洁大方

  • 更新图标,转化成了base64位

  • 加入了鼠标移入暂停计时,提示框不会消失,鼠标移出后继续计时,根据剩余事件结束移出事件

  • 增加了4种类型的提示框 infosuccesswarningerror

  • 更新了demo演示页,查看演示时,可以根据4个按钮弹出不同类型的提示框

  • 优化了提示框弹出方向部分问题


更新时间:2019/1/16 上午11:26:23

更新说明:增加多个新属性解决快速点击出现多个提示框后,叉掉中间的,再点击添加新的提示框位置会与其他的重叠的问题.并更新了样式


注意: 必须btn不是必须的,你可以是任何情况下去初始化插件,必须提供一个最外层div容器(本可以不需要你提供,但是考虑到样式的定制化,写成了这样,你可以通过该外层div容器来根据自己需求覆盖样式,定制自己的需求)

<button  >click Me !</button>
<!-- 右下角消息提示框 -->
<div ></div>
$('.btn').on('click', function() {
    // 以下属性 字符串类型的必须是string 但 Number类型的属性值传入string类型也可以
    $('.tips').initTips({
        // title: "", // head头部显示的标题内容
        // message:"",// 内容区域 动态生成div时,将根据ajax获取的数据并拼接好的html字符串放到此处即可
        duration: 5000, // 提示框停留时间(毫秒为单位)  默认值为5000ms
        space: 10, // 通知窗之间上下间隔 单位px(默认值为8)
        firstSpace: 8, // 第一个提示框距离页面 上方或(下,左,右)的距离 (默认值为8)
        margin: 15, // 提示框 距离左右两边的距离 (默认值15px)
        // width:300, // 提示框宽度,默认为auto不换行
        // limit:4, // 限制提示框数量(默认值为4)
        // timingFun:'linear',// 动画运动曲线(默认值为ease)
        // direction:'right bottom', // 提示框滑出方向默认right bottom
        // type:'click', // 触发方式(内容区域)
        // 上方type属性的事件触发后的回调函数
        // action: function () {
        //     console.log(1)
        // }
    });
})
相关插件-工具提示

jQuery网页新功能步骤引导

在网站上经常看到的网页新功能步骤引导
  工具提示
 22192  324

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 29053  290

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 30267  376

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 24897  356

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    AI萌萌呆瓜 0
    2021/11/30 11:44:21
    怎么根据在线人员发送消息栏后,自动弹出消息提醒
        西瓜0
        2021/11/30 15:39:47
        本地设置定时器,ajax获取数据。
        lvjunhao0
        2022/3/11 14:37:07
        不建议定时器,首先如果了解过js的事件循环机制以及setInterval特性,会知道这样做丢帧有风险,另外性能也不好。建议使用websocket做长链接
    回复
    ?OK???、 0
    2021/3/11 20:39:44
    怎么让这个插件 总共展示三个 第二个关掉 第一个 自动回落到 第二个的位置上
        lvjunhao1
        2021/9/30 18:04:08
        limit: 3,这样就限制了. 可以阅读一下api说明.另外你提的这个需求,并没有.感觉有点鸡肋的功能.
        不过我还是加上了,你可以更新到最新版本.刚更新的,估计一天就过审了
    回复
    稳食 0
    2019/5/29 23:26:37
    lvjunhao 0
    2019/1/18 9:42:08
    初衷本就是为了分享,没有JQ币的同学可以去我github上down下来.已经上传到git了.顺手给个星星不过分吧?
        lvjunhao0
        2019/1/18 9:42:40
        https://github.com/lvjunhao/toastrTips或者搜索toastrTips
        郑虎 淮工0
        2019/3/2 9:21:02
        给力
    回复
      0
    2019/1/8 8:59:11
    不能转载?
        lvjunhao0
        2019/1/16 11:22:39
        可以,不做限制
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复