dialogBox

来自于:官方立即使用

alert sendMessage scene evaluation raffle taskPlan receipt tips discount share actionMenu input amount list webView popupAlert confirm close inputbox multiLineMenu

论坛示例

为帮助用户更好更快的使用模块,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

概述

dialogBox 封装了十一种款式的对话框,每一种款式都提供一个接口来调用,开发者可按照各个接口的样式来自定义对话框上的文字、图片、图文等。后续我们会根据开发者需求继续添加若干样式对话框接口。每一种样式图展示如下,开发者可参考配置:

alert 样式如下图所示:

alert alert

sendMessage 样式如下图所示:

sendMessage

scene 样式如下图所示:

scene scene dialogBox - 图6

evaluation 样式如下图所示:

evaluation

raffle 样式如下图所示:

raffle raffle raffle

taskPlan 样式如下图所示:

taskPlan

receipt 样式如下图所示:

receipt

tips 样式如下图所示:

tips

discount 样式如下图所示:

discount

share 样式如下图所示:

share

actionMenu 样式如下图所示:

actionMenu

input 样式如下图所示:

dialogBox - 图17

amount 样式如下图所示:

dialogBox - 图18

list 样式如下图所示:

list

webView 样式如下图所示:

dialogBox - 图20

popupAlert 样式如下图所示:

dialogBox - 图21

confirm 样式如下图所示:

dialogBox - 图22

弹出的对话框都可以通过调用 close 接口来关闭。

实例widget下载地址

模块接口

alert

弹出 alert 样式的对话框

alert({params}, callback(ret, err))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)alert 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '确认', //(可选项)字符串类型;标题内容,若不传则不显示该文本
  3. content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
  4. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  5. rightBtnTitle: '确认' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  6. }

styles:

  • 类型:JSON 对象
  • 描述:alert 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(100, 100, 100, 0.5)', //(可选项)字符串类型,不传使用系统默认颜色
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. title:{ //(可选项)JSON对象;弹窗标题栏样式配置,不传则不显示标题区域
  7. marginT: 20, //(可选项)数字类型;标题栏与对话框顶端间距;默认:20
  8. icon: '', //(可选项)字符串类型;标题前面的图标路径,要求本地路径(widget://、fs://);图片为正方形的,如:50*50、100*100,建议开发者传大小合适的图片以适配高分辨率手机屏幕,不传则不显示
  9. iconSize: 40, //(可选项)数字类型;icon 图标边长大小,若 icon 不存在则此参数无效;默认:24
  10. titleSize: 14, //(可选项)数字类型;标题字体大小;默认:14
  11. titleColor: '#fff' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#fff
  12. },
  13. content:{ //(可选项)JSON 对象;文本内容配置,若不传则不显示该区域
  14. marginT: 20, //(可选项)数字类型;内容文本顶端与标题栏底端的距离,如果标题栏不存在,则是到窗口顶端的距离;默认:20
  15. marginB: 20, //(可选项)数字类型;内容文本底端与 left/right 顶端的距离,如果 left/right 都不存在,则是到对话框底端的距离;默认:20
  16. color: '#eee', //(可选项)字符串类型;内容文本字体颜色,支持 rgb、rgba、#;默认:#eee
  17. size: 12 //(可选项)数字类型:内容文本字体大小;默认:12
  18. },
  19. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  20. marginB: 7, //(可选项)数字类型;左边按钮的下边距;默认:7
  21. marginL: 20, //(可选项)数字类型;左边按钮的左边距;默认:20
  22. w: 130, //(可选项)数字类型;左边按钮的宽;默认:130
  23. h: 35, //(可选项)数字类型;左边按钮的高;默认:35
  24. corner: 2, //(可选项)数字类型;左边按钮圆角半径;默认:0.0
  25. bg: '#e0e', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  26. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  27. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  28. },
  29. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  30. marginB: 7, //(可选项)数字类型;右边按钮的下边距;默认:7
  31. marginL: 10, //(可选项)数字类型;右边按钮左边距;默认:10
  32. w: 130, //(可选项)数字类型;右边按钮的宽;默认:130
  33. h: 35, //(可选项)数字类型;右边按钮的高;默认:35
  34. corner: 2, //(可选项)数字类型;右边按钮圆角半径;默认:0.0
  35. bg: '#e0e', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  36. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  37. size: 12 //(可选项)数字类型;右边按钮标题字体大小;默认:12
  38. }
  39. horizontalLine:{
  40. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮上边横线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  41. height:1 //(可选项)数字类型;左右边按钮横线的高度;默认:0
  42. }
  43. verticalLine:{
  44. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮中间竖线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  45. width:1 //(可选项)数字类型;左右边按钮竖线的高度;默认:0
  46. }
  47. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.alert({
  3. texts: {
  4. title: '确认',
  5. content: '送你一个超级礼包,内有超值福利,先到先得,点击领取 >>',
  6. leftBtnTitle: '取消',
  7. rightBtnTitle: '确认'
  8. },
  9. styles: {
  10. bg: '#fff',
  11. w: 300,
  12. corner:2,
  13. title: {
  14. marginT: 20,
  15. icon: 'widget://res/gou.png',
  16. iconSize: 40,
  17. titleSize: 14,
  18. titleColor: '#000'
  19. },
  20. content: {
  21. color: '#000',
  22. size: 14
  23. },
  24. left: {
  25. marginB: 7,
  26. marginL: 20,
  27. w: 130,
  28. h: 35,
  29. corner: 2,
  30. bg: '#e0e',
  31. size: 12
  32. },
  33. right: {
  34. marginB: 7,
  35. marginL: 10,
  36. w: 130,
  37. h: 35,
  38. corner: 2,
  39. bg: '#e0e',
  40. size: 12
  41. }
  42. }
  43. }, function(ret) {
  44. if (ret.eventType == 'left') {
  45. var dialogBox = api.require('dialogBox');
  46. dialogBox.close({
  47. dialogName: 'alert'
  48. });
  49. }
  50. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

sendMessage

弹出 sendMessage 样式的对话框

sendMessage({params}, callback(ret, err))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)sendMessage 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '昵称', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. hintText: '(请输入)', //(可选项)字符串类型;标题栏输入框默认文本,若不传则不显示该文本
  4. content: '内容文本', //(可选项)字符串类型;对话框文本内容,该区域大小随文本内容多少自适应,若不传则不显示该文本
  5. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  6. rightBtnTitle: '发送' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  7. }

styles:

  • 类型:JSON 对象
  • 描述:sendMessage 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(100, 100, 100, 0.5)', //(可选项)字符串类型,不传使用系统默认颜色
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  7. h: 60, //(可选项)数字类型;标题栏高度;默认:60
  8. show: { //(可选项)JSON 对象;标题栏显示文字样式配置
  9. marginL: 6, //(可选项)数字类型;显示文本相对于标题栏左边的距离;默认:6
  10. titleSize: 14, //(可选项)数字类型;标题字体大小;默认:14
  11. titleColor: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  12. },
  13. input:{ //(可选项)JSON 对象;标题栏输入文本框样式配置
  14. marginL: 6, //(可选项)数字类型;输入文本框相对于显示文本的距离,若显示文本不存在,则是与标题栏左边的距离;默认:6
  15. textSize: 14, //(可选项)数字类型;输入文本框文本字体大小;默认:14
  16. textColor: '#000' //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
  17. }
  18. },
  19. content:{ //(可选项)JSON 对象;文本内容配置,若不传则不显示该区域
  20. marginT: 20, //(可选项)数字类型;内容文本顶端与标题栏底端的距离,如果标题栏不存在,则是到窗口顶端的距离;默认:20
  21. marginB: 20, //(可选项)数字类型;内容文本底端与 left/right 顶端的距离,如果 left/right 都不存在,则是到对话框底端的距离;默认:20
  22. color: '#eee', //(可选项)字符串类型;内容文本字体颜色,支持 rgb、rgba、#;默认:#eee
  23. size: 12 //(可选项)数字类型:内容文本字体大小;默认:12
  24. },
  25. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  26. marginB: 7, //(可选项)数字类型;左边按钮的下边距;默认:7
  27. marginL: 20, //(可选项)数字类型;左边按钮的左边距;默认:20
  28. w: 130, //(可选项)数字类型;左边按钮的宽;默认:130
  29. h: 35, //(可选项)数字类型;左边按钮的高;默认:35
  30. corner: 2, //(可选项)数字类型;左边按钮圆角半径;默认:0.0
  31. bg: '#e0e', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  32. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  33. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  34. },
  35. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  36. marginB: 7, //(可选项)数字类型;右边按钮的下边距;默认:7
  37. marginL: 10, //(可选项)数字类型;右边按钮的左边距;默认:10
  38. w: 130, //(可选项)数字类型;右边按钮的宽;默认:130
  39. h: 35, //(可选项)数字类型;右边按钮的高;默认:35
  40. corner: 2, //(可选项)数字类型;右边按钮圆角半径;默认:0.0
  41. bg: '#e0e', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  42. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  43. size: 12 //(可选项)数字类型;右边按钮标题字体大小;默认:12
  44. }
  45. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. text: '' //字符串类型;输入文本框当前的值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.sendMessage({
  3. texts: {
  4. title: '你的昵称',
  5. hintText: '(点击此处修改昵称)',
  6. content: '亲,送你一个80元大礼包,请查收!退订请回复TD',
  7. leftBtnTitle: '取消',
  8. rightBtnTitle: '发送'
  9. },
  10. styles: {
  11. bg: '#fff',
  12. w: 300,
  13. corner: 2,
  14. title: {
  15. h: 40,
  16. show: {
  17. marginL: 6,
  18. titleSize: 14,
  19. titleColor: '#000'
  20. },
  21. input: {
  22. marginL: 6,
  23. textSize: 14,
  24. textColor: '#000'
  25. }
  26. },
  27. content: {
  28. color: '#000',
  29. size: 12
  30. },
  31. left: {
  32. marginB: 7,
  33. marginL: 10,
  34. w: 130,
  35. h: 35,
  36. corner: 2,
  37. bg: '#e0e',
  38. size: 12
  39. },
  40. right: {
  41. marginB: 7,
  42. marginL: 10,
  43. w: 130,
  44. h: 35,
  45. corner: 2,
  46. bg: '#e0e',
  47. size: 12
  48. }
  49. }
  50. }, function(ret) {
  51. api.alert({
  52. msg: JSON.stringify(ret)
  53. });
  54. if (ret.eventType == 'left') {
  55. var dialogBox = api.require('dialogBox');
  56. dialogBox.close({
  57. dialogName: 'sendMessage'
  58. });
  59. }
  60. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

scene

弹出 scene 样式的对话框

scene({params}, callback(ret, err))

params

rect:

  • 类型:JSON 对象类型
  • 描述:scene 对话框的尺寸配置, 上下左右居中对齐
  • 内部字段:
  1. {
  2. w: 280, //(可选项)数字类型;弹出框的宽度;默认值:280
  3. h: 400 //(可选项)数字类型;弹出框的高度;默认值:400
  4. }

texts:

  • 类型:JSON 对象
  • 描述:(可选项)scene对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '确认', //(可选项)字符串类型;标题内容,若不传则不显示该文本
  3. content:'场景', //(可选项)字符串类型;对话框文本内容,若不传则不显示该文本
  4. okBtnTitle: '取消' //(可选项)字符串类型;底部按钮标题,若不传则不显示该文本
  5. }

