文档章节

DevExtreme —— dxPopup

夏末的萨克斯手
 夏末的萨克斯手
发布于 2016/08/25 16:28
字数 1730
阅读 83
收藏 0

对话框。
收录于: 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)
    显示或隐藏部件

© 著作权归作者所有

夏末的萨克斯手
粉丝 2
博文 6
码字总数 36146
作品 0
嘉兴
程序员
私信 提问
Visual Studio下的跨平台移动开发框架DevExtreme

功能特性: 提供原生用户体验-无论是 iOS, Android, Windows Phone 还是 Tizen,开发者无需再编写多余代码或UI自定义,就可以获得原生外观; 触摸优化的组件-每个DevExtreme组件都包含了一个...

dearlemon
2014/03/06
2.3K
0
DevExpress v18.1新版亮点——DevExtreme篇(三)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能,快来下载试用新版本!点击下载...

Miss_Hello_World
2018/09/19
39
0
DevExpress v18.1新版亮点——DevExtreme篇(四)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能,快来下载试用新版本!点击下载...

Miss_Hello_World
2018/09/21
39
0
DevExpress v18.1新版亮点——DevExtreme篇(二)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能,快来下载试用新版本!点击下载...

Miss_Hello_World
2018/09/12
20
0
DevExpress v15.1:DevExtreme控件升级(三)

HTML5/JS数据可视化 1.1 增强工具提示 支持HTML:现在您可以使用HTML标记自定义提示信息。 改进定位:工具提示的定位不再只是依赖于图表容器的边界。现在可以以显示内侧点的方式来显示工具提...

Miss_Hello_World
2015/07/17
399
0

没有更多内容

加载失败,请刷新页面

加载更多

防止流量劫持有效途径-安装SSL证书

  在互联网的世界里,流量就等于金钱。而流量劫持是指,利用各种恶意软件、木马病毒,修改浏览器、锁定主页或不停弹出新窗口等方式,强制用户访问某些网站,从而造成用户流量损失的情形。 ...

安信SSL证书
17分钟前
2
0
关于工作流程数据模版的设置与使用.

关键字:ccbpm数据模版 解释说明:数据模版就是当前工作人员历史发起的历史流程里,把一些具有代表性的设置为模版,下次在启动流程的时候,选择模版里的数据在发起流程,避免重复数据录入的工...

ccflow周朋
31分钟前
4
0
第一个只出现一次的字符

处理字符串中重复或者次数出现等问题,最常用的就是哈希表,用字符串中的字符作为key,字符出现次数作为value,假定只有ASCII码范围内的字符,则可以开辟一个256大小的int数组,将每个字符(...

Garphy
32分钟前
6
0
通过构建区块链来学习区块链-1-Transaction|Block|POW

原文链接:https://medium.com/@vanflymen/learn-blockchains-by-building-one-117428612f46 交易Transaction 区块Block 工作量证明 你来这里是因为,和我一样,你对加密货币的崛起感到兴奋。...

Riverzhou
38分钟前
4
0
大数据最核心的关键技术——32个算法,记得收藏!

奥地利符号计算研究所的Christoph Koutschan博士在自己的页面上发布了一篇文章,提到他做了一个调查,参与者大多数是计算机科学家,他请这些科学家投票选出最重要的算法,以下是这次调查的结...

大数据金罗
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部