时间戳

首页 > 解决方案 > AngularJS 拆分器示例

jquery - AngularJS 拆分器示例

问题描述

我对 AngularJS 真的很陌生。我正在尝试更改现有应用程序的布局。我想要实现的布局是这样的。

在此处输入图像描述

我找到了这个例子

来自在线研究的样本布局

摘自普鲁克

    <!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
    <script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
    <script src="app.js"></script>
    <script src="resizer.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <div id="topnav">Top navbar</div>
  
    <div id="sidebar">
        <h3>Side navbar</h3>
    </div>
  
    <div id="content">

        <div id="top-content">Top content <p>{{content}}</p></div>
  
        <div id="bottom-content">Bottom content</div>
  
        <div id="content-resizer" 
            resizer="horizontal" 
            resizer-height="6" 
            resizer-top="#top-content" 
            resizer-bottom="#bottom-content">
        </div>
  
    </div>
  
    <div id="sidebar-resizer" 
        resizer="vertical" 
        resizer-width="6" 
        resizer-left="#sidebar" 
        resizer-right="#content"
        resizer-max="400">
    </div>
    
  </body>

</html>

谁能帮我修改这个布局以匹配我的布局。

提前致谢。

标签： jqueryangularjsangular-ui-bootstrap

解决方案

推荐阅读