zoukankan      html  css  js  c++  java
  • Messenger 弹窗的使用

    关于Messenger 弹窗的文档及详细的说明请参考 Messenger官网,这时只介绍 Messenger 弹窗的使用

     messenger依赖与jquery和Backbone.js,可以和  Bootstrap 完美结合,但Bootstrap 并不是必需的

    1.首先要引用 css 文件,一个是全局的css文件即 messenger.css, 一个是 主题风格的样式文件 messenger-theme-future.css 

      <link href="/Content/scripts/messenger/messenger.css" rel="stylesheet" />
        <link href="/Content/scripts/messenger/messenger-theme-ice.css" rel="stylesheet" />

    2.引入 js 文件,与css 一样,一个是全局的js,即 messenger.min.js, 一个是主题样式 js  ,messenger-theme-future.js,

     <script src="/Content/scripts/messenger/messenger.min.js" type="text/javascript"></script>
     <script src="/Content/scripts/messenger/messenger-theme-future.js" type="text/javascript"></script>

    3.文件引入好后,开始配置弹窗的主题,及弹窗出现在页面上的位置

    • 有四种主题可选,弹出框有6个位置可供选择
    • Future 对应 messenger-theme-future.css
    • Block 对应 messenger-theme-block.css
    • Air 对应 messenger-theme-air.css
    • Ice 对应 messenger-theme-ice.css
            $._messengerDefaults = {
                extraClasses: 'messenger-fixed messenger-theme-ice messenger-on-top'
            }
    

     4.调用 messenger的接口,并设置好提示文字和一些样式 

            $.globalMessenger().post({
                message: "发生错误,请稍后重试!",
                hideAfter: 3,
                type: 'error',
                showCloseButton: true
            });
    

    参考文章:

     http://www.bootcss.com/p/messenger/      Messenger 官网

    http://github.hubspot.com/messenger/      git源码托管

    https://github.com/HubSpot/messenger/     giti源码

    http://segmentfault.com/a/1190000000358289   其它介绍

  • 相关阅读:
    hibernate入门
    struts文件上传
    Struts的增删改查
    struts入门
    Maven配置以及环境搭配
    layui增删改查
    easyui三
    A
    C. Permutation Cycle
    E
  • 原文地址:https://www.cnblogs.com/wisdo/p/5060341.html
Copyright © 2011-2022 走看看