0

以下は、Angular SPA 内で NavBar/TabStrip および Mobile List View を使用しようとする例です。My List は、フォームの上部と下部に NavBar と TabStrip アンカーを配置する代わりに、ListView をスクロールできるようにする代わりに、常に必要なだけのスペースを占有します。ng-view を使用して NavBar/TabStrip アンカーを作成できませんか? これは、Angular と kendo.ui.core を使用するための一般的なルック アンド フィールのはずですが、例が見つかりません。以下のメインフォームと部分フォームコードがあります。

MAIN FORM
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="casenote_app"> 
<head>
<title></title>

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"/>
<!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->

<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

<link href="content/kendo/2014.2.716/kendo.bootstrap.mobile.min.css" rel="stylesheet" type="text/css"/>

<script src="scripts/jquery-1.9.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/kendo/2014.2.716/kendo.ui.core.min.js"></script>

<script src="scripts/kendo/2014.2.716/kendo.angular.min.js"></script>
<script src="scripts/angular-route.js"></script>

</head>

<body>


 <div kendo-layout data-id="viewbinding">

    <header data-role="header">
         <div kendo-mobile-nav-bar>
            <div kendo-mobile-view-title>NDB Casenotes</div>
            <button kendo-mobile-button data-align="left">Back</button>
        </div>

    </header>


     <div ng-view="" data-layout="viewbinding"></div>

    <div data-role="footer">

         <div kendo-mobile-tab-strip k-on-select="tabstripSelect(kendoEvent.item)">
            <a href="#/casenote" data-icon="">Casenote</a>
            <a href="#/participants" data-icon="">Participant</a>
            <a href="#/goalsobjectives" data-icon="">G/O</a>
            <a href="#/activities" data-icon="">Activities</a>
        </div>

    </div>

</div>

<script src="app/app.js"></script>
<script src="app/controllers/clientcontroller.js"></script>

<script src="app/services/clientfactory.js"></script>

</body>
</html>

PARTIAL FORM
<div class="container">


<div data-role="View"> 

<ul kendo-mobile-list-view  k-data-source="clients" k-template="clienttemplate" k-append-on-refresh="true" k-pull-to-refresh="true"></ul>


<script type="text/x-kendo-template" id="clientViewTemplate">
    <div>#= last_name # </div>
</script>

</div>
4

1 に答える 1

0

いくつかの検索の後、Kendo はそれ自身で、angular-kendo の使用法が必要としない書式設定のニーズの一部を処理しているようです。以下は、.css ファイルの必要性について説明した記事で、コードも含めました。ヘッダーを静的に保つには、.css ファイルの .header 部分が必要であり、コントロールのクラスを「header」に設定します。残りは、タブストリップを一番下に保つために利用されます。ブートストラップ .css ファイルで動作しますが、他のルック/フィールのいくつかではうまく動作しないようです。その部分の html とサイト参照も含めました。

http://developer.telerik.com/featured/announce-support-for-kendo-ui-mobile-with-angularjs/

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

body, html {
padding: 0px;
margin: 0px;
font-family: Tahoma, sans-serif;
}

.header {
 position: fixed;
 top: 0;
 height: 100px;
 width: 100%;
 z-index: 1030;
 }

.content {
padding-top: 50px;
height: 100%;
}

.footer
{
position: fixed;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
margin-bottom: 0;
}

.footer, .push 
{
height: 4em;

}


.wrapper 
{
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -4em;
}


    <div kendo-layout data-id="viewbinding">

    <header data-role="header" class="header">
         <div kendo-mobile-nav-bar>
            <div kendo-mobile-view-title>NDB Casenotes</div>
            <button kendo-mobile-button data-align="left">Back</button>
        </div>

    </header>



   <div class="wrapper">

      <div class="content" ng-view=""></div>

    <!--  </div> -->

    <div class="push"></div>
           </div>

    <div data-role="footer" class="footer">

         <div kendo-mobile-tab-strip k-on-select="tabstripSelect(kendoEvent.item)">

            <a href="#/casenote" data-icon="compose">Casenote</a>
            <a href="#/participants" data-icon="contacts">Participant</a>
            <a href="#/goalsobjectives" data-icon="organize">Goals/Objs</a>
            <a href="#/activities" data-icon="action">Activities</a>

        </div>

    </div>

 </div>
于 2014-08-18T13:30:41.983 に答える