仿win10侧边滑出提示框

所属分类:UI-工具提示

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

更新时间: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)
        // }
    });
})
相关插件-工具提示

按首字母搜索(仿携程)

城市查找按首字母搜索(仿携程)
  工具提示
 34927  400

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 29187  363

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 41178  372

jquery自动关闭消息通知插件izitoast.js

iziToast.js是一款跨浏览器响应式消息通知插件。该消息通知插件体积小,使用简单。消息显示时带CSS3动画效果,时尚大方。
  工具提示
 30994  417

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

    ?OK???、 0
    2021/3/11 20:39:44
    怎么让这个插件 总共展示三个 第二个关掉 第一个 自动回落到 第二个的位置上 回复
    稳食 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
        可以,不做限制
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复