styles:

  • 类型:JSON 对象;
  • 描述:scene 对话框样式设置
  • 内部字段
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景颜色配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(100, 100, 100, 0.5)', //(可选项)字符串类型,不传使用系统默认颜色
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小,本功能暂仅支持iOS平台;默认:2
  5. title:{ //(可选项)JSON 对象;弹窗 title 样式配置,不传则不显示
  6. bg: '#aaa', //(可选项)字符串类型;标题栏背景颜色配置,支持 #、rgb、rgba;默认:#aaa
  7. h: 44, //(可选项)数字类型;标题栏高度,默认:44
  8. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  9. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  10. },
  11. sceneImg:{ //(可选项)JSON 对象;场景图片样式配置,不传则不显示
  12. h: 150, //(可选项)场景图片高度;默认:150
  13. path: '' // 字符串类型;场景图片路径(要求本地路径(widget://、fs:// )
  14. },
  15. content:{ //(可选项)JSON 对象;文本内容样式配置,不传则不显示该区域
  16. color: '#111', //(可选项)字符串类型;文本字体颜色,支持 rgb、rgba、#;默认:#111
  17. alignment: 'left' //(可选项)字符串类型;文本字对齐方式,可为 left|center|right;默认:left
  18. size: 12 //(可选项)数字类型;文本字体大小;默认:12
  19. },
  20. cell: { //(可选项)JSON 对象;情景事件选项每一行的样式配置,与 optionDatas 搭配使用,若 optionDatas 不存在则此配置无效
  21. bg: '#fff', //(可选项)字符串类型;情景事件选项每一行的背景,支持rgb、rgba、#、img;默认:#fff
  22. h: 48, //(可选项)数字类型;情景事件选项每一行的高度;默认:48
  23. icon: { //(可选项)JSON 对象;情景事件选项每一行图标的样式配置;与 optionDatas->icon 配合使用,若 optionDatas->icon 不存在则忽略此配置,不显示该行的图标区域
  24. marginL: 15, //(可选项)数字类型;图标相对于分组子项左端的间距大小;默认:15
  25. marginT: 9, //(可选项)数字类型;图标相对于分组子项顶端的间距大小;默认:9
  26. w: 30, //(可选项)数字类型;图标的宽度;默认:30
  27. h: 30, //(可选项)数字类型;图标的高度;默认:同 w
  28. corner: 2 //(可选项)数字类型;图标的圆角半径;默认:2
  29. },
  30. text: { //(可选项)JSON 对象;情景事件选项每一行文字样式配置,事件选项文字会自己上下居中显示,与 optionDatas->text 配合使用,若 optionDatas->text 不存在则忽略此配置,不显示该行的文本区域
  31. interval:10, //(可选项)数字类型;事件选项文本与左边图标的间距;默认:10
  32. size: 14, //(可选项)数字类型;事件选项文本字体大小;默认:14
  33. color: '#636363', //(可选项)字符串类型;事件选项文本文字颜色,支持rgb、rgba、#;默认:#636363
  34. selectedColor: '#636363', //(可选项)字符串类型;事件选项文本文字选中后颜色,支持rgb、rgba、#;默认:#636363
  35. align: 'left' //(可选项)字符串类型;事件选项文本文字对齐方式,可为 left|center|right;默认:left
  36. },
  37. lineColor: '#eee' //(可选项)字符串类型;分隔线的颜色,支持:rgb、rgba、#;默认:'#eee'
  38. },
  39. ok: { //(可选项)JSON 对象;底部确认按钮的样式配置,不传则不显示底部按钮
  40. h: 20, //(可选项)数字类型;底部按钮的高度;默认:20
  41. bg: '#89a', //(可选项)字符串类型;底部按钮的背景颜色,支持:rgb、rgba、#;默认:'#89a'
  42. titleColor: '#f00', //(可选项)字符串类型;底部按钮 title 文字颜色,支持:rgb、rgba、#;默认:'#f00'
  43. titleSize: 14 //(可选项)数字类型;底部按钮 title 文字大小;默认:14
  44. }
  45. }

optionDatas:

  • 类型:数组类型
  • 描述:(可选项)场景事件选项数据源,若为空则不显示
  • 内部字段:
  1. [
  2. { //(可选项)数组类型;该场景每一项的数据
  3. icon: 'fs://creater.png', //(可选项)字符串类型;图标地址,支持本地和网络资源路径(widget://、fs://),不传则不显示该行的图标
  4. text: '事件选项文字' //(可选项)字符串类型;事件选项文字,不传则不显示该行文本
  5. }
  6. ]

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'ok', // 字符串类型;交互事件类型,取值范围如下:
  3. // ok:用户点击了 ok 按钮
  4. // cell:用户点击了 cell 按钮
  5. index: 1 // 数字类型;表示用户点击了的选项的索引
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.scene({
  3. rect: {
  4. w: 280,
  5. h: 400
  6. },
  7. texts: {
  8. title: '情景1',
  9. content: '火车售票处前的队伍蜿蜒纵横,旁边一小伙一边张望,一边将手伸向前面买票人的口袋,啊,是小偷!',
  10. okBtnTitle: '确定'
  11. },
  12. styles: {
  13. bg: '#fff',
  14. title: {
  15. bg: '#aaa',
  16. h: 44,
  17. size: 14,
  18. color: '#000'
  19. },
  20. sceneImg: {
  21. h: 150,
  22. path: 'widget://image/sceneImg.png'
  23. },
  24. content: {
  25. color: '#111',
  26. size: 12
  27. },
  28. cell: {
  29. bg: '#fff',
  30. h: 48,
  31. text: {
  32. color: '#636363',
  33. size: 13
  34. },
  35. icon: {
  36. marginL: 15,
  37. marginT: 9,
  38. w: 30,
  39. h: 30,
  40. corner: 2
  41. }
  42. },
  43. ok: {
  44. bg: '#89a',
  45. titleColor: '#f00'
  46. }
  47. },
  48. optionDatas: [{
  49. icon: 'widget://image/scene1.png',
  50. text: '1、拿出手机偷拍'
  51. }, {
  52. icon: 'widget://image/scene2.png',
  53. text: '2、见义勇为抓小偷'
  54. }, {
  55. text: '3、大声提醒买票的人'
  56. }]
  57. }, function(ret, err) {
  58. if (ret) {
  59. alert(JSON.stringify(ret));
  60. } else {
  61. alert(JSON.stringify(err));
  62. }
  63. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

evaluation

弹出 evaluation 样式的对话框

evaluation({params}, callback(ret, err))

params

styles:

  • 类型:JSON 对象
  • 描述:evaluation 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框背景颜色,支持#、rgb、rgba、img,默认:#fff
  3. maskBg:'rgba(100, 100, 100, 0.5)', //(可选项)字符串类型,不传使用系统默认颜色
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认 300
  6. title:{ //(可选项)JSON 对象;对话框标题栏样式配置,若不传则不显示标题区域
  7. marginT: 20, //(可选项)数字类型;标题栏顶部与弹出框顶部距离;默认 20
  8. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  9. color: '#000', //(可选项)字符串类型;标题字体颜色,支持 #、rgb、rgba;默认:#000
  10. bold: true //(可选项)布尔类型;标题字体是否是粗体;默认:true
  11. },
  12. content:{ //(可选项)JSON 对象;文本内容样式配置;不传则不显示文本区域
  13. marginT: 20, //(可选项)数字类型;文本顶端与标题栏底端的间距,如果标题栏不存在,则是到弹出框顶端的距离;默认20
  14. marginB: 20, //(可选项)数字类型;文本底端与底端首个按钮的间距,若底部不存在按钮,则是到弹出框底端的距离;默认:20
  15. marginHorizental:10,//(可选项)数字类型;文本距离对话框左右边的距离;默认:10
  16. color: '#111', //(可选项)字符串类型:文本字体颜色,支持 rgb、rgba、#;默认:#111
  17. size: 12 //(可选项)数字类型:文本数字类型;默认:12
  18. },
  19. buttons:[{ //(可选项)数组类型;JSON 对象组成的数组,和texts中buttons数组长度保持一致。按钮样式配置,不传则不显示 button 区域
  20. marginB: 0, //(可选项)数字类型;按钮的下边距;默认:0
  21. marginL: 0, //(可选项)数字类型;按钮的左边距;默认:0
  22. w: 300, //(可选项)数字类型;按钮的宽;默认:300
  23. h: 35, //(可选项)数字类型;按钮的高;默认:35
  24. bg: '#fff', //(可选项)字符串类型;按钮的背景,支持 rgb,rgba,#,img;默认:'#fff'
  25. color: '#007FFF', //(可选项)字符串类型;按钮显示文字颜色,支持 rgb,rgba,#;默认:'#007FFF'
  26. size: 12 //(可选项)数字类型;按钮显示文字的大小;默认:12
  27. }]
  28. }

texts:

  • 类型:JSON 对象
  • 描述:(可选项)evaluation 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '确认', //(可选项)字符串类型;标题内容,若不传则不显示该文本
  3. content:'场景', //(可选项)字符串类型;对话框文本内容,文本区域大小随文本多少自适应,若不传则不显示该文本
  4. buttons: [{ //(可选项)数组类型;按钮显示文字组成的数组,和styles中buttons数组长度保持一致。由上往下排列(最上边的按钮索引为0)
  5. text: '取消' //(可选项)字符串类型;按钮显示文字;默认:未设置时只显示背景
  6. }]
  7. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. index: 1 //数字类型;表示用户点击了的按钮的索引,由上往下排列(最上边的按钮索引为 0)
  3. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.evaluation({
  3. styles: {
  4. bg: '#fff',
  5. w: 300,
  6. title: {
  7. marginT: 20,
  8. size: 15,
  9. color: '#000',
  10. bold: true
  11. },
  12. content: {
  13. marginT: 20,
  14. color: '#111',
  15. size: 12
  16. },
  17. buttons: [{
  18. marginB: 0,
  19. marginL: 0,
  20. w: 300,
  21. h: 35,
  22. bg: '#fff',
  23. color: '#007FFF',
  24. size: 12
  25. }, {
  26. marginB: 0,
  27. marginL: 0,
  28. w: 300,
  29. h: 35,
  30. bg: '#fff',
  31. color: '#007FFF',
  32. size: 12
  33. }]
  34. },
  35. texts: {
  36. title: '评价',
  37. content: '亲,给个好评吧',
  38. buttons: [{
  39. text: '下次再说'
  40. }, {
  41. text: '残忍的拒绝'
  42. }]
  43. }
  44. }, function(ret, err) {
  45. if (ret) {
  46. alert(JSON.stringify(ret));
  47. } else {
  48. alert(JSON.stringify(err));
  49. }
  50. });

可用性

iOS系统,Android系统

可提供的 1.0.0 及更高版本

raffle

弹出 raffle 样式的对话框

raffle({params}, callback(ret, err))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)raffle 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '确认', //(可选项)字符串类型;标题内容,若不传则不显示该文本
  3. mainText: '收入囊中', //(可选项)字符串类型;主文本内容,若不传则不显示该文本
  4. subText: '告诉好友', //(可选项)字符串类型;副文本内容,若不传则不显示该文本
  5. leftTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  6. rightTitle: '确定' //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  7. }

