nkjmkzk.net

powered by Kazuki Nakajima

Archive for the ‘visualforce’ tag

モーダル・ダイアログ「jquery.confirm(改)」

私はVisualforceでしばしば<apex:actionFunction>やJavascript Remotingを使ってApexコードを実行します。その処理内容は往々にして標準コントローラではまかなえない、アプリケーション依存の少し複雑な処理です。

そんなとき、確認、経過、結果を表示するため、あるいは処理中にユーザーの操作をブロックするためにモーダル・ダイアログを多用しています。

こちらのデモはレコードの削除操作をユーザーに確認し、その後削除処理中の経過を表示&ユーザーの操作をブロックし、削除結果を表示するモーダル・ダイアログです。

このモーダル・ダイアログはこちらで紹介されているjquery.confirmをベースに、画像を使用せず、activity-indicatorを組み合わせ処理中のインジケーターを表示できるようにしたりといったカスタマイズをおこなっています。

ダウンロードはこちらから。
https://github.com/nkjm/jquery.confirm-and-status

index.htmlファイルがサンプルの実装になっています。

<html>
<head>
    <link rel="stylesheet" href="jquery.confirm.css"></link>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.activity-indicator-1.0.0.js"></script>
    <script type="text/javascript" src="jquery.confirm.js"></script>
</head>
<body>
    <script>
        function do_status(){
            $.confirm.status({
                'title' : 'Processing',
                'message' : 'Please wait for a while...'
            });
        }

        function do_alert(){
            $.confirm.alert({
                'title' : 'Completed',
                'message' : 'Transaction has been finished.',
                'color' : '#888888',
                'button_label' : 'Close'
            });
        }

        function do_confirm(){
            $.confirm({
                'title' : 'Deleting "object"',
                'message' : 'Are you sure?',
                'button_yes_label' : 'Yes',
                'button_no_label' : 'No',
                'processing_title' : 'Processing',
                'processing_message' : 'Please wait for a while...',
                'action' : function(){
                    alert('add delete process here');
                }
            });
        }
    </script>
    <div id="container">
        <div>
            <button type="submit" onclick="do_status()">status</button>
        </div>
        <div>
            <button type="submit" onclick="do_alert()">alert</button>
        </div>
        <div>
            <button type="submit" onclick="do_confirm()">confirm</button>
        </div>
    </div>
</body>
</html>

エンジョイ。

without comments

Written by 中嶋 一樹

10月 12th, 2012 at 2:51 pm

Posted in Uncategorized

Tagged with ,