Dialogify

Getting Started

Include script in your HTML document.

<script src="path/to/jquery.js"></script>
<script src="path/to/dialogify.min.js"></script>

Disable Css Injection

所有樣式跟圖片都塞進 js 了,不用另外載入 css
要自訂樣式的話(像是暗色版),將 id="dialogifyCss" 的 css 放在 js 前
不然 inject css 是 inline 形式,優先權比 css 檔案高

<link href="path/to/dialogify.css" id="dialogifyCss" rel="stylesheet" type="text/css">

Dialogify

var dialog = new Dialogify(source, dialogOptions)
    .title(title)
    .buttons([button, buttonHtml...], buttonOptions)
    .on('show', showCallback)
    .on('close', closeCallback)
    .on('cancel', cancelCallback);

dialog.show();
dialog.showModal();
dialog.close();
dialog.isOpen();
source: string
source id selector | ajax url | html
id selector: # 開頭的字串,e.g. '#dialogContent'
ajax url: ajaxPrefix 開頭的字串,e.g. '/ajax/dialogContent.html'
dialogOptions: {}
size Dialogify.SIZE_LARGE | class name
設定 SIZE_LARGE 後會套用較寬的燈箱樣式
也可直接指定 class name
closable true | false
預設 true,設定 false 後沒右上關閉鈕
modal 燈箱無法按 esc 或點背景關閉
fixed true | false
預設 true,設定 false 後燈箱會跟頁面捲動
useDialogForm true | false
預設 true,設定 false 後燈箱中不會有 <form method="dialog"></form>
此設定下 BUTTON_PRIMARY 要自己關閉燈箱
ajaxPrefix string
預設 "/ajax/"
ajaxData object | query string
ajax 載入資料時,要傳給網址的參數
ajaxComplete function
ajax 載入完成時呼叫,this 是 dialog object
title: string
title string
設定標題,可用 html
button: {}
type Dialogify.BUTTON_PRIMARY | Dialogify.BUTTON_DANGER | class name
按鈕樣式,可直接指定 class name,primary 按鈕預設按了之後會關閉燈箱
text string
按鈕文字,預設 "關閉"
click function
按鈕動作,this 是 dialog object
focused true | false
預設 false,true 的話會加上 autofocus 屬性
disabled true | false
預設 false,是否 disable button
id string
指定按鈕 id,若設定會以此值當 $buttonList 的 key
buttonHtml: string
buttonHtml string
直接把 html append 到燈箱當按鈕
若有 id 屬性,在 $buttonList 中會以 id 當 key
buttonOptions: {}
position Dialogify.BUTTON_CENTER | Dialogify.BUTTON_LEFT | class name
設定按鈕位置,預設靠右,也可直接指定 class name
showCallback, closeCallback, cancelCallback: function
callback function
相對應的時機呼叫的 function,this 是 dialog object
cancel 只有按右上關閉、點背景或按 esc 會呼叫
dialog method
.show() 顯示燈箱,無背景遮罩
.showModal() 顯示 Modal 燈箱,有背景遮罩強調燈箱
.close() 關閉燈箱
.isOpen() return true or false
回傳燈箱是否開啟中
.$content 燈箱內容的 jQuery object
.$buttonList 燈箱按鈕陣列,依照 buttons 設定的順序,由左至右,若有 id 則以 id 當 key
值則是按鈕的 jQuery object,另外有兩個 jQuery method 給按鈕使用
$buttonList[0].enable()
$buttonList[0].disable()
Example - Normal Dialogify
<script type="text/template" id="demo1_template">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.
    <input type="text" class="text-field" placeholder="title">
    <textarea class="text-field" placeholder="content"></textarea>
</script>
<script>
// 用 text/template 放燈箱的 html,瀏覽器會略過未知的 script type
// 比在元素上加 display:none 效能來得好
new Dialogify('#demo1_template')
    .title('Dialogify')
    .buttons([
        {
            text: '取消',
            click: function(e){
                console.log('cancel click');
                this.close();
            }
        },
        {
            text: '確定',
            type: Dialogify.BUTTON_PRIMARY,
            click: function(e){
                console.log('ok click, title value: ' + this.$content.find('input.text-field').val());
            }
        }
    ])
    .show();
</script>
Example - Modal Dialogify
let html = '<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a sapien lacus. Ut a eros quis lacus auctor aliquet eu.</b>';
let dialogify = new Dialogify(html)
    .title('Modal Dialogify')
    .buttons([
        {
            type: Dialogify.BUTTON_DANGER,
            click: function(e){
                console.log('danger-style button click');
                this.close();
            }
        },
        '<a class="btn btn-insert" href="javascript:;">other action</a>'
    ], {position: Dialogify.BUTTON_CENTER});

dialogify
    .on('show', function(){
        this.$buttonList[1].disable();
        console.log('show: ' + this.isOpen());
    })
    .on('close', function(){
        console.log('close: ' + this.isOpen());
    })
    .on('cancel', function(){
        console.log('cancel');
    });

dialogify.showModal();
Example - Ajax Dialogify
var options = {
    ajaxPrefix: '',
    ajaxComplete: function(){
        console.log('ajax complete');
        this.buttons([{
            type: Dialogify.BUTTON_PRIMARY
        }]);
    }
};

new Dialogify('./view.html', options)
    .title('Ajax Dialogify')
    .show();

Dialogify.alert

Dialogify.alert('Alert <i>Message</i>');

Dialogify.confirm

Dialogify.confirm('Do you like Dialogify ?', {
    ok: function(){
        Dialogify.alert('Yes, I do');
    },
    cancel: function(){
        Dialogify.alert('No, I don\'t');
    }
});

Dialogify.prompt

Dialogify.prompt('What\'s your name ?', {
    placeholder: 'Enter your name',
    ok: function(val){
        Dialogify.alert('Hi! ' + val);
    },
    cancel: function(){
        Dialogify.alert('canceled');
    }
});