close

在撰寫程式時，對於刪除資料前應該是先詢問使用者，以往都是跳出一個詢問視窗，但現在的流覽器大都會阻隔，在導入 Bootstrap 的 framework 後，可以加入 bootstrap-dialog.js 的 plug-in 來強化程式的友善化。效果如下：

 

  • 查詢後的畫面

beforeDel

  • 按下刪除時的詢問視窗

askDel 

 

作法如下：

Step 01：客制一個 java script

// 詢問Y/N 視窗
function dialogYN(formId,dialogType,title,message){
    
    BootstrapDialog.show({
        type: dialogType,
        title: title,
        message: message,            
        closable: false,
        buttons: [{
                label: 'No',
                action: function(dialog) {                        
                    dialog.close();
                }
            }, {
                label: 'Yes',
                cssClass: 'btn-primary',
                action: function(dialog) {
                    dialog.close();
                    $(formId).submit();
                }
            }]
    });    

}

參數：

formId: 回覆為 Yes 後要執行的 form id

dialogType: 詢問視窗的型態有 'type-default' , 'type-info' , 'type-primary' , 'type-success' , 'type-warning' , 'type-danger'

title: dialog 視窗的 title

message: 要顯示的內容

 

Step 02：在 Struts 2 的 Tag 中的用法

<s:submit name="usersSubmit" value="delDataForm" key="display.delete" onclick="$('#reqCode').val('delDataForm');return dialogYN('#UsersTagAction','type-danger','%{getText('display.windowTitle.delConfirm')}','%{getText('msg.common.confirm')}')"/>

為了多國語言的顯示，需要用 getText 配合 EL 的方法來作，如：'%{getText('display.windowTitle.delConfirm')}'

arrow
arrow
    文章標籤
    bootstrap bootstrap-dialog struts 2
    全站熱搜

    MIS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