（7）kendo UI使用基础介绍与问题整理——dialog/基础说明

首先带有个人主观色彩地说一句，”我不太喜欢kendo UI的dialog“，不过我还不太确认是我对它没那么了解，还是实际项目需求问题，还是使用方法不当。

下面进行基本的介绍，应该还会带着我的不满吧，欢迎大家批评指责！

官网demo链接：https://demos.telerik.com/kendo-ui/dialog/index

官网文档链接： https://docs.telerik.com/kendo-ui/api/javascript/ui/dialog

一、基本用法

demo：

<div id="dialog"></div>
<script>
    $("#dialog").kendoDialog({
      title:'提示信息',
      closealeb:true,
      content:'这里是一段提示信息！'
      width:'260px',
      actions: [{
          text: "确认",
          action: function(e){
          },
          primary: true
      },{
          text: "取消"
      }],
      close:function(e){
          this.destroy();
      }
    });
   $("#dialog").data("kendoDialog").open();
</script>

 

配置参数：

名称	类型	默认值	描述
内容
title	String	null	标题内容
content	String	null	消息内容 传入的是HTMLElement类型
尺寸
width	Number	'auto'	设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。  可以是百分比
height	Number	'auto'	设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。  可以是百分比
maxWidth	Number	'auto'	最大宽度  内容为自适应的情况，可以设置最大的宽度，超出限定的宽度后，将出现滚动条
maxHeight	Number	'auto'	最大高度  内容为自适应高度的情况，可以设置最大的高度，超出限定的高度后，将出现滚动条
按钮
actions	arry	null	自定义按钮  配置参数成员：一个按钮是一个集合  text —— 按钮名称  action —— 按下动作按钮后调用的回调函数  primary —— 指示操作按钮是否将被装饰为主按钮的布尔属性  animation —— 用于更改默认动画
按钮参数
text	String	null	按钮名称
action	function		按下动作按钮后调用的回调函数
primary	Boolean	false	指示操作按钮是否将被装饰为主按钮的布尔属性
animation	Boolean	false	用于更改默认动画，值false将会禁用小部件中的所有动画 animation: false  animation:true 不是有效的配置。
	Object	null	animation: { close: false } 关闭对话框时使用的动画  animation: { close: { effects: "fade:out" } } 用于关闭弹出窗口的效果  animation: { close: { duration: 2000 } } 定义关闭动画持续时间  animation: { open: { effects: "fade:in" } } 用于打开弹出窗口的效果  animation: { open: { duration: 100 } } 定义打开动画持续时间
显示
closeable	Boolean	true	是否可关闭。  默认可关闭。设置为不可关闭后，弹窗右上角没有×
visible	Boolean	true	指定对话框是否最初可见
messages	Object	-	定义对话框中显示的标签文本。主要用于本地化。
messages.close	String	“close”	关闭按钮的title  messages:{ close: "Close Me!" }
messages.promptInput	String	"input"	提示输入的标题  messages:{ promptInput: "Input!" }
modal	Boolean	true	指定对话框是否应该在页面上显示模态叠加。  设置为false，不叠加
高级事件
initOpen	Function		对话框打开之前触发 initOpen: function() { // open animation will start soon }
close	Fucntion		当对话框关闭时触发 close: function(e) { // close animation has finished playing }
hide	Function		当对话框完成关闭动画时执触发 hide: function() { // close animation is about to finish }
open	function		对话框打开时触发 open: function() { // open animation will start soon }
show	function		当一个对话框完成其开场动画时触发 show: function() { // open animation has finished playing }

 

方法：

1、标题 title()

获取标题 demo：

var dialog = $("#dialog").data("kendoDialog");
var title = dialog.title();

设置标题 demo：

var dialog = $("#dialog").data("kendoDialog");
dialog.title("<em>Hello</em>");

 

2、内容 content()

获取内容 demo：

var dialog = $("#dialog").data("kendoDialog");
console.log(dialog.content())

设置内容 demo：

$("#dialog").kendoDialog();
var dialog = $("#dialog").data("kendoDialog");
dialog.content("Kendo UI all the things!");

 

3、打开 open()

$("#dialog").kendoDialog({
  visible: false
});
var dialog = $("#dialog").data("kendoDialog");
dialog.open();

 

4、关闭 close()

demo：

var dialog = $("#dialog").data("kendoDialog");
dialog.close();

拓展：

实现定时关闭

$("#dialog").kendoDialog();
var dialog = $("#dialog").data("kendoDialog");
setTimeout(function() {
  dialog.close();
}, 1000);

 

5、销毁 destroy()

var dialog = $("#dialog").data("kendoDialog");
dialog.destroy();

 

6、显示的z-index最大 toFront()

增加z-index对话框的样式，wrapper使实例在其他打开的对话框之上。该方法在使用该open方法时自动执行。

var dialog = $("#dialog").data("kendoDialog");
dialog.toFront();

===================

 以上全部内容是本人整理的官网上的内容。

 如有错误，欢迎大家批评指正！使用的时候，大家可以根据项目的实际情况灵活使用，多参考官网。

二、临场发挥

   本人参与的使用kendo项目，涉及到很多弹窗的功能使用。

   大致分为以下三类：

   1、信息提示     如：保存成功，操作失败等纯文字提示。

                            分析：弹窗内容——显示文字，按钮——“确定”按钮，点击“确定”，关闭弹窗。

   2、操作确认      如：在修改某个内容时，弹出操作的提醒窗口，提示用户是否确认要执行某个操作。

                              分析：弹窗内容——显示操作提示文字，按钮——“是”、“否”。点击“是”，触发某个事件；点击“否”，关闭窗口。

  3、带有可操作项的弹窗   如：编辑某些信息时采用了弹窗的形式，这时弹窗上会带有可编辑项，如输入框等，可能涉及必填，这时点击确认，需要判断必填项是否填写，给出提示等。

                                            分析：弹窗内容——显示带有可编辑项的html，按钮——“确定”、“返回”。点击“确定”，触发某个事件；点击“返回”，关闭窗口。

  以上三种情况，可以分别使用kendoUI提供的三种dialog，相信大家会在kendo的官网上找到这些demo。

 1、信息提示demo：

kendo.alert("保存成功！");

2、操作确认demo：

kendo.confirm("你确定要删除这个用户吗?").then(function () {
                //执行删除用户操作
            }, function () {
                //kendo.alert("You chose to Cancel action.");
            });

 3、带有可操作项的弹窗 demo

<div id="dialog"></div>
<script>
var dialog = $("#dialog");
dialog.kendoDialog({
            width: "400px",
            title: "修改密码",
            content: '<form><div><input value="admin"></div>\
                           <div><input placeholder="新密码"></div>\
                           <div><input placeholder="再次输入新密码">\ 
                           </div></form>',//大致如此吧，请原谅我的懒惰
            actions: [
                { text: '确定', 
                   primary: true, 
                   action: function(){
                       //自行发挥吧
                    }
                 },
                { text: '取消'}
            ]
        });
</script>

 

外带一个官网的带有输入的弹窗，自己理解吧！

kendo.prompt("Please, enter a arbitrary value:", "any value").then(function (data) {
                kendo.alert(kendo.format("The value that you entered is '{0}'", data));
            }, function () {
                kendo.alert("Cancel entering value.");
            })