View on GitHub

Messenger

非常酷的弹框组件

下载 .zip 文件 下载 tar.gz 文件

HubSpot 弹框组件库

依赖

包含

JS文件

/build/js/messenger.min.js

CSS文件

/build/css/messenger.css
/build/css/messenger-theme-future.css

案例展示


# Replace:
$.ajax
    url: "/some-url"
    success: ->

# With:
$.globalMessenger().do
    errorMessage: "This did not go well."
,
    url: "/some-url"
    success: ->

使用手册 下面的代码都是可编辑的

改变弹框方位

改变弹框主题

    改变编码语言

    • JavaScript
    • CoffeeScript

    
    $.globalMessenger().post "Your request has succeded!"
    
    $.globalMessenger().post
        message: 'There was an explosion while processing your request.'
        type: 'error'
        showCloseButton: true
    
    msg = $.globalMessenger().post "My Message"
    msg.update "I changed my mind, this is my message"
    msg.hide()
    
    # Want to put actions at the end of your messages?
    msg = $.globalMessenger().post
        message: 'Launching thermonuclear war...'
        type: 'info'
        actions:
            cancel:
                label: 'cancel launch'
                action: ->
                    msg.update
                        message: 'Thermonuclear war averted'
                        type: 'success'
                        actions: false
    
    # This guy will 500 a few times, then succeed
    i = 0
    $.globalMessenger().do
      errorMessage: 'Error destroying alien planet'
      successMessage: 'Alien planet destroyed!'
    
      action: (opts) ->
        if (++i < 3)
          opts.error({status: 500, readyState: 0, responseText: 0})
        else
          opts.success()
    
    
    # Have an error? How about auto retrys with a Gmail-style countdown
    # (hidden in the future theme)?:
    msg = $.globalMessenger().post
        message: "I'm sorry Hal, I just can't do that."
        actions:
            retry:
                label: 'retry now'
                phrase: 'Retrying TIME'
                auto: true
                delay: 10
                action: ->
                    # Do some retrying...
    
            cancel:
                action: ->
                    do msg.cancel
    
    # You can bind to action events as well:
    msg.on 'action:retry', ->
        alert('Hey, you retried!')
    
    # Need more control? You can bind events backbone-style based
    # on the type of message.
    msg.update
        events:
            'success click': ->
                # Will fire when the user clicks the message
                # in a success state.
    
            'error click a.awesome-class': ->
                # Rock on
    
    # Need your message to hide after a while, or when the Backbone
    # router changes the page?
    $.globalMessenger().post
        message: "Weeeeee"
    
        hideAfter: 10
        hideOnNavigate: true
    
    # You can use the id property to ensure that only one
    # instance of a message will appear on the page at a time
    # (the older message will be hidden).
    $.globalMessenger().post
      message: "Only one at a time!"
      id: "Only-one-message"
    
    # When you add the singleton attribute, it ensures that no
    # other messages with that id will ever be shown again
    # (the newer message will be hidden).
    $.globalMessenger().post
      message: "It's just me!"
      id: '4'
      singleton: true
    
    $.globalMessenger().post
      message: "You'll never see me"
      id: '4'
      singleton: true
    
    # Rather than hiding and showing multiple messages
    # you can also maintain a single message between
    # requests.
    msg = $.globalMessenger().do()
    $.globalMessenger().do({messageInstance: msg})
    
    # Don't want your message hidden on a long page? (Not necessary
    # if you're using the default fixed positioning)
    msg = $.globalMessenger().post
        message: "You'll see me!"
    
        scrollTo: true
        # Requires jQuery scrollTo plugin
    
    msg.scrollTo() # also works
    
    # Lazy/smart? How about messenger does it all for you?  All the
    # retry magic comes with.
    $.globalMessenger().do
        successMessage: 'Data saved.'
        errorMessage: 'Error saving data'
        progressMessage: 'Saving data' # Don't include messages you
                                       # don't want to appear.
    
        # Any standard message opts can go here
    ,
        # All the standard jQuery ajax options here
    
        url: '/data'
    
    # Need to override the messages based on the response?
    $.globalMessenger().do
        errorMessage: 'Oops'
    ,
        url: '/data'
        error: (xhr) ->
            # Whatever you return from your handlers will replace
            # the default messages
    
            if xhr?.status is 404
                return "Data not found"
    
            # Return true or undefined for your predefined message
            # Return false to not show any message
    
            return true
    
    # Sometimes you only want to show the success message when a
    # retry succeeds, not if a retry wasen't required:
    $.globalMessenger().do
        successMessage: 'Successfully saved.'
        errorMessage: 'Error saving'
    
        showSuccessWithoutError: false
    ,
        url: '/data'
    
    # You don't have to use $.ajax as your action, messenger works
    # great for any async process:
    $.globalMessenger().do
        successMessage: 'Bomb defused successfully'
    
        action: defuseBomb
        # You can put options for defuseBomb here
        # It will be passed success and error callbacks
    
    # Need to hide all messages?
    $.globalMessenger().hideAll()
    
    # If your action responds with a promise-like thing, its
    # methods will be copied onto the message:
    
    $.globalMessenger().do({}, {url: 'a'}).fail(-> alert "Uh oh")
    
    # Do you use Backbone? Hook all backbone calls:
    $.globalMessenger().hookBackboneAjax()
    
    # By default, there will be no error message (just background
    # retries), return an error message from your backbone error handler,
    # or add an errorMessage to the messenger opts to set one.
    # You can override these options by passing them into
    # hookBackboneAjax, or adding a {'messenger': } hash to your
    # fetch call.
    
    # You don't have to use the global messenger
    $('div#message-container').messenger().post "My message"
    
    # By default, the global messenger will create an ActionMessenger
    # instance fixed to the bottom-right corner of the screen.
    
    # You can pass an instance of messenger into globalMessenger
    # to override the default position.
    myAwesomeMessenger = $('.mess').messenger()
    $.globalMessenger({instance: myAwesomeMessenger});
    
    $.globalMessenger() # <-- Will return your messenger
    
    $.globalMessenger({'parentLocations': ['.page', 'body']});
    # Will try to insert the messenger into the el matching
    # .page before inserting it into the page.
    
    # This can be important if you're not using fixed positioning.
    
    # All the options for globalMessenger and their defaults:
    
    {
      'parentLocations': ['body'],
      'maxMessages': 9,
      'extraClasses': 'messenger-fixed messenger-on-right messenger-on-bottom messenger-theme-future',
      'instance': undefined,
      'messageDefaults': {
        # Default message options
      }
    }
    
    # You can also set default options on the $._messengerDefaults object.
    $._messengerDefaults = {'extraClasses': 'messenger-fixed messenger-on-left'}
    
    

    Contributing

    We welcome contributors!

    The build process requires nodejs and grunt-cli. You can build the output files by running grunt. The automated tests can be run by opening SpecRunner.html in a browser.