• 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

  • 相关阅读:
    模块化+定制化,PIX赋能多种行业实现低速无人车商业化
    支持Apollo、Autoware,PIX推出自动驾驶开发套件PIXKIT
    专为自动驾驶开发者打造的线控底盘——PIXLOOP
    甄别信息、病毒追踪、无人配送...这9个全球开源工具助力疫情抗击
    PIX无损线控改装——全系列车型及性能介绍
    PIX线控改装技术连载二 | 车辆组成模块之间的共同语言
    PIX入选Autodesk硅谷技术中心,以生成设计和金属增材制造落地L4自动驾驶通用底盘
    线控CRV,最高性价比的自动驾驶开发平台
    线控改装技术连载一之——线控开端和车辆组成
    CSS 创建
  • 原文地址:https://www.cnblogs.com/IKang8701348/p/6247368.html
Copyright © 2020-2023  润新知