Question

以下是尝试在Angular SPA中使用NavBar / TabStrip和Mobile List View的示例。我的列表总是占用所需的空间，而不是在窗体的顶部和底部使用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>

Answer 1

经过一些搜索后，Kendo就会自己处理一些角色剑道使用不需要的格式化需求。下面是一篇讨论.css文件需求的文章，我也包含了这些代码。要使标头保持静态，需要.css文件的.header部分，并将控件的类设置为＆＃34; header＆＃34;。其余部分用于将标签保持在底部。它适用于bootstrap .css文件，但似乎并没有像其他一些外观/感觉一样工作。我已经包含了该部分的html以及网站参考。

http://developer.telerik.com/featured/announcing-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>

Kendo NavBar / TabStrip SPA设置

1 个答案: