Angular Kendo mobile 中的模态视图

Posted

技术标签:

【中文标题】Angular Kendo mobile 中的模态视图【英文标题】:Modal view in Angular Kendo mobile 【发布时间】:2016-08-10 05:43:31 【问题描述】:

我正在尝试使用 Angular Kendo 移动版。 我想构建一个模态视图,就像带有选项按钮的弹出窗口一样。

我看到 Kendo UI 提供的模态视图如下:

<div data-role="modalview" id="my-modal" style="width: 200px; height: 200px;">
  Hello!
</div>

但是,如果在移动设备上使用 angular Kendo 使用它呢? Angular Kendo 是否为移动设备提供了任何模态视图?

【问题讨论】:

【参考方案1】:

Kendo Mobile ModalView 完全符合您的要求。

<div id="modalview-photo" k-modal="false" kendo-mobile-modal-view="modal" use-native-scrolling="true" style="width: 99vw; height:99vh; background-color:white;">
     <kendo-mobile-header>
            <kendo-mobile-nav-bar>

            </kendo-mobile-nav-bar>
    </kendo-mobile-header>
    <div style="padding: 5px;">
        <label>title</label>
        <input id="photo-title" >
    </div>
</div>

这样打开:

$("#modalview-photo").data().kendoMobileModalView.open();

【讨论】:

感谢您提供详细信息,但我正在寻找 Kendo 移动解决方案。 data-role='modalview' 是 Kendo UI 组件,我正在寻找 Kendo 移动组件。当我在&lt;/kendo-mobile-view&gt; &lt;/kendo-mobile-view&gt; 中嵌入模态视图时,它不起作用。我需要一个使用kendo-mobile-modal-view的例子 编辑了我的答案,此代码来自我使用 kendo mobile 开展的项目 感谢更新。但是根据剑道,不建议也不推荐在移动设备上使用剑道窗口。我正在使用 Angular Kendo mobile 而不是 Kendo UI 构建项目。 kendo-window 是 Kendo UI 组件,所以我不能在我的移动应用程序中使用它。使用过“kendo-mobile-modal-view”。 也试试angular.element('#modalview-photo').data().kendoMobileModalView.open();打开,告诉我它是否有效 谢谢,它确实有效。但是它没有记录在任何地方如何找到它?在 Angular 中也是正确的做法吗?

以上是关于Angular Kendo mobile 中的模态视图的主要内容,如果未能解决你的问题,请参考以下文章

带有模态问题的Jquery Dialog中的Kendo Grid

Kendo UI Mobile 如何禁用 touchmove 绑定

Kendo-Angular:禁用剑道上传中的选择文件按钮

Kendo Mobile 的 Kendo AutoComplete?

如何根据 Kendo-Angular2-grid 中的数据自动调整网格列的大小?

Kendo Grid,如何更改 Angular 中的可分页文本(页数、项目数)?