javascript - 剣道 UI でタイトルとビューが表示されない

Question

私は最近アプリケーションの開発を開始し、KendoUI と phonegap がプロジェクトの最適なソリューションになると判断しましたが、KendoUI を正しく表示できません。

私は Mac を使用してアプリケーションを開発していますが、アプリを実行するとコードが完全に表示されます。これが iOS デバイスとしてレンダリングされているためかどうかはわかりませんが、それが正しく表示されている理由ですが、そうではありません。ここでわかるように、Android デバイスで動作します: これはタブレットだけのものではないことに注意してください。Galaxy SII、HTC EVO 4G、Nexus 10 で試しました。これらはすべて、以下に表示されている同じ結果を生成します。

問題は、アプリケーションがビューを無視し、タイトルを間違った場所に配置しているように見えることです。

これ以上の情報が必要な場合は、お気軽にお問い合わせください。他に何をリストすればよいかわかりません。

このアプリケーションのファイル構造は次のとおりです。

/ <--- project root
 /assets/
  /www/
   /css/
    /kendo.mobile.all.min.css
   /js/
    /jquery.min.js
    /kendo.all.min.js
    /kendo.mobile.min.js
   cordova-2.4.0.js
   index.html

ここに画像の説明を入力

チュートリアル: http ://docs.kendoui.com/getting-started/introduction 私がフォローしているチュートリアルのソースコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="cordova-2.4.0.js"></script>
    <link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/kendo.mobile.min.js" type="text/javascript"></script>
    <script>    
    </script>
</head>
<body>
<div id="home" data-role="view" data-layout="default">
    Hello Mobile World!
</div>

<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">My App</div>
    </header>
    <!--View content will render here-->
    <footer data-role="footer">
        <div data-role="tabstrip">
            <a href="#home">Home</a>        
        </div> 
    </footer>
</section>
<script>var app = new kendo.mobile.Application();</script>
</body>
</html>

私もこのチュートリアルを使用しましたが、投稿された構成ファイルが私のものであることを理解していません: http://www.adobe.com/devnet/phonegap/articles/getting-started-kendo-ui-mobile-phonegap-build .html

    <?xml version="1.0" encoding="utf-8"?>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<cordova>
    <!--
    access elements control the Android whitelist.
    Domains are assumed blocked unless set otherwise
     -->

    <access origin="http://127.0.0.1*"/> <!-- allow local pages -->

    <!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
    <!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
    <access origin=".*"/>

    <!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
    <content src="index.html" />

    <log level="DEBUG"/>
    <preference name="useBrowserHistory" value="true" />
    <preference name="exit-on-suspend" value="false" />
<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    <plugin name="Echo" value="org.apache.cordova.Echo" />
    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
    <plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>

最後に私の MainActivity:

package com.example.project;

import android.os.Bundle;
import org.apache.cordova.DroidGap;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
}

編集：私はちょうどこの解決策を試しました.. http://docs.kendoui.com /getting-started/mobile/navbar#showing-hidden-view-titleしかし、ビューを表示することに失敗しました. これは別の質問から得たものです: Kendo UI Mobile PhoneGap Application For Android にヘッダーとフッターが表示されない新しい結果は次のとおりです:

ここに画像の説明を入力

score 4 · Accepted Answer

デフォルトでは、Kendo UI Mobile は、View の上に TabStrip を取得するために、Android の View レイアウトを逆にします。さらに、ビューのタイトルは非表示になっています (下部では意味がないため)。これは、CSS のみで簡単に回避できます。

.km-root .km-android .km-view {
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
}

.km-android .km-view-title
{
    visibility: visible;
}

javascript - 剣道 UI でタイトルとビューが表示されない

1 に答える 1

Related

Reference