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

尉迟宣
2023-12-01

首先带有个人主观色彩地说一句,”我不太喜欢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   Stringnull标题内容
contentStringnull

消息内容

传入的是HTMLElement类型

尺寸 
widthNumber'auto'

 设置消息内容宽度,可以带单位。一般不需要设置此,对话框框架会自己适应内容。

 可以是百分比

heightNumber'auto'

 设置消息内容高度,可以带单位。不建议设置此,而应该让内容自己撑开高度。

 可以是百分比

maxWidthNumber'auto'

 最大宽度

 内容为自适应的情况,可以设置最大的宽度,超出限定的宽度后,将出现滚动条

maxHeightNumber'auto'

 最大高度

 内容为自适应高度的情况,可以设置最大的高度,超出限定的高度后,将出现滚动条

 按钮   
 actions arry null

 自定义按钮

 配置参数成员:一个按钮是一个集合

 text —— 按钮名称

 action —— 按下动作按钮后调用的回调函数

 primary —— 指示操作按钮是否将被装饰为主按钮的布尔属性

 animation —— 用于更改默认动画

 按钮参数   
 text Stringnull 按钮名称
 action function  按下动作按钮后调用的回调函数
 primary  Booleanfalse 指示操作按钮是否将被装饰为主按钮的布尔属性
 animation  Booleanfalse

 用于更改默认动画,值false将会禁用小部件中的所有动画 animation: false

 animation:true 不是有效的配置。

 Objectnull

 animation: { close: false } 关闭对话框时使用的动画

 animation: { close: { effects: "fade:out" } } 用于关闭弹出窗口的效果

 animation: { close: { duration: 2000 } } 定义关闭动画持续时间

 animation: { open: { effects: "fade:in" } } 用于打开弹出窗口的效果

 animation: { open: { duration: 100 } } 定义打开动画持续时间

 显示 
 closeableBooleantrue

 是否可关闭。

 默认可关闭。设置为不可关闭后,弹窗右上角没有×

 visibleBooleantrue 指定对话框是否最初可见
 messagesObject - 定义对话框中显示的标签文本。主要用于本地化。
 messages.closeString “close”

 关闭按钮的title

 messages:{ close: "Close Me!" }

 messages.promptInputString "input"

 提示输入的标题

 messages:{ promptInput: "Input!" }

 modalBoolean true

 指定对话框是否应该在页面上显示模态叠加。

 设置为false,不叠加

高级事件 
initOpenFunction 

对话框打开之前触发

initOpen: function() { // open animation will start soon }

closeFucntion 

当对话框关闭时触发

close: function(e) { // close animation has finished playing }

hideFunction 

当对话框完成关闭动画时执触发

hide: function() { // close animation is about to finish }

openfunction 

对话框打开时触发

open: function() { // open animation will start soon }

showfunction 

当一个对话框完成其开场动画时触发

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.");
            })

 

 

转载于:https://www.cnblogs.com/lindaCai/p/8378558.html

 类似资料: