JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
<script src="https://raw.github.com/bittersweetryan/envelope.js/master/envelope.jquery-0.1.js"></script>
<link rel="stylesheet" href="https://raw.github.com/bittersweetryan/envelope.js/master/envelope.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div id="content">
    <div id="messages"></div>
    <div id="section">
        Hello world.
        <input type="button" id="successButton" value="Trigger Success">
        <input type="button" id="errorButton" value="Trigger Error">
        <input type="button" id="untypedButton" value="Trigger Untyped">
    </div>
</div>

JavaScript

$(function(){
       
    /**
        initialize the plugin wherever you want to see messages    
        the first param should be the options, specify a ui 
        framework if you are using one, then send in an array of
        events to respond to, with options
    **/
    
      $("#messages").envelope(
        {uiFramework : 'bootstrap'}, //can also be jquerui or none
        [
            {
                name : 'test.success',  //name of event to resond to
                message: 'Success saving test.', //message to show
                type: 'success', //type of message, success, info, error
                callback : function(){console.log("Success!");}
            }, //callback to execute once the message is shown
            {
                name : 'test.error',
                message : 'Error saving test.',
                type : 'error',
                callback : function(){console.log("Oh Noes!");}
            },
            {
                name : 'test.untyped',
                message : 'Untyped saving test.',
                callback : function(){console.log("What do do?");}
            }
        ]
    );

    //all we have to do on our elements, or anywhere in our code
    //is trigger an event to display a message
    $("#successButton").on('click',function(){
        $(this).trigger('test.success');
    });

    $("#errorButton").on('click',function(){
        $(this).trigger('test.error');
    });
    
    $("#untypedButton").on('click',function(){
        $(this).trigger('test.untyped');
    });
    
  
});