jQuery.imui.imuiPageDialog

//ページダイアログを表示する
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where'
});

<!-- ページダイアログを何度も呼び出す場合はあらかじめ表示領域を定義しておきます -->
<div id="target"></div>
<script type="text/javascript">
    //ページダイアログを表示する
    $("#target").imuiPageDialog({
        url: 'some/where'
    });
</script>

//parameter属性にnothemeを指定する方法でテーマが適用されていないHTMLを返却する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    parameter: {'imui-theme-builder-module':'notheme'}
});

//パラメータを指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    parameter: {
        key1: 'value1',
        key2: 'value2'
    }
});

//タイトルを指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    title: 'Title'
});

//position を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    position: [100, 100]
});

//ボタンを表示する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    buttons: [
      {
        'id': 'okbutton',
        'text': 'OK',
        'click': function() { alert('OK'); }
      },
      {
        'text': 'キャンセル',
        'click': function() {$(this).imuiPageDialog('close'); }
      }
    ],
    //エラーが発生したときに、ボタン表示領域を非表示にする
    buttonsStateOnError: 'hide'
});

//toolbarLeft, toolbarRight を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    toolbarLeft: [
                    {
                        title: "戻る",
                        text: "戻る",
                        iconClass: "im-ui-icon-common-16-back",
                        href: "javascript:alert('back');"
                         },
                    {
                        title: "カレンダー",
                        text: "カレンダー",
                        iconClass: "im-ui-icon-common-16-calendar",
                        href: "javascript:alert('calendar')"
                    }
                ],
    toolbarRight: [
                      {
                          title: "最新",
                          iconClass: "im-ui-icon-common-16-refresh",
                          href: "javascript:alert('refresh')"
                      }
                  ]
});

//onAjaxBeforeSend, onAjaxComplete, onAjaxError, onAjaxParameterExtend, onAjaxSuccess を指定する例
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    onAjaxBeforeSend: function() { alert('onAjaxBeforeSend'); },
    onAjaxComplete: function() {alert('onAjaxComplete'); },
    onAjaxError: function() {alert('onAjaxError'); },
    onAjaxParameterExtend: function() {alert('onAjaxParameterExtend'); },
    onAjaxSuccess: function() {alert('onAjaxSuccess'); }
});

//autoHeight/autoWidth を指定する例。ウィンドウに対して50パーセントの割合で表示します。
//この割合はウィンドウをリサイズしても維持されます。ダイアログリサイズ後は、リサイズ後のダイアログとウィンドウの割合を維持します
$("<div></div>").appendTo(document.body).imuiPageDialog({
    url: 'some/where',
    autoHeight: 50,
    autoWidth: 50,
    maxHeight: 300,  // autoHeight を指定していても、ダイアログはこの値より大きくなりません
    minWidth: 100    // autoWidth を指定していても、ダイアログはこの値より小さくなりません
});

//パラメータとして指定するとき
$('#id').imuiPageDialog({
    url: 'some/where',
    beforeClose: function(event, ui) {
    }
});

//イベントをバインドするとき
//#target は、imuiPageDialog のセレクタを指定してください。
$('#target').on('imuipagedialogbeforeclose', function(event, ui) {
    }
);

//パラメータとして指定するとき
$('#id').imuiPageDialog({
    url: 'some/where',
    close: function(event, ui) {
    }
});

//イベントをバインドするとき
//#target は、imuiPageDialog のセレクタを指定してください。
$('#target').on('imuipagedialogclose', function(event, ui) {
    }
);

//パラメータとして指定するとき
$('#id').imuiPageDialog({
    url: 'some/where',
    open: function(event, ui) {
    }
});

//イベントをバインドするとき
//#target は、imuiPageDialog のセレクタを指定してください。
$('#target').on('imuipagedialogopen', function(event, ui) {
    }
);