tangdehang
/
android-cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>toastr examples</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/toastr.js/2.1.4/toastr.min.css" rel="stylesheet" type="text/css" />
    <style>
        .row {
            margin-left: 0;
        }
    </style>
</head>

<body class="container">
<section class="row">
    <h1>toastr</h1>

    <div class="well row">
        <div class="row">
            <div class="span4">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label" for="title">Title</label>
                        <input id="title" type="text" class="input-large" placeholder="Enter a title ..." />
                        <label class="control-label" for="message">Message</label>
                        <textarea class="input-large" id="message" rows="3" placeholder="Enter a message ..."></textarea>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <label class="checkbox" for="closeButton">
                            <input id="closeButton" type="checkbox" value="checked" class="input-mini" />Close Button
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="addBehaviorOnToastClick">
                            <input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini" />Add behavior on toast click
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="debugInfo">
                            <input id="debugInfo" type="checkbox" value="checked" class="input-mini" />Debug
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="progressBar">
                            <input id="progressBar" type="checkbox" value="checked" class="input-mini" />Progress Bar
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="preventDuplicates">
                            <input id="preventDuplicates" type="checkbox" value="checked" class="input-mini" />Prevent Duplicates
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="addClear">
                            <input id="addClear" type="checkbox" value="checked" class="input-mini" />Add button to force clearing a toast, ignoring focus
                        </label>
                    </div>
                    <div class="controls">
                        <label class="checkbox" for="newestOnTop">
                            <input id="newestOnTop" type="checkbox" value="checked" class="input-mini" />Newest on top
                        </label>
                    </div>
                </div>
            </div>

            <div class="span2">
                <div class="control-group" id="toastTypeGroup">
                    <div class="controls">
                        <label>Toast Type</label>
                        <label class="radio">
                            <input type="radio" name="toasts" value="success" checked />Success
                        </label>
                        <label class="radio">
                            <input type="radio" name="toasts" value="info" />Info
                        </label>
                        <label class="radio">
                            <input type="radio" name="toasts" value="warning" />Warning
                        </label>
                        <label class="radio">
                            <input type="radio" name="toasts" value="error" />Error
                        </label>
                    </div>
                </div>
                <div class="control-group" id="positionGroup">
                    <div class="controls">
                        <label>Position</label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-top-right" checked />Top Right
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-top-left" />Top Left
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-top-center" />Top Center
                        </label>
                        <label class="radio">
                            <input type="radio" name="positions" value="toast-bottom-center" />Bottom Center
                        </label>
                    </div>
                </div>
            </div>

            <div class="span2">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label" for="showEasing">Show Easing</label>
                        <input id="showEasing" type="text" placeholder="swing, linear" class="input-mini" value="swing" />

                        <label class="control-label" for="hideEasing">Hide Easing</label>
                        <input id="hideEasing" type="text" placeholder="swing, linear" class="input-mini" value="linear" />

                        <label class="control-label" for="showMethod">Show Method</label>
                        <input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="input-mini" value="fadeIn" />

                        <label class="control-label" for="hideMethod">Hide Method</label>
                        <input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="input-mini" value="fadeOut" />
                    </div>
                </div>
            </div>

            <div class="span3">
                <div class="control-group">
                    <div class="controls">
                        <label class="control-label" for="showDuration">Show Duration</label>
                        <input id="showDuration" type="text" placeholder="ms" class="input-mini" value="300" />

                        <label class="control-label" for="hideDuration">Hide Duration</label>
                        <input id="hideDuration" type="text" placeholder="ms" class="input-mini" value="1000" />

                        <label class="control-label" for="timeOut">Time out</label>
                        <input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000" />

                        <label class="control-label" for="extendedTimeOut">Extended time out</label>
                        <input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini" value="1000" />
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
            <button type="button" class="btn btn-danger" id="cleartoasts">Clear Toasts</button>
            <button type="button" class="btn btn-danger" id="clearlasttoast">Clear Last Toast</button>
        </div>

        <div class="row" style='margin-top: 25px;'>
            <pre id='toastrOptions'></pre>
        </div>
    </div>
</section>

