0

下面是一个尝试在 Angular SPA 中使用 NavBar/TabStrip 和移动列表视图的示例。我的列表总是根据需要占用尽可能多的空间，而不是在表单的顶部和底部放置 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”。其余部分用于将标签条保持在底部。它适用于 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>
于 2014-08-18T13:30:41.983 回答