DevExtreme —— dxPopup

最新推荐文章于 2023-06-08 10:01:52 发布

weixin_34018169

最新推荐文章于 2023-06-08 10:01:52 发布

阅读量635

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/SummerSaxes/blog/737847

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

使用方法：

jquery

html

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

$("#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)
显示或隐藏部件