anima-dialog

2.0.0 • Public • Published

dialog


弹出框,兼容webView 的弹出控件,Dialog 、Alert、Confirm、Prompt

其中 : Alert、Confirm、Prompt 都是单例类


Usage

简单示例

<span id="p1">文本信息</span>
  var Dialog = require('anima-dialog');
  var dialog = new Dialog({
    content : '#p1', //也可以是文本和html
    title : '弹出框'
  });
  dialog.show();

Alert

  var Dialog = require('anima-dialog');
  Dialog.Alert.show({
    title : '提示信息',
    message : 'alert 信息',
    button : '按钮'
  },function(){
    console.log('确认')
  });

Comfirm

  var Dialog = require('anima-dialog');
  Dialog.Confirm.show({
    title : '确认信息',
    message : '是否确认某些信息?',
    okButton : 'ok',
    cancelButton : 'cancel'
  },function(rst){
    console.log(rst.ok)
  });

Prompt

  var Dialog = require('anima-dialog');
  Dialog.Prompt.show({
    title : '确认信息',
    value : '100', //默认值
    required : true //是否必填
  },function(rst){
    console.log(rst.ok + ' ' + rst.value)
  });

Dialog Api

  • 此控件继承 Pop 控件可以使用pop控件的一切配置项和属性,常用属性: 'width','mask'

配置项

title String

  • 标题,默认为空

content String

  • Dialog的内容
  • id,css选择器,例如 '#p1'
  • 文本或者html

buttons Array

  • 按钮组,默认2个按钮
 
 buttons : [{
        id : 'cancel',
        cls : 'am-button am-button-sm am-button-white',
        text : '取消',
        handler : function(){
          var cancel = this.get('cancel');
          cancel && cancel.call(this);
        }
      },{
        id : 'ok',
        cls : 'am-button am-button-sm',
        text : '确认',
        handler : function(){
          var success = this.get('success');
          success && success.call(this);
        }
      }]
 
  • id 用于标示按钮,可以通过 dialog.get(id+'Btn')的方式获取到按钮,例如 dialog.get('okBtn')
  • cls 应用的样式
  • text 按钮的文本
  • handler 点击的回调函数

success Function

  • 点击确认按钮的回调函数

cancel Function

  • 点击取消按钮的回调函数

方法

show() 显示

hide() 隐藏

Alert Api

配置项

title String

  • 标题

button String

  • 标题

message String

  • 信息内容

success Function

  • 回调函数

静态方法

Alert.show(cfg,callback) 显示提示框

Alert.hide() 隐藏提示框

Comfirm API

配置项

title String

  • 标题

message String

  • 信息内容

okButton String

  • 确认按钮的文本

cancelButton String

  • 取消按钮的文本

方法

Confirm.show(cfg,callback) 显示

  • cfg 可以传入配置项信息,一般是 title,message,okButton,cancelButton
  • callback 函数原型 function(rst){} ,rst.ok表示是否点击了确认按钮

Confirm.hide() 隐藏

Prompt API

配置项

title String

  • 标题

value String

  • 显示时输入框内的值

required Boolean

  • 是否必填

okButton String

  • 确认按钮的文本

cancelButton String

  • 取消按钮的文本

方法

Prompt.show(cfg,callback) 显示

  • cfg 可以传入配置项信息,一般是 title,value,okButton,cancelButton
  • callback 函数原型 function(rst){} ,rst.ok表示是否点击了确认按钮,rst.value代表输入框中的值

Prompt.hide() 隐藏

Readme

Keywords

none

Package Sidebar

Install

npm i anima-dialog

Weekly Downloads

9

Version

2.0.0

License

none

Last publish

Collaborators

  • jaredleechn
  • smbey0nd
  • yuanfei.gyf