Androidのtoast(トースト)みたいなやつをブラウザ上で実現するためのライブラリ

ブラウザ上でtoastを実現するJavaScriptライブラリを探してみた。

toastr
https://github.com/CodeSeven/toastr

こんなのを見つけた。
簡単そう。

追加ボタンを押したら・・・

こんなモーダルダイアログを用意して、必要事項を入力後・・・

登録ボタンを押すと、「ユーザを登録しました」みたいなメッセージのtoastを表示する。

そんなコードを書いてみた。

ユーザのテーブルとモーダルダイアログのHTMLコードは以下の通り。
追加ボタンを押すことでUserControllerクラスのopenModal()が呼び出され、モーダルダイアログが開かれる。
モーダルダイアログはテンプレートとして用意してある。

<div class="container" ng-controller="UserController">
    <div class="row">
        <div class="col-lg-12 text-right">
            <button type="button" class="btn btn-default" ng-click="openModal()">
                <span class="glyphicon glyphicon-plus">追加
            </button>
        </div>
    </div>
    <br/>
    <div class="row">
        <table class="table table-striped" ng-init="getUserList()">
            <tr>
                <th>ID</th>
                <th>名前</th>
                <th>メールアドレス</th>
                <th>&nbsp;</th>
            </tr>
            <tr ng-repeat="user in userList">
                <td>{{user.user.id}}</td>
                <td>{{user.user.name}}</td>
                <td>{{user.user.mailAddress}}</td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-pencil">編集
                    </button>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-trash">削除
                    </button>
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="text/ng-template" id="useraddModal.html">
    <div class="modal-header">
    <button type="button" class="close" ng-click="closeModal()" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="modalLabel">ユーザ追加</h4>
    </div>
    <div class="modal-body">
    <form role="form" class="form-horizontal">
    <div class="form-group">
    <label for="userId" class="col-sm-4 control-label">ユーザID</label>
    <div class="col-sm-6">
    <input type="text" id="userId" ng-model="userId" class="form-control" placeholder="ユーザID"/>
    </div>
    </div>
    <div class="form-group">
    <label for="userName" class="col-sm-4 control-label">ユーザ名</label>
    <div class="col-sm-6">
    <input type="text" id="userName" ng-model="userName" class="form-control" placeholder="ユーザ名"/>
    </div>                    
    </div>
    <div class="form-group">
    <label for="mailAddress" class="col-sm-4 control-label">メールアドレス</label>
    <div class="col-sm-6">
    <input type="text" id="mailAddress" ng-model="mailAddress" class="form-control" placeholder="メールアドレス"/>
    </div>
    </div>
    <div class="form-group">
    <label for="password" class="col-sm-4 control-label">パスワード</label>
    <div class="col-sm-6">
    <input type="password" id="password" ng-model="password" class="form-control" placeholder="パスワード"/>
    </div>
    </div>
    <div class="form-group">
    <label for="passwordConfirm" class="col-sm-4 control-label">パスワード(確認)</label>
    <div class="col-sm-6">
    <input type="password" id="passwordConfirm" ng-model="passwordConfirm" class="form-control" placeholder="パスワード(確認)"/>
    </div>
    </div>
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8 text-right">
    <button type="submit" class="btn btn-default" id="useradd_add_button" ng-click="addUser()">登録</button>
    </div>
    </div>
    </form>
</script>

次にUserController.js
openModal()ではモーダルダイアログを開く処理を記述している。
この時、UseraddControllerをバインドするようにしている。

var UserController =
        function ($scope, $resource, $modal) {
            $scope.userList = null;


            $scope.getUserList = function() {
                $resource("http://localhost/ProjectsWeb/contents/samplejson/userlist.json").get(
                        function(data) {
                            $scope.userList = data.userList;
                            console.log($scope.userList);
                        });
            };

            $scope.openModal = function() {
                var modalInstance = $modal.open({
                    templateUrl: 'useraddModal.html',
                    controller: UseraddController
                });

                modalInstance.result.then(function() {

                }, function() {

                });
            }
        }

最後にUseraddController.js
モーダルダイアログの登録ボタンが押されたら、addUserが呼び出される。

toastr.success('ユーザを追加しました');
の部分でtoastを表示している。

var UseraddController =
    function ($scope, $modalInstance) {
        /*
         * モーダルを閉じる
         */
        $scope.closeModal = function(ret) {
            $modalInstance.close(ret);
        }
        
        /**
         * ユーザを追加する
         * @returns {undefined}
         */
        $scope.addUser = function() {
            var userId = $scope.userId;
            var userName = $scope.userName;
            var mailAddress = $scope.mailAddress;
            var password = $scope.password;
            var passwordConfirm = $scope.passwordConfirm;
            
            // TODO 入力チェック
            
            // TODO ユーザ追加
            
            $scope.closeModal(true);
            
            toastr.success('ユーザを追加しました');
        }
    }

詳しくは下記を参照すれば、表示を変更する方法が書いてある。
https://github.com/CodeSeven/toastr