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) 顯示或隱藏部件