<footer class="row">
    <h2>Links</h2>

    <ul>
        <li><a href="http://www.codejie.net">源码街</a></li>
        <li><a href="https://github.com/CodeSeven/toastr">GitHub</a></li>
    </ul>
</footer>

<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/toastr.js/2.1.4/toastr.min.js"></script>

<script type="text/javascript">
    $(function () {
        var i = -1;
        var toastCount = 0;
        var $toastlast;

        var getMessage = function () {
            var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
                '<div><input class="input-small" value="textbox"/>&nbsp;<a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
                'Are you the six fingered man?',
                'Inconceivable!',
                'I do not think that means what you think it means.',
                'Have fun storming the castle!'
            ];
            i++;
            if (i === msgs.length) {
                i = 0;
            }

            return msgs[i];
        };

        var getMessageWithClearButton = function (msg) {
            msg = msg ? msg : 'Clear itself?';
            msg += '<br /><br /><button type="button" class="btn clear">Yes</button>';
            return msg;
        };

        $('#showtoast').click(function () {
            var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
            var msg = $('#message').val();
            var title = $('#title').val() || '';
            var $showDuration = $('#showDuration');
            var $hideDuration = $('#hideDuration');
            var $timeOut = $('#timeOut');
            var $extendedTimeOut = $('#extendedTimeOut');
            var $showEasing = $('#showEasing');
            var $hideEasing = $('#hideEasing');
            var $showMethod = $('#showMethod');
            var $hideMethod = $('#hideMethod');
            var toastIndex = toastCount++;
            var addClear = $('#addClear').prop('checked');

            toastr.options = {
                closeButton: $('#closeButton').prop('checked'),
                debug: $('#debugInfo').prop('checked'),
                newestOnTop: $('#newestOnTop').prop('checked'),
                progressBar: $('#progressBar').prop('checked'),
                positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
                preventDuplicates: $('#preventDuplicates').prop('checked'),
                onclick: null
            };

            if ($('#addBehaviorOnToastClick').prop('checked')) {
                toastr.options.onclick = function () {
                    alert('You can perform some custom action after a toast goes away');
                };
            }

            if ($showDuration.val().length) {
                toastr.options.showDuration = $showDuration.val();
            }

            if ($hideDuration.val().length) {
                toastr.options.hideDuration = $hideDuration.val();
            }

            if ($timeOut.val().length) {
                toastr.options.timeOut = addClear ? 0 : $timeOut.val();
            }

            if ($extendedTimeOut.val().length) {
                toastr.options.extendedTimeOut = addClear ? 0 : $extendedTimeOut.val();
            }

            if ($showEasing.val().length) {
                toastr.options.showEasing = $showEasing.val();
            }

            if ($hideEasing.val().length) {
                toastr.options.hideEasing = $hideEasing.val();
            }

            if ($showMethod.val().length) {
                toastr.options.showMethod = $showMethod.val();
            }

            if ($hideMethod.val().length) {
                toastr.options.hideMethod = $hideMethod.val();
            }

            if (addClear) {
                msg = getMessageWithClearButton(msg);
                toastr.options.tapToDismiss = false;
            }
            if (!msg) {
                msg = getMessage();
            }

            $('#toastrOptions').text('Command: toastr["'
                    + shortCutFunction
                    + '"]("'
                    + msg
                    + (title ? '", "' + title : '')
                    + '")\n\ntoastr.options = '
                    + JSON.stringify(toastr.options, null, 2)
            );

            var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
            $toastlast = $toast;

            if(typeof $toast === 'undefined'){
                return;
            }

            if ($toast.find('#okBtn').length) {
                $toast.delegate('#okBtn', 'click', function () {
                    alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
                    $toast.remove();
                });
            }
            if ($toast.find('#surpriseBtn').length) {
                $toast.delegate('#surpriseBtn', 'click', function () {
                    alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
                });
            }
            if ($toast.find('.clear').length) {
                $toast.delegate('.clear', 'click', function () {
                    toastr.clear($toast, { force: true });
                });
            }
        });

        function getLastToast(){
            return $toastlast;
        }
        $('#clearlasttoast').click(function () {
            toastr.clear(getLastToast());
        });
        $('#cleartoasts').click(function () {
            toastr.clear();
        });
    })
</script>
</body>
</html>