styles:

  • 类型:字符串
  • 描述:raffle 对话框样式设置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框背景颜色,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认 300
  6. title:{ //(可选项)JSON 对象;弹窗标题栏样式配置,若不传则不显示标题区域
  7. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  8. color: '#000', //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  9. marginT: 0 //(可选项)数字类型;距顶部的距离,默认为0.
  10. },
  11. icon:{ //(可选项)JSON 对象;图标样式配置,不传则不显示该插图区域
  12. marginT: 20, //(可选项)数字类型;图标顶端与标题栏底端的距离,图标左右居中显示;默认:20
  13. w: 40, //(可选项)数字类型;图标宽度;默认:40
  14. h: 40, //(可选项)数字类型;图标高度;默认:40
  15. iconPath: 'widget://' // 字符串类型;图标路径,要求本地路径(widget://、fs://);
  16. },
  17. main: { //(可选项)JSON 对象;主文本样式设置,主文本会左右居中显示,若不传则不显示主文本区域
  18. marginT: 20, //(可选项)数字类型;主文本相对于 icon 底端的间距大小;默认:20
  19. color: '#636363', //(可选项)字符串类型;主文本文字颜色,支持rgb、rgba、#;默认:#636363
  20. size: 13 //(可选项)数字类型;主文本字体大小;默认:13
  21. },
  22. sub: { //(可选项)JSON 对象;副文本样式设置,副文本会左右居中显示,若不传则不显示富文本区域
  23. marginT: 8, //(可选项)数字类型;副文本和主文本之间的间隙大小;默认:8
  24. color: '#999999', //(可选项)字符串类型;副文本文字颜色,支持 rgb、rgba、#;默认:#999999
  25. size: 12 //(可选项)数字类型;副文本字体大小;默认:12
  26. },
  27. left:{ //(可选项)JSON 对象;左边按钮样式设置, 不传则不显示左边按钮
  28. marginB: 7, //(可选项)数字类型;左边按钮的下边距;默认:7
  29. marginL: 18, //(可选项)数字类型;左边按钮的左边距;默认:18
  30. w: 90, //(可选项)数字类型;左边按钮的宽;默认:90
  31. h: 35, //(可选项)数字类型;左边按钮的高;默认:35
  32. corner: 0.0, //(可选项)数字类型;左边按钮圆角半径;默认:0.0
  33. bg: '#fff', //(可选项)字符串类型;左边按钮的背景,支持rgb,rgba,#,img;默认:'#fff'
  34. color: '#007FFF', //(可选项)字符串类型;左边按钮显示文字颜色,支持rgb,rgba,#;默认:'#007FFF'
  35. size: 12 //(可选项)数字类型;左边按钮显示文字的大小;默认:12
  36. },
  37. right: { //(可选项)JSON 对象;右边按钮样式设置,不传则不显示右边按钮
  38. marginB: 7, //(可选项)数字类型;右边按钮的下边距;默认:7
  39. marginL: 18, //(可选项)数字类型;右边按钮的左边距;默认:18
  40. w: 90, //(可选项)数字类型;右边按钮的宽;默认:90
  41. h: 35, //(可选项)数字类型;右边按钮的高;默认:35
  42. corner: 0.0, //(可选项)数字类型;右边按钮圆角半径;默认:0.0
  43. bg: '#fff', //(可选项)字符串类型;右边按钮的背景,支持rgb,rgba,#,img;默认:'#fff'
  44. color: '#007FFF', //(可选项)字符串类型;右边按钮显示文字颜色,支持rgb,rgba,#;默认:'#007FFF'
  45. size: 12 //(可选项)数字类型;右边按钮显示文字的大小;默认:12
  46. }
  47. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.raffle({
  3. texts: {
  4. title: '恭喜你',
  5. mainText: '5枚钱币',
  6. subText: '这就中了,还有什么你做不到',
  7. leftTitle: '收入囊中',
  8. rightTitle: '告诉好友'
  9. },
  10. styles: {
  11. bg: '#fff',
  12. w: 300,
  13. title: {
  14. size: 14,
  15. color: '#000'
  16. },
  17. icon: {
  18. marginT: 20,
  19. w: 40,
  20. h: 40,
  21. iconPath: 'widget://image/raffle.png'
  22. },
  23. main: {
  24. marginT: 20,
  25. color: '#636363',
  26. size: 13
  27. },
  28. sub: {
  29. marginT: 8,
  30. color: '#999999',
  31. size: 12
  32. },
  33. left: {
  34. marginB: 7,
  35. marginL: 18,
  36. w: 130,
  37. h: 35,
  38. corner: 2,
  39. bg: '#fff',
  40. color: '#007FFF',
  41. size: 12
  42. },
  43. right: {
  44. marginB: 7,
  45. marginL: 18,
  46. w: 130,
  47. h: 35,
  48. corner: 2,
  49. bg: '#fff',
  50. color: '#007FFF',
  51. size: 12
  52. }
  53. }
  54. }, function(ret, err) {
  55. if (ret) {
  56. alert(JSON.stringify(ret));
  57. } else {
  58. alert(JSON.stringify(err));
  59. }
  60. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

taskPlan

弹出 taskPlan 样式的对话框

taskPlan({params}, callback(ret, err))

params

rect:

  • 类型:JSON 类型
  • 描述:(可选项)taskPlan 对话框的宽度配置
  • 内部字段:
  1. {
  2. w: 300 //(可选项)数字类型;对话框的宽度;默认值:300
  3. }

texts:

  • 类型:JSON 对象
  • 描述:(可选项)taskPlan 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. mainTitle: '主标题', //(可选项)字符串类型;主标题,若不传则不显示主标题内容
  3. subTitle: '副标题', //(可选项)字符串类型;副标题,若不传则不显示副标题内容
  4. content: [{ //(可选项)数组类型;各行文本内容,若不传则不显示该文本
  5. text: '' // 字符串类型;每一行文本内容
  6. }],
  7. btnTitle: '确定' //(可选项)字符串类型;底部按钮标题,若不传则底部按钮不显示标题
  8. }

styles:

  • 类型:JSON 对象类型
  • 描述:taskPlan 对话框样式设置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框背景颜色,支持#、rgb、rgba、img,默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. main: { //(可选项)JSON 对象;主标题样式设置,主文本会左右居中显示,若不传则不显示主标题区域
  6. marginT: 20, //(可选项)数字类型;主标题相对于弹出框顶部的间距大小;默认:20
  7. color: '#636363', //(可选项)字符串类型;主标题文字颜色,支持rgb、rgba、#;默认:#636363
  8. size: 13, //(可选项)数字类型;主标题字体大小;默认:13
  9. bold: true //(可选项)布尔类型;主标题字体粗体显示,true | false;默认:true
  10. },
  11. sub: { //(可选项)JSON 对象;副标题样式设置,副文本会左右居中显示,若不传则不显副标题区域
  12. marginT: 8, //(可选项)数字类型;副标题和主文本之间的间隙大小;默认:8
  13. color: '#999999', //(可选项)字符串类型;副标题文字颜色,支持 rgb、rgba、#;默认:#999999
  14. size: 12, //(可选项)数字类型;副标题字体大小;默认:12
  15. },
  16. content: [{ //(可选项)数组类型;每一行内容的样式组成的数组,从上往下排列,若不传则不显示内容区域
  17. bg: '#fff', //(可选项)字符串类型;文本内容背景颜色,支持rgb,rgba,#;默认:'#fff'
  18. marginT: 10, //(可选项)数字类型;文本相对于弹出框顶端的间距大小;默认:10
  19. marginL: 10, //(可选项)数字类型;文本相对于弹出框左端的间距大小;默认:10
  20. w: 280, //(可选项)数字类型;文本宽度;默认:280
  21. h: 30 , //(可选项)数字类型;文本高度;默认:30
  22. align: 'left', //(可选项)字符串类型;文本对齐方式,left | center | right;默认:left
  23. color: '#007FFF', //(可选项)字符串类型;按钮显示文字颜色,支持rgb,rgba,#;默认:'#007FFF'
  24. size: 12 //(可选项)数字类型;按钮显示文字的大小;默认:12
  25. }],
  26. ok: { // JSON 对象;底部按钮样式设置
  27. marginT: 10, //(可选项)数字类型;按钮的上边距;默认:10
  28. marginB: 10, //(可选项)数字类型;按钮的下边距;默认:10
  29. marginL: 20, //(可选项)数字类型;按钮的左边距;默认:20
  30. w: 280, //(可选项)数字类型;按钮的宽;默认:280
  31. h: 35, //(可选项)数字类型;按钮的高;默认:35
  32. bg: '#fff', //(可选项)字符串类型;按钮的背景,支持rgb,rgba,#,img;默认:'#fff'
  33. color: '#007FFF', //(可选项)字符串类型;按钮显示文字颜色,支持rgb,rgba,#;默认:'#007FFF'
  34. size: 12 //(可选项)数字类型;按钮显示文字的大小;默认:12
  35. }
  36. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'ok' // 字符串类型;交互事件类型,取值范围如下:
  3. // ok(表示用户点击了底部按钮)
  4. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.taskPlan({
  3. rect: {
  4. w: 300
  5. },
  6. texts: {
  7. mainTitle: '昨天玩的不够努力哦',
  8. subTitle: '今天没有获得任务次数奖励呢',
  9. content: [{
  10. text: '今日赚任务总次数:3次'
  11. }, {
  12. text: '3次(基础)+ 0次(奖励)'
  13. }],
  14. btnTitle: '开始做任务'
  15. },
  16. styles: {
  17. bg: '#fff',
  18. main: {
  19. marginT: 20,
  20. color: '#636363',
  21. size: 13,
  22. bold: true,
  23. },
  24. sub: {
  25. marginT: 8,
  26. color: '#999999',
  27. size: 12,
  28. },
  29. content: [{
  30. bg: '#f00',
  31. marginT: 10,
  32. w: 280,
  33. h: 30,
  34. align: 'center',
  35. color: '#007FFF',
  36. size: 12
  37. }, {
  38. bg: '#fff',
  39. marginT: 10,
  40. w: 280,
  41. h: 30,
  42. align: 'left',
  43. color: '#007FFF',
  44. size: 12
  45. }],
  46. ok: {
  47. marginB: 10,
  48. marginL: 20,
  49. w: 280,
  50. h: 40,
  51. bg: '#fff',
  52. color: '#007FFF',
  53. size: 12
  54. }
  55. }
  56. }, function(ret) {
  57. alert(JSON.stringify(ret));
  58. if (ret.eventType == 'ok') {
  59. var dialogBox = api.require('dialogBox');
  60. dialogBox.close({
  61. dialogName: 'taskPlan'
  62. });
  63. }
  64. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

receipt

弹出 receipt 样式的对话框

receipt({params}

params

rect:

  • 类型:JSON 数组类型
  • 描述:(可选项)对话框的宽高设置
  • 内部字段:
  1. {
  2. w:200, //(可选项)数字类型;弹出框的宽度;默认值:200
  3. h:300 //(可选项)数字类型;弹出框的宽度;默认值:300
  4. }

texts:

  • 类型:JSON 数组类型
  • 描述:对话框按钮或标题的文本设置
  • 内部字段:
  1. {
  2. title:'标题', //(可选项)字符串类型;标题内容;不传则不显示该文本
  3. cancel:'取消', //(可选项)字符串类型;取消按钮文本配置;不传则不显示该文本
  4. }

items:

  • 类型:JSON 数组类型
  • 描述:对话框列表的显示数据
  • 内部字段:
  1. [
  2. {
  3. key : '起步价', // 字符串类型;列表标题内容;不传则不显示该文本
  4. value : '0.00' // 字符串类型;列表描述内容;不传则不显示该文本
  5. }
  6. ]

styles:

  • 类型:JSON 对象类型
  • 描述:(可选项)对话框样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. title:{ //(可选项)JSON对象类型;对话框标题设置,若不传则不显示标题区域
  6. textColor:'#000', //(可选项)字符串类型;标题的字体颜色;支持#、rgb、rgba;默认值:#000
  7. textSize:18, //(可选项)数字类型;标题的字体大小;默认值:18
  8. marginT:18 //(可选项)数字类型;标题的距离对话框顶部的距离;默认值:18
  9. },
  10. topBorder:{ //(可选项)JSON对象类型;上分割线的设置
  11. borderColor:'#000', //(可选项)字符串类型;边界线颜色,支持#、rgb、rgba;默认:#000
  12. borderWidth: 2, //(可选项)数字类型;边界线的粗细,默认值:2
  13. marginT: 10 //(可选项)数字类型;边界线的距离标题的下边距的距离,默认值:10
  14. },
  15. listHeight: 200, //(可选项)数字类型;列表的高度;默认值:200
  16. item:{ //(可选项)JSON对象类型;列表项的设置
  17. textColor: '#000', //(可选项)字符串类型;列表的字体颜色,支持#、rgb、rgba;默认值:#000
  18. textSize : 18, //(可选项)数字类型;列表的字体大小;默认值:18
  19. marginL:10, //(可选项)数字类型;列表key值距离列表左边的距离;默认值:10
  20. marginT:10, //(可选项)数字类型;key,value值距离每项顶部的距离;默认值:10
  21. marginB:10, //(可选项)数字类型;key,value值列表距离每项底部的距离;默认值:10
  22. marginR:10, //(可选项)数字类型;value值距离列表右边的距离;默认值:10
  23. bgColor:'#FFF' //(可选项)字符串类型;列表项的背景颜色,支持#、rgb、rgba;默认值:#FFF
  24. },
  25. bottomBorder:{ //(可选项)JSON对象类型;下分割线的设置
  26. borderColor:'#000', //(可选项)字符串类型;边界线颜色,支持#、rgb、rgba;默认值:#000
  27. borderWidth: 2 //(可选项)数字类型;边界线的粗细;默认值:2
  28. },
  29. cancel:{ //(可选项)取消按钮样式设置
  30. h: 35, //(可选项)数字类型;取消按钮高度;默认值:35
  31. textSize: 18, //(可选项)数字类型;取消按钮字体大小;默认值:18
  32. textColor:'#000', //(可选项)字符串类型;取消按钮字体颜色,支持#、rgb、rgba;默认值:#000
  33. marginT: 10 , //(可选项)数字类型;取消按钮距离弹框下分割线的距离;默认值:10
  34. normal: '#ffffff', //(可选项)字符串类型;取消按钮的背景设置,支持rgb、rgba、#、img;默认:#ffffff
  35. highlight: '#696969' //(可选项)字符串类型;取消按钮的背景高亮设置,支持rgb、rgba、#、img;默认:#696969
  36. }
  37. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType : 'cancel' // 字符串类型;返回的事件类型, 用户点击了底部的 cancel 按钮
  3. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.receipt({
  3. rect: {
  4. w: 300,
  5. h: 360
  6. },
  7. items: [{
  8. key: '起步价',
  9. value: '15.00'
  10. }, {
  11. key: '15公里',
  12. value: '50.10'
  13. }, {
  14. key: '9.98分钟',
  15. value: '19'
  16. }, {
  17. key: '小计',
  18. value: '69'
  19. }, {
  20. key: '优惠',
  21. value: '10'
  22. }, {
  23. key: '已消费',
  24. value: '69.0'
  25. }],
  26. texts: {
  27. title: '我的打车收据',
  28. cancel: '取消'
  29. },
  30. styles: {
  31. bg: '#FFF',
  32. title: {
  33. textColor: '#000',
  34. textSize: 18,
  35. marginT: 10
  36. },
  37. topBorder: {
  38. borderColor: '#000',
  39. borderWidth: 2,
  40. marginT: 10
  41. },
  42. listHeight: 260,
  43. item: {
  44. textColor: '#000',
  45. textSize: 14,
  46. marginL: 10,
  47. marginT: 5,
  48. marginB: 5,
  49. bgColor: '#FFF'
  50. },
  51. bottomBorder: {
  52. borderColor: '#000',
  53. borderWidth: 2,
  54. },
  55. cancel: {
  56. textSize: 18,
  57. textColor: '#f00',
  58. marginT: 10,
  59. highlight: '#696969'
  60. }
  61. }
  62. }, function(ret, err) {
  63. if (ret) {
  64. alert(JSON.stringify(ret));
  65. } else {
  66. alert(JSON.stringify(err));
  67. }
  68. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

tips

弹出 tips 样式的对话框

tips({params}

params

rect:

  • 类型:JSON 对象类型
  • 描述:(可选项)对话框的宽高设置
  • 内部字段:
  1. {
  2. w:200 //(可选项)数字类型;弹出框的宽度;默认值:200
  3. }

texts:

  • 类型:JSON 对象类型
  • 描述:对话框标题和按钮的文本设置
  • 内部字段:
  1. {
  2. title : '这里是标题文本', //(可选项)字符串类型;标题文本,不传则不显示该文本
  3. content: '这里是内容' //(可选项)字符串类型;内容文本;不传则不显示该文本
  4. }

buttons:

  • 类型:JSON 数组类型
  • 描述:底部按钮的文本设置
  • 内部字段:
  1. [{
  2. normal : 'widget://image/icon.png', // 字符串类型;按钮常态图标的路径,支持 widget:// fs://
  3. highlight : 'widget://image/icon.png', // 字符串类型;按钮高亮图标的路径,支持 widget:// fs://
  4. text : '微信' //(可选项)字符串类型;按钮文本,不传则不显示该文本
  5. }]

styles:

  • 类型:JSON 对象类型
  • 描述:对话框的样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小,本功能暂仅支持iOS平台;默认:2
  5. topImage:{ //(可选项)顶部图标的样式设置,若不传则不显示顶部插图区域
  6. path:'widget://image/tipImage.png', //(可选项)字符串类型;顶部图标的的路径,支持 (widget://、fs://);不传则不显示该图片
  7. w: 200, //(可选项)数字类型;图标的宽度;默认值:200
  8. h: 80 //(可选项)数字类型;图标的高度;默认值:80
  9. },
  10. title:{ //(可选项)JSON对象类型;标题文本信息设置,若不传则不显示标题区域
  11. color: '#000', //(可选项)字符串类型;标题文本字体颜色,支持#、rgb、rgba;默认:#000
  12. size : 14, //(可选项)数字类型;标题文本字体大小;默认值:14
  13. marginT : 15 //(可选项)数字类型;距离顶部图标的上边距; 默认值:15
  14. },
  15. content:{ //(可选项)JSON对象设置;内容文本设置,该区域高度随内容大小自适应,若不传则不显示内容文本区域
  16. color : '#000', //(可选项)字符串类型;内容文本字体颜色,支持#、rgb、rgba;默认:#000
  17. size : 12, //(可选项)数字类型;字体的大小;默认值:12
  18. marginT : 15 //(可选项)数字类型;距离标题的上边距;默认值:15
  19. },
  20. border:{ // (可选项) 内容边框与下面按钮的分隔线设置
  21. color: '#eee', //(可选项)字符串类型;分割线的颜色,默认值:#eee
  22. width: 2, //(可选项)数字类型;分割线的粗细,默认值:2
  23. marginT: 15 //(可选项)数字类型;距内容文本间的距离;默认值:15
  24. },
  25. buttons:[{ //JSON对象类型;底部分享按钮设置
  26. iconSize : 30, //(可选项)数字类型;按钮图标的边长;默认值:30
  27. textColor:'#000', //(可选项)字符串类型 按钮文本字体颜色,字符串类型;标题文本字体颜色,支持#、rgb、rgba;默认:#000
  28. textSize : 12, //(可选项)数字类型;按钮文本字体的大小;默认值:12
  29. marginT : 15, //(可选项)数字类型;按钮与分割线间的距离;默认值:15
  30. space : 10 //(可选项)数字类型;按钮之间的间隙;默认值:10
  31. }]
  32. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. index: 0 // 数字类型;点击按钮的索引(由左至右排列)
  3. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.tips({
  3. rect: {
  4. w: 200
  5. },
  6. texts: {
  7. title: '这里是标题文本',
  8. content: '这里是内容'
  9. },
  10. buttons: [{
  11. normal: 'widget://image/weixin.png',
  12. highlight: 'widget://image/weixin.png',
  13. text: '微信'
  14. }, {
  15. normal: 'widget://image/circularMenu3.png',
  16. highlight: 'widget://image/circularMenu3light.png',
  17. text: '奖杯'
  18. }, {
  19. normal: 'widget://image/circularMenu4.png',
  20. highlight: 'widget://image/circularMenu4light.png',
  21. text: '人民币'
  22. }],
  23. styles: {
  24. bg: '#FFF',
  25. topImage: {
  26. path: 'widget://image/top_image.png',
  27. w: 200,
  28. h: 80
  29. },
  30. title: {
  31. color: '#000',
  32. size: 14,
  33. marginT: 15
  34. },
  35. content: {
  36. color: '#000',
  37. size: 12,
  38. marginT: 15
  39. },
  40. border: {
  41. color: '#eee',
  42. width: 2,
  43. marginT: 10
  44. },
  45. buttons: [{
  46. iconSize: 30,
  47. textColor: '#000',
  48. textSize: 12,
  49. marginT: 15
  50. }, {
  51. iconSize: 30,
  52. textColor: '#000',
  53. textSize: 12,
  54. marginT: 15
  55. }, {
  56. iconSize: 30,
  57. textColor: '#000',
  58. textSize: 12,
  59. marginT: 15
  60. }]
  61. }
  62. }, function(ret) {
  63. alert(JSON.stringify(ret));
  64. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

discount

弹出 discount 样式的对话框

discount({params}

params

rect:

  • 类型:JSON 对象类型
  • 描述:(可选项)对话框的宽高设置
  • 内部字段:
  1. {
  2. w:200, //(可选项)数字类型;弹出框的宽度;默认值:200
  3. h:300 //(可选项)数字类型;弹出框的高度;默认值:300
  4. }

texts:

  • 类型:JSON 对象类型
  • 描述:(可选项)取消按钮的文本设置
  • 内部字段:
  1. {
  2. cancel: '取消' //(可选项)字符串类型;取消按钮名称,若不传则不显示该文本
  3. }

styles:

  • 类型:JSON 对象类型
  • 描述:对话框的样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  4. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  5. image:{ // JSON 对象;显示图片的配置
  6. path:'widget://image/image.png', // 字符串类型;图片路径,支持 widget:// fs://
  7. marginB:30 //(可选项)数字类型;图片下边缘距离弹窗底部的距离;默认值:30
  8. },
  9. cancel:{ // JSON 对象;取消按钮配置,按钮位置在底部区域居中显示
  10. icon:'widget://image/cancel_btn.png', //(可选项)字符串类型;按钮图标路径,支持 widget:// fs:// ;不传则不显示该图标
  11. marginB: 30, //(可选项)数字类型;取消按钮底端与屏幕底端的间距;默认:30
  12. w:50, //(可选项)数字类型;按钮宽;默认值:50
  13. h:50, //(可选项)数字类型;按钮高;默认值:50
  14. textSize: 12, //(可选项)数字类型;取消按钮文本字体大小;默认值:12
  15. textColor: '#000' //(可选项)字符串类型;取消按钮的字体颜色,支持#、rgb、rgba;默认:#000
  16. }
  17. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON对象
  • 描述:返回参数
  • 内部字段:
  1. {
  2. eventType : 'cancel' // 字符串类型;回调事件类型,取值范围如下:
  3. // cancel:用户点击取消按钮事件
  4. // image:用户点击图片事件
  5. // mask: 点击遮罩事件
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.discount({
  3. rect: {
  4. w: 200,
  5. h: 300
  6. },
  7. styles: {
  8. bg: '#FFF',
  9. image: {
  10. path: 'widget://image/image.png',
  11. marginB: 30
  12. },
  13. cancel: {
  14. icon: 'widget://image/cancel_btn.png',
  15. w: 50,
  16. h: 50
  17. }
  18. }
  19. }, function(ret) {
  20. alert(JSON.stringify(ret));
  21. if (ret.eventType == 'cancel') {
  22. dialogBox.close({
  23. dialogName: 'discount'
  24. });
  25. }
  26. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

share

弹出 share 样式的对话框

share({params})

params

rect:

  • 类型: JSON对象类型
  • 描述:对话框的宽高设置
  • 内部字段:
  1. {
  2. w: 300, //(可选项)数字类型;对话框的宽;默认值:300
  3. h: 300 //(可选项)数字类型;对话框的高;默认值:300
  4. }

items:

  • 类型:JSON数组类型
  • 描述:对话框数据
  • 内部字段:
  1. [
  2. {
  3. text: '微信', // 字符串类型;每一项的标题文字
  4. icon: 'widget://image/icon/weixin_icon.png' // 字符串类型;每一项图片的路径 支持 fs:// widget://
  5. }
  6. ]

styles:

  • 类型:JSON 对象类型
  • 描述:对话框样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. column: 3, //(可选项)数字类型;支持的列数;默认值:3
  6. horizontalSpace : 15, //(可选项)数字类型;每一项的横向间隙,默认值:15
  7. verticalSpace : 15, //(可选项)数字类型;每一项的纵向间隙,默认值:15
  8. itemText:{ //(可选项)JSON 对象;网格每一项文本设置
  9. color: '#000', //(可选项)字符串类型;每一项的文本字体颜色设置,支持#、rgb、rgba;默认:#000
  10. size: 12, //(可选项)字符串类型;每一项的文本字体大小设置;默认值:12
  11. marginT: 8 //(可选项)数字类型;每一项的文本上边缘与图标的间距;默认值:8
  12. },
  13. itemIcon:{ //(可选项)JSON 对象;,每一项图片样式的设置
  14. size: 80 //(可选项)数字类型;按钮图片的大小;默认值:80
  15. }
  16. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. index: 0 // 数字类型;点击项的索引(由左至右,由上到下)
  3. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.share({
  3. rect: {
  4. w: 300,
  5. h: 300
  6. },
  7. items: [{
  8. text: '微信',
  9. icon: 'widget://image/icon/weixin_icon.png'
  10. }, {
  11. text: 'QQ',
  12. icon: 'widget://image/icon/qq_icon.png'
  13. }, {
  14. text: 'QQZone',
  15. icon: 'widget://image/icon/QQZone.png'
  16. }, {
  17. text: 'apiCloud',
  18. icon: 'widget://image/icon/apicloud.png'
  19. }, {
  20. text: '微博',
  21. icon: 'widget://image/icon/weibo_icon.png'
  22. }, {
  23. text: '短信',
  24. icon: 'widget://image/icon/shortmessage_icon.png'
  25. }],
  26. styles: {
  27. bg: '#FFF',
  28. column: 3,
  29. horizontalSpace: 15,
  30. verticalSpace: 30,
  31. itemText: {
  32. color: '#000',
  33. size: 15,
  34. marginT: 10
  35. },
  36. itemIcon: {
  37. size: 80
  38. }
  39. }
  40. }, function(ret) {
  41. alert(JSON.stringify(ret));
  42. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

actionMenu

弹出 actionMenu 样式的对话框

actionMenu({params})

params

rect:

  • 类型:JSON 对象
  • 描述:对话框的宽高设置
  • 内部字段:
  1. {
  2. h: 150 //(可选项)数字类型;对话框的高;默认值:150
  3. }

texts:

  • 类型:JSON 对象
  • 描述:(可选项)取消按钮的文本设置
  • 内部字段:
  1. {
  2. cancel: '取消' //(可选项)字符串类型;取消按钮名称,若不传则不显示该文本
  3. }

items:

  • 类型:JSON数组类型
  • 描述:对话框内子按钮配置,多出屏幕的按钮可左右拖动查看,按钮和标题所占区域在弹框区域上下居中显示
  • 内部字段:
  1. [
  2. {
  3. text: '微信', // 字符串类型;每一项的标题文字
  4. icon: 'widget://image/icon/weixin_icon.png' // 字符串类型;每一项图片的路径 支持 fs:// widget://
  5. }
  6. ]

styles:

  • 类型:JSON 对象类型
  • 描述:对话框样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. column: 3, //(可选项)数字类型;每屏显示的按钮个数;默认值:3
  5. itemText:{ //(可选项)JSON 对象;网格每一项文本设置
  6. color: '#000', //(可选项)字符串类型;每一项的文本字体颜色设置,支持#、rgb、rgba;默认:#000
  7. size: 12, //(可选项)字符串类型;每一项的文本字体大小设置;默认值:12
  8. marginT: 8 //(可选项)数字类型;每一项的文本上边缘与图标的间距;默认值:8
  9. },
  10. itemIcon:{ //(可选项)JSON 对象;每一项图片样式的配置
  11. size: 30 //(可选项)数字类型;按钮图片的大小;默认值:30
  12. },
  13. cancel:{ //(可选项)JSON 对象;底部按钮样式的配置
  14. bg: 'fs://icon.png', //(可选项)字符串类型:底部按钮的背景配置,支持rgb、rgba、#、img
  15. h:44 , //(可选项)数字类型;底部按钮高和宽;默认:44
  16. color:'#000', //(可选项)字符串类型;底部按钮标题字体颜色,支持rgb、rgba、#;默认:'#000'
  17. size: 14 //(可选项)数字类型;按钮标题的字体大小;默认:14
  18. }
  19. }

isCuttingLine:

  • 类型:布尔类型
  • 描述: (可选项)是否显示分割线
  • 默认值:false

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. eventType: 'cancel', // 字符串类型;交互事件类型,取值范围如下:
  3. // cancel:点击取消按钮事件
  4. // click:点击子按钮事件
  5. index: 0 // 数字类型;所点击的子按钮的索引(由左至右),仅当 eventType 为 click 时有值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.actionMenu ({
  3. rect:{
  4. h: 150
  5. },
  6. texts:{
  7. cancel: '取消'
  8. },
  9. items:[
  10. {
  11. text: '微信',
  12. icon: 'widget://image/icon/weixin_icon.png'
  13. },
  14. {
  15. text: 'QQ',
  16. icon: 'widget://image/icon/qq_icon.png'
  17. },
  18. {
  19. text: '微博',
  20. icon: 'widget://image/icon/weibo_icon.png'
  21. },
  22. {
  23. text: '短信',
  24. icon: 'widget://image/icon/shortmessage_icon.png'
  25. }
  26. ],
  27. styles:{
  28. bg:'#FFF',
  29. column: 3,
  30. itemText: {
  31. color: '#000',
  32. size: 12,
  33. marginT:8
  34. },
  35. itemIcon:{
  36. size:80
  37. },
  38. cancel:{
  39. bg: 'fs://icon.png',
  40. color:'#000',
  41. h: 44 ,
  42. size: 14
  43. }
  44. }
  45. }, function(ret){
  46. alert(JSON.stringify(ret));
  47. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

input

打开一个带输入框的弹出框

注意此接口只适用于iOS8.3以上系统,iOS8.1.3会导致崩溃,这是iOS系统更新时遗留的bug,无法修改

input({params},callback(ret))

params

keyboardType:

  • 类型:字符串
  • 描述:(可选项)输入框获取焦点时,弹出的键盘类型;
  • 默认值:’default’
  • 取值范围:
    • default(默认键盘)
    • number(数字键盘)
    • search(搜索键盘)
    • secure(输入框为密码输入框)
    • forbid(禁用输入中文)

texts:

  • 类型:JSON 对象
  • 描述:(可选项)input 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '昵称', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. placeholder: '在这里输入文字', //(可选项)字符串类型;输入框提示文字,若不传则不显示该提示文本
  4. default:'', //(可选项)字符串类型;输入框默认值,若不传则不显示;默认:空
  5. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  6. rightBtnTitle: '发送' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  7. }

styles:

  • 类型:JSON 对象
  • 描述:input 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. h: 240, //(可选项)数字类型;对话框的高;默认:240
  7. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  8. h: 60, //(可选项)数字类型;标题栏区域高度;默认:60
  9. marginT: 20, //(可选项)数字类型;标题栏与对话框顶端间距;默认:20
  10. alignment: 'center', //(可选项)字符串类型;标题文字显示位置;取值范围:center、left、right
  11. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  12. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  13. },
  14. input:{ //(可选项)JSON 对象;输入框输入文本框样式配置
  15. h: 60, //(可选项)数字类型;输入框区域高度;默认:20
  16. alignment: 'center', //(可选项)字符串类型;输入框文字显示位置;取值范围:center、left、right ;默认:居中
  17. marginT: 6, //(可选项)数字类型;输入框顶端与标题栏底端的距离,如果标题栏不存在,则是到窗口顶端的距离;默认:居中显示
  18. marginLeft: 10, //(可选项)数字类型;输入框的左边距;默认:10
  19. marginRight: 10, //(可选项)数字类型;输入框的右边距;默认:10
  20. textSize: 14, //(可选项)数字类型;输入文本框文本字体大小;默认:14
  21. verticalCenter:true, //(可选项)布尔类型;是否上下居中;默认:false;该参数暂仅支持 android
  22. textColor: '#000' , //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
  23. borderColor:'rgba(0,0,0,0)', //(可选项)字符串类型;输入文本框的边框颜色,支持#、rgb、rgba;默认:#000
  24. borderWidth:1 //(可选项)数字类型;输入文本框的边框宽度;默认:0
  25. corner:5, //(可选项)数字类型;对输入框圆角大小;默认:0
  26. },
  27. dividingLine: { //(可选项)JSON对象;按钮与输入框之间的分割线的配置
  28. width: 0.5, //(可选项)数字类型;分割线粗细;默认:0.5
  29. color: '#696969' //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
  30. },
  31. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  32. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  33. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  34. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  35. h: 40 //(可选项) 数字类型;左边按钮的高度;默认:40
  36. w:60, //(可选项) 数字类型;左边按钮的宽度;默认:提示框的宽度的一半
  37. marginB:10, //(可选项) 数字类型;左边按离底部的边距;默认:0
  38. corner:5, //(可选项) 数字类型;左边按钮的圆角;默认:0
  39. widhtBorder:1, //(可选项) 数字类型;左边按钮的边宽;默认:0
  40. normalBorderColor:'#778899', //(可选项) 数字类型;左边按钮的边宽颜色;默认:'rgba(0,0,0,0)'
  41. activeBorderColor:'#0000CD', //(可选项) 数字类型;左边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)'
  42. activeColor:'#006400', //(可选项) 数字类型;左边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)'
  43. activeBg:'#6B8E23' //(可选项) 数字类型;左边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)'
  44. },
  45. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  46. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  47. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  48. size: 12, //(可选项)数字类型;右边按钮标题字体大小;默认:12
  49. h: 40, //(可选项) 数字类型;右边按钮的高度;默认:40
  50. w:60, //(可选项) 数字类型;右边按钮的宽度;默认:提示框的宽度的一半
  51. marginB:10, //(可选项) 数字类型;右边按离底部的边距;默认:0
  52. corner:5, //(可选项) 数字类型;右边按钮的圆角;默认:0
  53. widhtBorder:1, //(可选项) 数字类型;右边按钮的边宽;默认:0
  54. normalBorderColor:'#778899', //(可选项) 数字类型;右边按钮的边宽颜色;默认:'rgba(0,0,0,0)'
  55. activeBorderColor:'#0000CD', //(可选项) 数字类型;右边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)'
  56. activeColor:'#006400', //(可选项) 数字类型;右边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)'
  57. activeBg:'#6B8E23' //(可选项) 数字类型;右边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)'
  58. },
  59. horizontalLine:{
  60. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮上边横线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  61. height:1 //(可选项)数字类型;左右边按钮横线的高度;默认:0
  62. },
  63. verticalLine:{
  64. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮中间竖线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  65. width:1 //(可选项)数字类型;左右边按钮竖线的高度;默认:0
  66. },
  67. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. text: '' //字符串类型;输入文本框当前的值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.input({
  3. keyboardType: 'default',
  4. texts: {
  5. title: '你的昵称',
  6. placeholder: '输入金额',
  7. leftBtnTitle: '取消',
  8. rightBtnTitle: '确定'
  9. },
  10. styles: {
  11. bg: '#fff',
  12. corner: 2,
  13. w: 300,
  14. h: 240,
  15. title: {
  16. h: 60,
  17. alignment: 'center',
  18. size: 14,
  19. color: '#000',
  20. marginT:30,
  21. },
  22. input: {
  23. h: 60,
  24. y:30,
  25. marginT:15,
  26. marginLeft: 10,
  27. marginRight:10,
  28. textSize: 14,
  29. textColor: '#000',
  30. corner:5, //(可选项)数字类型;对输入框圆角大小;默认:0
  31. },
  32. dividingLine: {
  33. width: 0.5,
  34. color: '#696969'
  35. },
  36. left: {
  37. bg: 'rgba(0,0,0,0)',
  38. color: '#007FFF',
  39. size: 12,
  40. h: 40, //(可选项) 数字类型;右边按钮的高度;默认:40
  41. w:60, //(可选项) 数字类型;左边按钮的宽度;默认:提示框的宽度的一半
  42. marginB:10, //(可选项) 数字类型;左边按离底部的边距;默认:0
  43. corner:5, //(可选项) 数字类型;左边按钮的圆角;默认:0
  44. widhtBorder:1, //(可选项) 数字类型;左边按钮的边宽;默认:0
  45. normalBorderColor:'#778899', //(可选项) 数字类型;左边按钮的边宽颜色;默认:'rgba(0,0,0,0)'
  46. activeBorderColor:'#0000CD', //(可选项) 数字类型;左边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)'
  47. activeColor:'#006400', //(可选项) 数字类型;左边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)'
  48. activeBg:'#6B8E23' //(可选项) 数字类型;左边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)'
  49. },
  50. right: {
  51. bg: 'rgba(0,0,0,0)',
  52. color: '#007FFF',
  53. size: 12,
  54. h: 40, //(可选项) 数字类型;右边按钮的高度;默认:40
  55. w:60, //(可选项) 数字类型;右边按钮的宽度;默认:提示框的宽度的一半
  56. marginB:10, //(可选项) 数字类型;右边按离底部的边距;默认:0
  57. corner:5, //(可选项) 数字类型;右边按钮的圆角;默认:0
  58. widhtBorder:1, //(可选项) 数字类型;右边按钮的边宽;默认:0
  59. normalBorderColor:'#778899', //(可选项) 数字类型;右边按钮的边宽颜色;默认:'rgba(0,0,0,0)'
  60. activeBorderColor:'#0000CD', //(可选项) 数字类型;右边按钮的高亮状态下边宽颜色;默认:'rgba(0,0,0,0)'
  61. activeColor:'#006400', //(可选项) 数字类型;右边按钮的高亮状态下标题颜色;默认:'rgba(0,0,0,0)'
  62. activeBg:'#6B8E23' //(可选项) 数字类型;右边按钮的高亮状态下背景颜色;默认:'rgba(0,0,0,0)'
  63. }
  64. }
  65. }, function(ret) {
  66. api.alert({
  67. msg: JSON.stringify(ret)
  68. });
  69. if (ret.eventType == 'left') {
  70. var dialogBox = api.require('dialogBox');
  71. dialogBox.close({
  72. dialogName: 'input'
  73. });
  74. }
  75. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

amount

弹出 amount 样式的对话框

amount({params}, callback(ret, err))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)amount 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '修改购买数量', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. default: '1', //(可选项)字符串类型;对话框文本默认值,若不传则不显示默认值
  4. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  5. rightBtnTitle: '确定' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  6. }

styles:

  • 类型:JSON 对象
  • 描述:sendMessage 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 0, //(可选项)数字类型;对话框背景圆角大小;默认:0
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. h: 260, //(可选项)数字类型;对话框的高;默认:260
  7. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  8. marginT: 20, //(可选项)数字类型;显示文本相对于弹框顶端的距离;默认:20
  9. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  10. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  11. },
  12. input:{ //(可选项)JSON 对象;标题栏输入文本框样式配置
  13. w: 150, //(可选项)数字类型;输入框区域的宽度;默认:150
  14. h: 44, //(可选项)数字类型;输入框区域的高度;默认:44
  15. marginT: 15, //(可选项)数字类型;输入文本框与标题文本的距离,若标题文本不存在,则是与弹框顶部的距离;默认:15
  16. size: 14, //(可选项)数字类型;输入文本框文本字体大小;默认:14
  17. color: '#000' //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
  18. },
  19. dividingLine: { //(可选项)JSON对象;按钮与输入框之间的分割线的配置
  20. marginT: 10, //(可选项)数字类型;输入文本框与分割线的距离;默认:10
  21. width: 0.5, //(可选项)数字类型;分割线粗细;默认:0.5
  22. color: '#696969' //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
  23. },
  24. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  25. marginL: 10, //(可选项)数字类型;左边按钮的左边距;默认:10
  26. w: 135, //(可选项)数字类型;左边按钮的宽;默认:135
  27. h: 55, //(可选项)数字类型;左边按钮的高;默认:55
  28. bg: '#e0e', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  29. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  30. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  31. },
  32. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  33. marginR: 10, //(可选项)数字类型;右边按钮的右边距;默认:10
  34. w: 135, //(可选项)数字类型;右边按钮的宽;默认:135
  35. h: 55, //(可选项)数字类型;右边按钮的高;默认:55
  36. bg: '#e0e', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  37. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  38. size: 12 //(可选项)数字类型;右边按钮标题字体大小;默认:12
  39. }
  40. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

decimal:

  • 类型:布尔类型
  • 描述:(可选项)是否支持小数输入,若为true,则弹出可输入小数的键盘,用户点击’+’或’-‘当前数字增减步幅为当前数字的最小单位,如当前值为1.1,则点击’+’或’-‘会增加减少0.1,当前值为1.11,则随之增减0.01
  • 默认:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. amount: '' //字符串类型;输入文本框当前的值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.amount({
  3. texts: {
  4. title: '修改购买数量',
  5. default: '1',
  6. leftBtnTitle: '取消',
  7. rightBtnTitle: '确定'
  8. },
  9. styles: {
  10. bg: '#fff',
  11. corner: 0.5,
  12. w: 300,
  13. h: 260,
  14. title: {
  15. marginT: 20,
  16. size: 14,
  17. color: '#000'
  18. },
  19. input: {
  20. w: 150,
  21. h: 44,
  22. marginT: 15,
  23. size: 14,
  24. color: '#000'
  25. },
  26. dividingLine: {
  27. marginT: 10,
  28. width: 0.5,
  29. color: '#696969'
  30. },
  31. left: {
  32. marginL: 10,
  33. w: 135,
  34. h: 55,
  35. bg: '#e0e',
  36. color: '#007FFF',
  37. size: 12
  38. },
  39. right: {
  40. marginR: 10,
  41. w: 135,
  42. h: 55,
  43. bg: '#e0e',
  44. color: '#007FFF',
  45. size: 12
  46. }
  47. }
  48. }, function(ret) {
  49. api.alert({
  50. msg: JSON.stringify(ret)
  51. });
  52. if (ret.eventType == 'left') {
  53. var dialogBox = api.require('dialogBox');
  54. dialogBox.close({
  55. dialogName: 'amount'
  56. });
  57. }
  58. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

list

弹出 list 样式的对话框

list({params}, callback(ret, err))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)amount 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '修改购买数量', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. enter: '提交', //(可选项)字符串类型;下边按钮标题,若不传则不显示该文本
  4. }

listTitles:

  • 类型:数组
  • 描述:对话框内的列表每条 title 文本字符串组成的数组,超出该列表显示区域的可上下拖动查看

styles:

  • 类型:JSON 对象
  • 描述:list 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 0, //(可选项)数字类型;对话框背景圆角大小;默认:0
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. h: 260, //(可选项)数字类型;对话框的高;默认:260
  7. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  8. h: 44, //(可选项)数字类型;标题栏高度;默认:44
  9. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  10. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  11. },
  12. list: { //(可选项)JSON 对象;列表样式配置
  13. h: 128, //(可选项)数字类型;列表区域的高度;默认:128
  14. row: 2, //(可选项)数字类型;列表显示的行数;默认:2
  15. title: { //(可选项)JSON对象;列表标题样式配置
  16. marginL: 10, //(可选项)数组类型;列表标题距离左边的距离;默认:10
  17. size: 14, //(可选项)数字类型;列表标题文本字体大小;默认:14
  18. color: '#696969' //(可选项)字符串类型;列表标题文本字体颜色,支持#、rgb、rgba;默认:#696969
  19. },
  20. content: { //(可选项)JSON对象;列表内容文本的样式配置((可输入的文本))
  21. marginL: 10, //(可选项)数组类型;列表内容文本与左边标题文本的距离;默认:10
  22. size: 14, //(可选项)数字类型;列表内容文本字体大小;默认:14
  23. color: '#000' //(可选项)字符串类型;列表内容文本字体颜色,支持#、rgb、rgba;默认:#000
  24. }
  25. },
  26. dividingLine: { //(可选项)JSON对象;按钮与输入框之间的分割线的配置
  27. width: 0.5, //(可选项)数字类型;分割线粗细;默认:0.5
  28. color: '#696969' //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
  29. },
  30. enter:{ //(可选项)JSON 对象;弹框底部按钮样式配置
  31. w: 135, //(可选项)数字类型;底部按钮的宽;默认:135
  32. h: 55, //(可选项)数字类型;底部按钮的高;默认:55
  33. bg: '#e0e', //(可选项)字符串类型;底部按钮的背景,支持rgb、rgba、#、img;默认:'#e0e'
  34. color: '#007FFF', //(可选项)字符串类型;底部按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  35. size: 12 //(可选项)数字类型;底部按钮标题字体大小;默认:12
  36. corner:0 //(可选项)数字类型;底部按钮圆角度大小;默认:0
  37. }
  38. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'enter', //字符串类型;交互事件类型,取值范围如下:
  3. // enter(表示用户点击了底部按钮)
  4. amounts: [] //数组类型;用户输入列表内的文本内容组成的数组
  5. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.list({
  3. tapClose: true,
  4. texts: {
  5. title: '发货信息',
  6. enter: '提交'
  7. },
  8. listTitles: ['快递公司:', '订单编号:', '收货姓名:', '发货姓名:'],
  9. styles: {
  10. bg: '#fff',
  11. corner: 0,
  12. w: 300,
  13. h: 260,
  14. title: {
  15. h: 44,
  16. size: 14,
  17. color: '#000'
  18. },
  19. list: {
  20. h: 128,
  21. row: 2,
  22. title: {
  23. marginL: 10,
  24. size: 14,
  25. color: '#696969'
  26. },
  27. content: {
  28. marginL: 10,
  29. size: 14,
  30. color: '#000'
  31. }
  32. },
  33. dividingLine: {
  34. width: 0.5,
  35. color: '#696969'
  36. },
  37. enter: {
  38. w: 135,
  39. h: 55,
  40. bg: '#e0e',
  41. color: '#007FFF',
  42. size: 12
  43. }
  44. }
  45. }, function(ret) {
  46. api.alert({
  47. msg: JSON.stringify(ret)
  48. });
  49. if (ret.eventType == 'enter') {
  50. var dialogBox = api.require('dialogBox');
  51. dialogBox.close({
  52. dialogName: 'list'
  53. });
  54. }
  55. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

webView

打开一个可加载 web 页面的弹框

webView({params},callback(ret))

params

texts:

  • 类型:JSON 对象
  • 描述:(可选项)input 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '接单提醒', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. leftBtnTitle: '去看看', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  4. rightBtnTitle: '去接单' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  5. }

path:

  • 类型:字符串
  • 描述:要加载的页面地址 支持(http:// widget://)

styles:

  • 类型:JSON 对象
  • 描述:input 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  5. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  6. h: 280, //(可选项)数字类型;对话框的高;默认:240
  7. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  8. h: 44, //(可选项)数字类型;标题栏区域高度;默认:44
  9. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  10. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  11. },
  12. upDividingLine: { //(可选项)JSON对象;上分割线样式配置
  13. width: 0.5, //(可选项)数字类型;上分割线粗细;默认:0.5
  14. color: '#696969' //(可选项)字符串类型;上分割线颜色,支持rgb、rgba、#;默认:#696969
  15. },
  16. webView:{ //(可选项)JSON 对象;web 加载区域样式配置
  17. h: 192, //(可选项)数字类型;web 加载区域高度;默认:192
  18. bg: '#fff', //(可选项)字符串类型;web 加载区域背景配置;默认:#fff
  19. },
  20. downDividingLine: { //(可选项)JSON对象;下分割线样式配置
  21. width: 0.5, //(可选项)数字类型;下分割线粗细;默认:0.5
  22. color: '#696969' //(可选项)字符串类型;下分割线颜色,支持rgb、rgba、#;默认:#696969
  23. },
  24. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  25. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  26. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  27. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  28. },
  29. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  30. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  31. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  32. size: 12 //(可选项)数字类型;右边按钮标题字体大小;默认:12
  33. }
  34. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.webView({
  3. tapClose: false,
  4. path: 'http://www.apicloud.com',
  5. texts: {
  6. title: '接单提醒',
  7. leftBtnTitle: '看主页',
  8. rightBtnTitle: '继续接单'
  9. },
  10. styles: {
  11. bg: '#fff',
  12. corner: 2,
  13. w: 300,
  14. h: 280,
  15. title: {
  16. h: 44,
  17. size: 14,
  18. color: '#000'
  19. },
  20. upDividingLine: {
  21. width: 0.5,
  22. color: '#696969'
  23. },
  24. webView: {
  25. h: 192,
  26. bg: '#fff',
  27. },
  28. downDividingLine: {
  29. width: 0.5,
  30. color: '#696969'
  31. },
  32. left: {
  33. bg: 'rgba(0,0,0,0)',
  34. color: '#007FFF',
  35. size: 12
  36. },
  37. right: {
  38. bg: 'rgba(0,0,0,0)',
  39. color: '#007FFF',
  40. size: 12
  41. }
  42. }
  43. }, function(ret) {
  44. api.alert({
  45. msg: JSON.stringify(ret)
  46. });
  47. if (ret.eventType == 'left') {
  48. var dialogBox = api.require('dialogBox');
  49. dialogBox.close({
  50. dialogName: 'webView'
  51. });
  52. }
  53. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

popupAlert

打开一个警告对话框

popupAlert({params},callback(ret))

params

msg:

  • 类型:JSON 对象
  • 描述:(可选项)popupAlert 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
  3. okBtnTitle: '确定', //(可选项)字符串类型;按钮标题,若不传则不显示该文本
  4. }

styles:

  • 类型:JSON 对象
  • 描述:popupAlert 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. h: 200, //(可选项)数字类型;对话框的高;默认:240
  5. msg :{ // JSON对象;msg字体设置
  6. color : '#000000', // 字符串类型;字体颜色,msg字体颜色;默认黑色
  7. size : 20, // 数字类型;字体大小
  8. align : 'left' // 对齐方式;支持 left center right
  9. maginLR: 10 // 距左右的间距,默认是10
  10. maginT: 15 //距顶部的间距,默认是15
  11. },
  12. border : { //(可选项)对话框的边框设置(不传则没有边框)
  13. left : '10 #FF0000', // 对话框的左边框(不传不显示),格式为: 'width color'; 边框的粗细width 边框的颜色color,中间空格分割
  14. right : '10 #FF0000', // 对话框的右边框(不传不显示)
  15. top : '10 #0000FF', // 对话框的上边框(不传不显示)
  16. bottom : '10 #0000FF' // 对话框的下边框(不传不显示)
  17. }
  18. okBtn :{ //(可选项)JSON 对象;确定按钮样式配置,不传则不显示左边按钮
  19. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;确定按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  20. highlightBg : '#00F', //(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
  21. color: '#007FFF', //(可选项)字符串类型;确定按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  22. size: 12 //(可选项)数字类型;确定按钮标题字体大小;默认:12
  23. maginLR: 10 // 距左右的间距,默认是10
  24. maginB: 10 //距底部的间距,默认是10
  25. }
  26. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'ok', // 字符串类型;交互事件类型,取值范围如下:
  3. // ok(表示用户点击了确定按钮)
  4. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.popupAlert({
  3. tapClose: false,
  4. msg: {
  5. content:'这里是文本内容',
  6. okBtnTitle: '确定'
  7. },
  8. styles: {
  9. bg: '#fff',
  10. maskBg:'rgba(0,0,0,0.5)',
  11. h: 280,
  12. msg :{
  13. color : '#000000',
  14. size : 20,
  15. maginLR: 10,
  16. maginT: 15
  17. },
  18. border : {
  19. left : '10 #FF0000',
  20. right : '10 #FF0000',
  21. top : '10 #0000FF',
  22. bottom : '10 #0000FF'
  23. }
  24. okBtn :{
  25. bg: 'rgba(0,0,0,0)',
  26. color: '#007FFF',
  27. size: 12,
  28. maginLR: 10,
  29. maginB: 10
  30. }
  31. }
  32. }, function(ret) {
  33. alert(JSON.stringify(ret));
  34. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

confirm

打开一个确认对话框

confirm({params},callback(ret))

params

msg:

  • 类型:JSON 对象
  • 描述:(可选项)confirm 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. content:'这里是文本内容', //(可选项)字符串类型:对话框文本内容,文本所占区域的高度随字文本多少自适应,若不传则不显示该文本
  3. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  4. rightBtnTitle: '确认' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  5. }

styles:

  • 类型:JSON 对象
  • 描述:confirm 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba;默认:#fff
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. h: 200, //(可选项)数字类型;对话框的高;默认:240
  5. msg :{ // JSON对象;msg字体设置
  6. color : '#000000', // 字符串类型;字体颜色,msg字体颜色;默认黑色
  7. size : 20, // 数字类型;字体大小
  8. align : 'left' // 对齐方式;支持 left center right
  9. maginLR: 10 // 距左右的间距,默认是10
  10. maginT: 15 //距顶部的间距,默认是15
  11. },
  12. border : { //(可选项)对话框的边框设置(不传则没有边框)
  13. left : '10 #FF0000', // 对话框的左边框(不传不显示),格式为: 'width color'; 边框的粗细width 边框的颜色color,中间空格分割
  14. right : '10 #FF0000', // 对话框的右边框(不传不显示)
  15. top : '10 #0000FF', // 对话框的上边框(不传不显示)
  16. bottom : '10 #0000FF' // 对话框的下边框(不传不显示)
  17. },
  18. leftBtn :{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  19. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  20. highlightBg : '#00F', //(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
  21. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  22. size: 12 //(可选项)数字类型;左边按钮标题字体大小;默认:12
  23. maginL: 10 // 距左边的间距,默认是10
  24. maginB: 10 //距底部的间距,默认是10
  25. },
  26. rightBtn :{ //(可选项)JSON 对象;右边按钮样式配置,不传则不显示左边按钮
  27. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  28. highlightBg : '#00F', //(可选项)字符串类型;左边按钮按下的背景,支持rgb、rgba、#、img;默认:'#00F'
  29. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  30. size: 12 //(可选项)数字类型;右边按钮标题字体大小;默认:12
  31. maginL: 20 // 距左边的间距,默认是20
  32. maginR: 10 // 距右边的间距,默认是10
  33. maginB: 10 //距底部的间距,默认是10
  34. }
  35. }

tapClose:

  • 类型:布尔类型
  • 描述:是否可以取消(点击遮罩,android系统点击回退是否取消对话框)
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'cancel', // 字符串类型;交互事件类型,取值范围如下:
  3. // cancel(表示用户点击了左边取消按钮)
  4. // ok (表示用户点击了右边确定按钮)
  5. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.confirm({
  3. tapClose: false,
  4. msg: {
  5. content:'这里是文本内容',
  6. leftBtnTitle: '取消',
  7. rightBtnTitle:'确定'
  8. },
  9. styles: {
  10. bg: '#fff',
  11. maskBg:'rgba(0,0,0,0.5)',
  12. h: 280,
  13. msg :{
  14. color : '#000000',
  15. size : 20,
  16. maginLR: 10 ,
  17. maginT: 15
  18. },
  19. border : {
  20. left : '10 #FF0000',
  21. right : '10 #FF0000',
  22. top : '10 #0000FF',
  23. bottom : '10 #0000FF'
  24. },
  25. leftBtn :{
  26. borderColor: 'rgba(0,0,0,0)',
  27. color: '#007FFF',
  28. size: 12
  29. },
  30. rightBtn :{
  31. bg: 'rgba(0,0,0,0)',
  32. selectedBg:'#F00',
  33. color: '#007FFF',
  34. size: 12
  35. }
  36. }
  37. }, function(ret) {
  38. alert(JSON.stringify(ret));
  39. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭弹出的对话框

close ({params})

params

dialogName:

  • 类型:字符串类型
  • 描述:上面所列各种对话框的样式名(接口)

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.close({
  3. dialogName: 'alert'
  4. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

inputbox

打开一个带输入框的弹出框

注意此接口只适用于iOS8.3以上系统,iOS8.1.3会导致崩溃,这是iOS系统更新时遗留的bug,无法修改

inputbox({params},callback(ret))

params

keyboardType:

  • 类型:字符串
  • 描述:(可选项)输入框获取焦点时,弹出的键盘类型;
  • 默认值:’default’
  • 取值范围:
    • default(默认键盘)
    • number(数字键盘)
    • search(搜索键盘)
    • secure(输入框为密码输入框)
    • forbid(禁用输入中文)

texts:

  • 类型:JSON 对象
  • 描述:(可选项)input 对话框模块可配置的文本
  • 内部字段:
  1. {
  2. title: '昵称', //(可选项)字符串类型;标题栏显示文本内容,若不传则不显示该文本
  3. placeholder: '在这里输入文字', //(可选项)字符串类型;输入框提示文字,若不传则不显示该提示文本
  4. default:'', //(可选项)字符串类型;输入框默认值,若不传则不显示;默认:空
  5. leftBtnTitle: '取消', //(可选项)字符串类型;左边按钮标题,若不传则不显示该文本
  6. rightBtnTitle: '发送' //(可选项)字符串类型;右边按钮标题,若不传则不显示该文本
  7. }

styles:

  • 类型:JSON 对象
  • 描述:input 对话框样式配置
  • 内部字段:
  1. {
  2. bg: '#fff', //(可选项)字符串类型;对话框整体背景配置,支持#、rgb、rgba、img;默认:#fff
  3. corner: 2, //(可选项)数字类型;对话框背景圆角大小;默认:2
  4. w: 300, //(可选项)数字类型;对话框的宽;默认:300
  5. h: 240, //(可选项)数字类型;对话框的高;默认:240
  6. bottomBtnMarginB:10, //(可选项)数字类型;对话框底部按钮距离对话框底部边距
  7. title:{ //(可选项)JSON 对象;弹窗的 title 样式配置,不传则不显示标题区域
  8. h: 60, //(可选项)数字类型;标题栏区域高度;默认:60
  9. marginT: 20, //(可选项)数字类型;标题栏与对话框顶端间距;默认:20
  10. alignment: 'center', //(可选项)字符串类型;标题文字显示位置;取值范围:center、left、right
  11. size: 14, //(可选项)数字类型;标题字体大小;默认:14
  12. color: '#000' //(可选项)字符串类型;标题字体颜色,支持#、rgb、rgba;默认:#000
  13. },
  14. input:{ //(可选项)JSON 对象;输入框输入文本框样式配置
  15. h: 60, //(可选项)数字类型;输入框区域高度;默认:20
  16. alignment: 'center', //(可选项)字符串类型;输入框文字显示位置;取值范围:center、left、right
  17. marginT: 6, //(可选项)数字类型;输入框顶端与标题栏底端的距离,如果标题栏不存在,则是到窗口顶端的距离;默认:居中显示
  18. marginLeft: 10, //(可选项)数字类型;输入框的左边距;默认:10
  19. marginRight: 10, //(可选项)数字类型;输入框的右边距;默认:10
  20. textSize: 14, //(可选项)数字类型;输入文本框文本字体大小;默认:14
  21. textColor: '#000' , //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
  22. borderColor:'rgba(0,0,0,0)', //(可选项)字符串类型;输入文本框的边框颜色,支持#、rgb、rgba;默认:#000
  23. verticalCenter:true, //(可选项)布尔类型;是否上下居中;默认:false;该参数暂仅支持 android
  24. textColor: '#000' , //(可选项)字符串类型;输入文本框文本字体颜色,支持#、rgb、rgba;默认:#000
  25. borderColor:'rgba(0,0,0,0)', //(可选项)字符串类型;输入文本框的边框颜色,支持#、rgb、rgba;默认:#000
  26. borderWidth:1 //(可选项)数字类型;输入文本框的边框宽度;默认:0
  27. },
  28. dividingLine: { //(可选项)JSON对象;按钮与输入框之间的分割线的配置
  29. width: 0.5, //(可选项)数字类型;分割线粗细;默认:0.5
  30. color: '#696969' //(可选项)字符串类型;分割线颜色,支持rgb、rgba、#;默认:#696969
  31. },
  32. left:{ //(可选项)JSON 对象;左边按钮样式配置,不传则不显示左边按钮
  33. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;左边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  34. color: '#007FFF', //(可选项)字符串类型;左边按钮标题字体颜色,支持rgb,rgba、#;默认:'#007FFF'
  35. size: 12, //(可选项)数字类型;左边按钮标题字体大小;默认:12
  36. h: 40 , //(可选项) 数字类型;左边按钮的高度;默认:40
  37. w: 40, //(可选项) 数字类型;左边按钮的宽度;默认:对话框宽度的二分之一
  38. corner:3 //(可选项) 数字类型;左边按钮的圆角度;默认:0
  39. leftMargin:10 //(可选项) 数字类型;左边按钮的左边距;默认:0
  40. },
  41. right: { //(可选项)JSON 对象;右边按钮样式配置,不传则不显示右边按钮
  42. bg: 'rgba(0,0,0,0)', //(可选项)字符串类型;右边按钮的背景,支持rgb、rgba、#、img;默认:'rgba(0,0,0,0)'
  43. color: '#007FFF', //(可选项)字符串类型;右边按钮标题字体颜色,支持rgb、rgba、#;默认:'#007FFF'
  44. size: 12 , //(可选项)数字类型;右边按钮标题字体大小;默认:12
  45. h: 40 , //(可选项) 数字类型;右边按钮的高度;默认:0
  46. w: 40 , //(可选项) 数字类型;右边按钮的宽度;默认:对话框宽度的二分之一
  47. corner:3 //(可选项) 数字类型;右边按钮的圆角度;默认:0
  48. rightMargin:10 //(可选项) 数字类型;右边按钮的右边距;默认:0
  49. },
  50. horizontalLine:{
  51. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮上边横线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  52. height:1 //(可选项)数字类型;左右边按钮横线的高度;默认:0
  53. },
  54. verticalLine:{
  55. color:'rgba(245,245,245,0)', //(可选项)字符串类型;左右按钮中间竖线的颜色,支持rgb、rgba、#;默认:'rgba(245,245,245,0)'
  56. width:1 //(可选项)数字类型;左右边按钮竖线的高度;默认:0
  57. },
  58. }

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
  1. {
  2. eventType: 'left', //字符串类型;交互事件类型,取值范围如下:
  3. // left(表示用户点击了左边按钮)
  4. // right(表示用户点击了右边按钮)
  5. text: '' //字符串类型;输入文本框当前的值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.inputbox({
  3. tapClose:true,
  4. keyboardType: 'default',
  5. texts: {
  6. title: '你的昵称',
  7. placeholder: '输入金额',
  8. leftBtnTitle: '取消',
  9. rightBtnTitle: '确定'
  10. },
  11. styles: {
  12. bg: '#fff',
  13. corner: 2,
  14. w: 300,
  15. h: 240,
  16. title: {
  17. h: 60,
  18. alignment: 'center',
  19. size: 14,
  20. color: '#000',
  21. marginT:30,
  22. },
  23. input: {
  24. h: 60,
  25. y:30,
  26. marginT:15,
  27. marginLeft: 10,
  28. marginRight:10,
  29. textSize: 14,
  30. textColor: '#000'
  31. },
  32. dividingLine: {
  33. width: 0.5,
  34. color: '#696969'
  35. },
  36. left: {
  37. bg: 'rgba(0,0,0,0)',
  38. color: '#007FFF',
  39. size: 12
  40. },
  41. right: {
  42. bg: 'rgba(0,0,0,0)',
  43. color: '#007FFF',
  44. size: 12
  45. }
  46. }
  47. }, function(ret) {
  48. api.alert({
  49. msg: JSON.stringify(ret)
  50. });
  51. if (ret.eventType == 'left') {
  52. var dialogBox = api.require('dialogBox');
  53. dialogBox.close({
  54. dialogName: 'inputbox'
  55. });
  56. }
  57. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

multiLineMenu

弹出 multiLineMenu 样式的对话框,与actionMenu对话框功能一致,区别在于该对话框支持多行

multiLineMenu({params})

params

rect:

  • 类型:JSON 对象
  • 描述:对话框的宽高设置
  • 内部字段:
  1. {
  2. h: 150 //(可选项)数字类型;对话框的高;默认值:150
  3. }

texts:

  • 类型:JSON 对象
  • 描述:(可选项)取消按钮的文本设置
  • 内部字段:
  1. {
  2. cancel: '取消' //(可选项)字符串类型;取消按钮名称,若不传则不显示该文本
  3. }

items:

  • 类型:JSON数组类型,注意此处为二维数组
  • 描述:对话框内子按钮配置,多出屏幕的按钮可左右拖动查看,按钮和标题所占区域在弹框区域上下居中显示
  • 内部字段:
  1. [
  2. [{
  3. text: '微信', // 字符串类型;每一项的标题文字
  4. icon: 'widget://image/icon/weixin_icon.png' // 字符串类型;每一项图片的路径 支持 fs:// widget://
  5. }],
  6. ]

styles:

  • 类型:JSON 对象类型
  • 描述:对话框样式设置
  • 内部字段:
  1. {
  2. bg:'#FFF', //(可选项)字符串类型;对话框的背景色,支持#、rgb、rgba、img;默认:#FFF
  3. maskBg:'rgba(0,0,0,0.5)', //(可选项)字符串类型;遮罩层背景颜色,支持#、rgb、rgba;默认:rgba(0,0,0,0.5)
  4. column: 3, //(可选项)数字类型;每屏显示的按钮个数;默认值:3
  5. itemText:{ //(可选项)JSON 对象;网格每一项文本设置
  6. color: '#000', //(可选项)字符串类型;每一项的文本字体颜色设置,支持#、rgb、rgba;默认:#000
  7. size: 12, //(可选项)字符串类型;每一项的文本字体大小设置;默认值:12
  8. marginT: 8 //(可选项)数字类型;每一项的文本上边缘与图标的间距;默认值:8
  9. },
  10. itemIcon:{ //(可选项)JSON 对象;每一项图片样式的配置
  11. size: 30 //(可选项)数字类型;按钮图片的大小;默认值:30
  12. },
  13. cancel:{ //(可选项)JSON 对象;底部按钮样式的配置
  14. bg: 'fs://icon.png', //(可选项)字符串类型:底部按钮的背景配置,支持rgb、rgba、#、img
  15. h:44 , //(可选项)数字类型;底部按钮高和宽;默认:44
  16. color:'#000', //(可选项)字符串类型;底部按钮标题字体颜色,支持rgb、rgba、#;默认:'#000'
  17. size: 14 //(可选项)数字类型;按钮标题的字体大小;默认:14
  18. }
  19. }

isCuttingLine:

  • 类型:布尔类型
  • 描述: (可选项)是否显示分割线
  • 默认值:false

tapClose:

  • 类型:布尔类型
  • 描述:(可选项)是否点击遮罩层关闭该对话框
  • 默认值:false

animation:

  • 类型:布尔类型
  • 描述:是否再打开或关闭对话框时使用动画
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON对象
  • 内部字段:
  1. {
  2. eventType: 'cancel', // 字符串类型;交互事件类型,取值范围如下:
  3. // cancel:点击取消按钮事件
  4. // click:点击子按钮事件
  5. index: 0 // 数字类型;所点击的子按钮的索引(由左至右),仅当 eventType 为 click 时有值
  6. }

示例代码

  1. var dialogBox = api.require('dialogBox');
  2. dialogBox.multiLineMenu ({
  3. rect:{
  4. h: 150
  5. },
  6. texts:{
  7. cancel: '取消'
  8. },
  9. items:[[{
  10. text: '微信',
  11. icon: 'widget://image/icon/weixin_icon.png'
  12. },
  13. {
  14. text: 'QQ',
  15. icon: 'widget://image/icon/qq_icon.png'
  16. },
  17. {
  18. text: '微博',
  19. icon: 'widget://image/icon/weibo_icon.png'
  20. },
  21. {
  22. text: '短信',
  23. icon: 'widget://image/icon/shortmessage_icon.png'
  24. }]],
  25. styles:{
  26. bg:'#FFF',
  27. column: 3,
  28. itemText: {
  29. color: '#000',
  30. size: 12,
  31. marginT:8
  32. },
  33. itemIcon:{
  34. size:80
  35. },
  36. cancel:{
  37. bg: 'fs://icon.png',
  38. color:'#000',
  39. h: 44 ,
  40. size: 14
  41. }
  42. }
  43. }, function(ret){
  44. alert(JSON.stringify(ret));
  45. });

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本