kendo ui Mobile 抽屉的配置不起作用答案

【问题标题】：configurations of the drawer of kendo ui Mobile do not workkendo ui Mobile 抽屉的配置不起作用
【发布时间】：2013-11-27 11:48:12
【问题描述】：

这是我的 KendoUI 移动应用程序的框架：

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
        <!-- Kendo UI Mobile CSS -->
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <!-- jQuery JavaScript -->
        <script src="js/jquery.min.js"></script>
        <!-- Kendo UI Mobile combined JavaScript -->
        <script src="js/kendo.mobile.min.js"></script>
        <title>Degrado Ambientale</title>
    </head>
    <body>

        <!-- View Map -->
        <div data-role="view"  data-title="Degrado Ambientale" id="map-view" data-layout="default" data-stretch="true">
            ...
        </div>

        <!-- View List -->
        <div data-role="view" data-title="Degrado Ambientale" id="list-view" data-layout="default" data-show="app.getDataFromServer" >
            ...
        </div>

        <!-- View New -->
        <div data-role="view" data-title="Degrado Ambientale" id="new-view" data-layout="default" data-show="app.clearRepo">
            ...
        </div>

        <!-- View User -->
        <div data-role="view" data-title="Degrado Ambientale" id="user-view" data-use-native-scrolling="true" class="newformstyle" data-show="app.showOptionView" data-init="app.initOptionView">
            ...
        </div>

        <!--  View Dettagli Segnalazione -->
        <div data-role="view" id="view-repoDetail" style="width: 100%; height: 100%" data-show="app.loadRepo">
            ...
        </div>

        <!-- Default Layout -->
        <div data-role="layout" data-id="default">
            <div data-role="header">
                <div data-role="navbar">
                    <a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-icon" data-align="left"></a>
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>

        <!-- Drawer -->
        <div data-role="drawer" data-views='["map-view", "list-view", "new-view"]' data-swipe-to-open="false" id="drawer">
            <ul data-role="listview" data-type="group">
                <li>Men&ugrave
                    <ul>
                        <li data-icon="globe"><a href="#map-view" data-transition="none">Mappa</a></li>
                        <li data-icon="list-icon"><a href="#list-view" data-transition="none">Segnalazioni</a></li>
                        <li data-icon="compose"><a href="#new-view" data-transition="none">Segnala</a></li>
                    </ul>
                </li>
                <li>Opzioni
                    <ul>
                        <li data-icon="contacts"><a href="#user-view" data-transition="none">Utente</a></li>
                    </ul>
                </li>
            </ul>
        </div>

        <script type="text/javascript" src="phonegap.js"></script>
        <script type="text/javascript" src="javascript/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>
</html>

而javascript/index.js 是：

var app = new kendo.mobile.Application($(document).body,{
    init: function(){
        app.navigate('#user-view');
    }
});

    ....

app.initialize = function() {
    this.bindEvents();
};
app.bindEvents = function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
};
app.onDeviceReady = function() {
    ....
};

我想禁用通过滑动打开抽屉，并且抽屉必须仅显示在具有 ID 的视图上：map-view、list-view 和 new-view。

为此，我设置了抽屉配置属性：

data-swipe-to-open 到 "false";
data-views 到 '["map-view", "list-view", "new-view"]'

但抽屉不会出现在任何视图中。如果我删除 data-views 配置，则抽屉会通过滑动显示在所有视图中。

【问题讨论】：

标签： kendo-mobile

【解决方案1】：

WRT 数据滑动问题 - 在 Kendo 中存在一个已知问题，它在 Android 上不起作用（您仍然可以滑动打开菜单 - 在 iOS 上可以正常工作）。

我下载了 kendoui.complete.2013.3.1324.trial 并提取了 kendo.mobile.min.js 和 css 文件，它解决了这个问题。

【讨论】：