zoukankan      html  css  js  c++  java
  • AngularJS +HTML Demo

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     4     <meta name="MobileOptimized" content="240">
     5     <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0">
     6     <title>首页</title>
     7     <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
     8     <link href="css/common.css" rel="stylesheet" type="text/css">
     9     <link href="css/tbtouch.css" rel="stylesheet" type="text/css">
    10     <link href="css/css.css" rel="stylesheet" type="text/css">
    11 </head>
    12 <body>
    13     <div ng-app="myApp" ng-controller="formCtrl">
    14         <div class="xttblog">
    15             <div style="background:url('img/head.png'); 100%;height:32px;"></div>
    16             <ul class="topbox">
    17                 <li ng-repeat="x in names">
    18                     <a href="javascript:;" ng-click="save()">
    19                         <img src="img/top.png" class="img70" /><br />{{ x.name }}
    20                     </a>
    21                 </li>
    22             </ul>
    23         </div>
    24         <br />
    25         <ul>
    26             <li ng-repeat="x in items">
    27                 <div class="tit_tj">{{ x.name }}</div>
    28                 <ul class="tjlist">
    29                     <li ng-repeat="y in  x.item">
    30                         <a href="javascript:;" ng-click="save()">
    31                             <img class="img76" src="img/item.png" width="70" height="70"><strong>{{ y.name }}</strong><p>{{ y.details }}</p>
    32                             <div class="jiantou"></div>
    33                         </a>
    34                     </li>
    35                 </ul>
    36             </li>
    37         </ul>
    38         <div ng-app="myApp" class="hovertreebottom">
    39             <nav>
    40                 <div id="hovertreebottom_ul">
    41                     <ul class="box">
    42                         <li ng-repeat="x in items3">
    43                             <a href="javascript:;" ng-click="save()"><img src="img/btn.png" /><br /><span>{{ x.name }}</span></a>
    44                         </li>
    45                     </ul>
    46                 </div>
    47             </nav>
    48         </div>
    49     </div> 
    50 <script>
    51         var app = angular.module('myApp', []);
    52         app.controller('formCtrl', function ($scope) {
    53             $scope.names = [
    54                 { name: '业绩报表' },
    55                 { name: '账户报表' },
    56                 { name: '代理报表' }];
    57             $scope.items = [
    58                 {
    59                     name: '账户',
    60                     item: [
    61                         { name: '申请记录', details: '查询账户' },
    62                         { name: '出入金查询', details: '查询账户历史出入金' }
    63                     ]
    64                 },
    65                 {
    66                     name: '出入金',
    67                     item: [
    68                         { name: '申请记录', details: '查询账户出入金的处理结果' },
    69                         { name: '账户详情', details: '查询账户详细信息' }
    70                     ]
    71                 }
    72             ];
    73             $scope.items3 = [
    74                 { name: '销售' },
    75                 { name: '交易' },
    76                 { name: '人事' },
    77                 { name: '分析' },
    78                 { name: '' }];
    79             $scope.save = function () {
    80                 alert("温馨提示  尚无测试权限,等待开放");
    81             };
    82         });
    83     </script>
    84 </body>
    85 </html> 
    86  
    87  
    88   
    View Code

    Demo下载 密码:87zl

  • 相关阅读:
    windows 的文件夹映射实现
    项目管理工具
    SSM(Spring+SpringMVC+MyBatis)高并发优化思路
    高性能高可用高并发技术架构的一些理解
    你懂什么是分布式系统吗?Redis分布式锁都不会?
    使用批处理文件(*.bat)同时打多个cmd窗口
    mysql删除重复数据只保留一条
    native2ascii命令
    利用编辑距离(Edit Distance)计算两个字符串的相似度
    eclipse如何正确部署tomcat7
  • 原文地址:https://www.cnblogs.com/IKang8701348/p/6247368.html
Copyright © 2011-2022 走看看