Question

这是我的KendoUI Mobile应用程序的骨架：

<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配置，则通过滑动在所有视图中显示抽屉。

Answer 1

WRT数据滑动问题 - 在剑道中存在一个已知问题，它在Android上无效（您仍然可以滑动以打开菜单 - 在iOS上运行正常）。

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

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

1 个答案: