DevExtreme —— dxPopup

对话框。
收录于: dx.mobile.js, dx.web.js, dx.viz-web.js, dx.all.js

使用方法：

• jquery

  html

  <div id="popup"></div>
  <div id="targetElement"></div>

  js

  $("#popup").dxPopup({
      showTitle: true,
      title: 'Popup  title'
  });

• angular

  html

  <div dx-dxPopup="{
      showTitle: true,
      title: 'Popup  title'
  }"></div>

配置项：

• accessKey
  类型：String
  默认值：null
  做用：快捷键，使用Alt + accesskey 快速聚焦具备指定访问键的元素
  举例：accesskey: 'g'， 使用alt + G 就能快速聚焦该部件

• animation
  类型：Object
  默认值：

  { 
      show: { type: 'pop', duration: 300, from: { scale: 0.55 } }, 
      hide: { type: 'pop', from: { opacity: 1, scale: 1 }, to:  { opacity: 0, scale: 0.55 }, duration: 300 } 
  }

  安卓4如下默认值：

  { 
      show: { type: 'fade', duration: 400 }, 
      hide: { type: 'fade', from: { opacity: 1}, to:  { opacity: 0}, duration: 400 } 
  }

  ios默认值：

  { 
      show: { type: 'slide', duration: 400, from: {position: { my: 'top', at: 'bottom', of: window }}, to: { position: { my: 'center', at: 'center', of: window } }  }, 
      hide: { type: 'slide', from: {position: { my: 'center', at: 'center', of: window } }, to:  { position: { my: 'top', at: 'bottom', of: window } }, duration: 400 } 
  }

  做用：部件显示和隐藏时的动画效果设置

• buttons
  类型：Array
  做用：已弃用。用toolbarItems代替

• closeOnBackButton(未完)
  类型：Boolean
  默认值：true
  做用：返回键是否可关闭部件。返回键未知，用手机浏览器打开页面，返回键无效，app何尝试

• closeOnOutsideClick(未完)
  类型：Boolean| function(function输入参数为jquery事件)
  默认值：true
  做用：部件区域外及目标元素区域外点击是否关闭部件。false设置无效

• contentTemplate
  类型：Object
  默认值：{}
  做用：该对象的每个属性将会做为html属性应用到该组件内的input元素。

• deferRendering
  类型：Boolean
  默认值：true
  做用：对话框内容是在浮动框打开时渲染仍是部件渲染时一块儿渲染。true为部件打开时渲染

• disabled
  类型：Boolean
  默认值：false
  做用：是否禁用。当选项为true时，组件将失效。

• dragEnabled
  类型：Boolean
  默认值：false
  web端默认值：true
  做用：是否可拖动。

• focusStateEnabled
  类型：Boolean
  默认值：false
  做用：是否可聚焦。

• fullScreen
  类型：Boolean
  默认值：false
  做用：全屏模式。

• height
  类型：Number|String|Function
  默认值：undefined
  做用：部件高度。Number类型默认单位为px，String类型能够说是"55px","80%","auto","inherit"等，Function返回前两种类型。

• hint
  类型：String
  默认值：undefined
  做用：鼠标悬停菜单时的提示文本。

• hoverStateEnabled
  类型：Boolean
  默认值：true
  做用：鼠标悬停菜单按钮时的状态类。当值为true时，鼠标悬停在菜单按钮上时按钮会添加dx-state-hover的状态类，设置为false时则不会添加。

• maxHeight
  类型：Number|String| function
  默认值：null
  做用：最大高度。

• maxWidth
  类型：Number|String| function
  默认值：null
  做用：最大宽度。

• minHeight
  类型：Number|String| function
  默认值：null
  做用：最小高度。

• minWidth
  类型：Number|String| function
  默认值：null
  做用：最小宽度。

• onContentReady
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件内容渲染完成时的回调。

• onDisposing
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件移除事件回调函数

• onHidden
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件隐藏后的回调

• onHiding
  类型：Function
  默认值：null
  返回参数：{component,element,model,cancel}
  做用：部件隐藏时的回调

• onInitialized
  类型：Function
  默认值：null
  返回参数：{component,element}
  做用：部件初始化事件回调函数。Initialized事件在ContentReady事件以前

• onOptionChanged
  类型：Function
  默认值：null
  返回参数：{component,element,model,name,fullName,value}
  做用：部件选项改变时的回调函数。

• onResize
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件尺寸调整事件的回调

• onResizeEnd
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件尺寸调整结束的回调

• onResizeStart
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件尺寸调整开始的回调

• onShowing
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件显示时的回调

• onShown
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件显示后的回调

• onTitleRendered
  类型：Function
  默认值：null
  返回参数：{component,element,model}
  做用：部件标题渲染的回调。

• position
  类型：positionConfig
  默认值： { my: 'center', at: 'center', of: window }
  wp8默认值： {my: 'top center', at: 'top center', of: window, offset: '0 0' }
  做用：部件显示在目标元素的位置。可选值'top' | 'bottom' | 'left' | 'right'

• resizeEnabled
  类型：Boolean
  默认值：false
  做用：部件尺寸是否可调整

• rtlEnabled
  类型：Boolean
  默认值：false
  做用：部件对齐方向，默认从左往右。当值为true时，则从右往左

• shading
  类型：Boolean
  默认值：true
  做用：是否显示遮罩层。

• shadingColor
  类型：String
  默认值：""
  做用：遮罩层颜色，shading为true有效。

• showCloseButton
  类型：Boolean
  默认值：false
  web端默认值：true
  做用：是否显示关闭按钮。showTitle为true时有效

• showTitle
  类型：Boolean
  默认值：false
  做用：是否显示标题。

• tabIndex
  类型：Number
  默认值：0
  做用：tab键选择元素时的顺序权值，优先选择值小的。

• title
  类型：String
  默认值：""
  做用：组件标题。

• titleTemplate(未完)
  类型：template
  做用：title设置时，本选项无效。

• toolbarItems(未完)
  类型：Array
  做用：做用不明。

• visible
  类型：Boolean
  默认值：false
  做用：部件是否可见。

• width
  类型：Number|String|Function
  默认值：undefined
  做用：部件宽度。Number类型默认单位为px，String类型能够说是"55px","80%","auto","inherit"等，Function返回前两种类型。

方法

• baseZIndex(zIndex)
  设置组件的z-index。

• beginUpdate()
  锁定部件不渲染，直到调用endUpdate()为止。

• content()(未完)
  返回组件的一个html元素。

• defaultOptions(rule)
  指定这个组件的默认配置

• element()
  返回html文档

• endUpdate()
  让部件开始渲染

• focus()
  聚焦部件

• hide()
  隐藏部件

• instance()
  返回一个class的对象，使用此方法来访问该组件的其余方法
  返回值类型Object

• off(eventName)
  重构指定事件的指定处理方法
  输入参数：以字符串形式传入事件名
  返回值：Object

• off(eventName, eventHandler)
  重构指定事件的全部处理方法
  输入参数：
  eventName：以字符串形式传入事件名
  eventHandler：function
  返回值：Object

• on(eventName, eventHandler)
  绑定一个指定事件的处理方法
  输入参数：
  eventName：以字符串形式传入事件名
  eventHandler：function

• on(events)
  绑定多个指定事件的处理方法
  输入参数：
  object：{"eventName1": handler1, "eventName2": handler2, ...}

• option()
  获取部件的全部设置项

• option(optionName)
  获取部件指定设置项的值
  输入参数：String

• option(optionName, optionValue)
  修改部件指定设置项的值
  输入参数：
  String：optionName
  optionValue：any

• option(options)
  修改部件多个指定设置项的值
  输入参数： Object

• registerKeyHandler(key, handler)
  键盘按键绑定事件，组件必须处于聚焦状态
  输入参数：
  key：以字符串形式传入按键名
  handler：function
  键盘按键可选值：
  "backspace" "tab" "enter" "escape" "pageUp" "pageDown" "end" "home" "leftArrow" "upArrow" "rightArrow" "downArrow" "del" "space" "F" "A" "asterisk" "minus"
  note： 当某个按键自定义处理方法以后，默认的处理方法将会取消

• repaint()
  重绘部件

• show()
  显示部件

• toggle(showing) 显示或隐藏部件