README

jQueryUI对话框插件，添加折叠/最小化/最大化的交互。由 ROMB/jquery-dialogextend 衍生。请参阅 原始许可证。

兼容性

• jQuery 1.11.1
• jQueryUI 1.11.0

概述

• 扩展（而不是替换）原始 jQuery UI 对话框
• 最大化和最小化按钮
• 显示/隐藏关闭按钮
• 可双击标题栏
• 可配置图标
• 自定义事件

演示

• 测试工具: http://romb.github.io/jquery-dialogextend/example.html

测试浏览器

• Chrome 35
• Firefox 14
• IE 8

请支持此项目

捐赠比特币: 1G8T7Xh2AN5ceduHmHT5TpPFUeddsnQHLQ

选项

closable

类型: 布尔值

用法: 启用/禁用关闭按钮

默认值: true

maximizable

类型: 布尔值

用法: 启用/禁用最大化按钮

默认值: false

minimizable

类型: 布尔值

用法: 启用/禁用最小化按钮

默认值: false

collapsable

类型: 布尔值

用法: 启用/禁用折叠按钮

默认值: false

minimizeLocation

类型: 字符串

用法: 设置最小化对话框的对齐方式

默认值: 'left'

有效值: 'left', 'right'

dblclick

类型: 布尔值, 字符串

用法: 设置双击的动作

默认值: false

有效值: false, 'maximize', 'minimize', 'collapse'

icons

类型: 对象

默认值

{
  "close" : "ui-icon-circle-closethick", // new in v1.0.1
  "maximize" : "ui-icon-extlink",
  "minimize" : "ui-icon-minus",
  "restore" : "ui-icon-newwin"
}

有效值: <jQuery UI 图标类>

事件

load

类型: load

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "load" : function(evt, dlg) { ... }
});
//Bind to event by type
//NOTE : You must bind() the <dialogextendload> event before dialog-extend is created
$("#my-dialog")
  .bind("dialogextendload", function(evt) { ... })
  .dialogExtend();

beforeCollapse

类型: beforeCollapse

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeCollapse" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeCollapse", function(evt) { ... });

beforeMaximize

类型: beforeMaximize

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeMaximize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeMaximize", function(evt) { ... });

beforeMinimize

类型: beforeMinimize

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeMinimize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeMinimize", function(evt) { ... });

beforeRestore

类型: beforeRestore

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "beforeRestore" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendbeforeRestore", function(evt) { ... });

collapse

类型: collapse

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "collapse" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendcollapse", function(evt) { ... });

maximize

类型: maximize

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "maximize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendmaximize", function(evt) { ... });

minimize

类型: minimize

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "minimize" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendminimize", function(evt) { ... });

restore

类型: restore

示例

//Specify callback as init option
$("#my-dialog").dialogExtend({
  "restore" : function(evt) { ... }
});
//Bind to event by type
$("#my-dialog").bind("dialogextendrestore", function(evt) { ... });

方法

collapse

用法: 不通过双击标题栏折叠对话框

触发器: dialogextendbeforeCollapse, dialogextendcollapse

示例

$("#my-dialog").dialogExtend("collapse");

maximize

用法: 不通过点击按钮最大化对话框

触发器: dialogextendbeforeMaximize, dialogextendmaximize

示例

$("#my-dialog").dialogExtend("maximize");

minimize

用法: 不通过点击按钮最小化对话框

触发器: dialogextendbeforeMinimize, dialogextendminimize

示例

$("#my-dialog").dialogExtend("minimize");

restore

用法: 不通过点击按钮从最大化/最小化/折叠状态恢复对话框

触发器: dialogextendbeforeRestore, dialogextendrestore

示例

$("#my-dialog").dialogExtend("restore");

state

用法: 获取对话框的当前状态

返回: 字符串

值: 'normal', 'maximized', 'minimized', 'collapsed'

示例

switch ( $("#my-dialog").dialogExtend("state") ) {
  case "maximized":
    alert("The dialog is maximized");
    break;
  case "minimized":
    alert("The dialog is minimized");
    break;
  case "collapsed":
    alert("The dialog is collapsed");
    break;
  default:
    alert("The dialog is normal");
}

主题

对话框将具有根据其当前状态而定的类。

<div class="ui-dialog jqdx-state-{normal|maximized|minimized|collapsed}">
  <div class="ui-dialog-titlebar">...</div>
  <div class="ui-dialog-content ui-dialog-{normal|maximized|minimized|collapsed}">...</div>
</div>

按钮被包裹在 jQuery UI 对话框的标题栏中。

注意：使用 dialogExtend 后，关闭按钮将不再是标题栏的直接子元素。它将被一个按钮面板元素包裹

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  ...
  <div class="ui-dialog-titlebar-buttonpane">
    <a class="ui-dialog-titlebar-maximize ui-corner-all" href="#"><span class="ui-icon {icons.maximize}">maximize</span></a>
    <a class="ui-dialog-titlebar-minimize ui-corner-all" href="#"><span class="ui-icon {icons.minimize}">minimize</span></a>
    <a class="ui-dialog-titlebar-restore ui-corner-all" href="#"><span class="ui-icon {icons.restore}">restore</span></a>
    <button type="button" class="ui-dialog-titlebar-close ui-corner-all" href="#">...</button>
  </div>
  ...
</div>

示例 - 基本配置

$(function(){
  $("#my-button").click(function(){
    $("<div>This is content</div>")
      .dialog({ "title" : "My Dialog" })
      .dialogExtend({
        "maximizable" : true,
        "dblclick" : "maximize",
        "icons" : { "maximize" : "ui-icon-arrow-4-diag" }
      });
  });
});

示例 - 完全配置

$(function(){
  $("#my-button").click(function(){
    $("<div>This is  content</div>")
      .dialog({
        "title" : "This is dialog title",
        "buttons" : { "OK" : function(){ $(this).dialog("close"); } }
       })
      .dialogExtend({
        "closable" : true,
        "maximizable" : true,
        "minimizable" : true,
        "collapsable" : true,
        "dblclick" : "collapse",
        "minimizeLocation" : "right",
        "icons" : {
          "close" : "ui-icon-circle-close",
          "maximize" : "ui-icon-circle-plus",
          "minimize" : "ui-icon-circle-minus",
          "collapse" : "ui-icon-triangle-1-s",
          "restore" : "ui-icon-bullet"
        },
        "load" : function(evt, dlg){ alert(evt.type); },
        "beforeCollapse" : function(evt, dlg){ alert(evt.type); },
        "beforeMaximize" : function(evt, dlg){ alert(evt.type); },
        "beforeMinimize" : function(evt, dlg){ alert(evt.type); },
        "beforeRestore" : function(evt, dlg){ alert(evt.type); },
        "collapse" : function(evt, dlg){ alert(evt.type); },
        "maximize" : function(evt, dlg){ alert(evt.type); },
        "minimize" : function(evt, dlg){ alert(evt.type); },
        "restore" : function(evt, dlg){ alert(evt.type); }
      });
  });
});