AngularJS+頁面切換+側滑
阿新 • • 發佈：2019-02-18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0 auto; } body{ position: relative; } .ul1{ width: 320px; height: 70px; border: solid 1px #000; margin-bottom: 20px; } p{ display: inline-block; line-height: 40px; float: left; padding: 20px; } .cont{ width: 800px; height: 200px; border: solid 1px #000; } li{ list-style: none; line-height: 40px; } </style> <script src="angular-1.5.5/angular.min.js"></script> <script src="angular-1.5.5/angular-route.min.js"></script> <script> var app= angular.module("myapp",[]); app.controller("mycont",function ($scope) { $scope.goods = function () { $scope.show1 = true; $scope.show2 = false; $scope.show3 = false; } $scope.user = function () { $scope.show2 = true; $scope.show1 = false; $scope.show3 = false; } $scope.address = function () { $scope.show3 = true; $scope.show1 = false; $scope.show2 = false; } }) </script> </head> <body ng-app="myapp" ng-controller="mycont"> <div class="ul1"> <p ng-click="goods()">商品列表</p> <p ng-click="user()">使用者資訊</p> <p ng-click="address()">地址資訊</p> </div> <div class="cont" ng-show="show1"> <ul> <li>外星人電腦</li> <li>聯想電腦</li> <li>華碩電腦</li> <li>神州筆記本</li> </ul> </div> <div class="cont" ng-show="show2"> <ul> <li>張三</li> <li>李四</li> <li>王五</li> <li>趙六</li> </ul> </div> <div class="cont" ng-show="show3"> <ul> <li>上地一街</li> <li>上地二街</li> <li>上地三街</li> <li>上地四街</li> </ul> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ionic</title> <style> .bar-positive{ float: left; } img{ float: right; } </style> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" /> <script src="angular-1.5.5/angular.min.js"></script> <link rel="stylesheet" href="lib/css/ionic.min.css"> <script src="lib/js/ionic.bundle.min.js"></script> <script> var app = angular.module('myapp', ['ionic']); app.controller("mycont",function ($scope) { }) </script> </head> <body ng-app="myapp" ng-controller="mycont"> <ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="doSomething()"><</button> </div> <h1 class="title">倒油雲筆記</h1> <div class="buttons"> <button class="button">。</button> </div> </ion-header-bar> <ion-content> <ion-list> <ion-item>資料夾一<img src="a.png"></ion-item> <ion-item>資料夾二<img src="b.png"></ion-item> <ion-item>資料夾三<img src="a.png"></ion-item> <ion-item>資料夾四<img src="b.png"></ion-item> <ion-item>資料夾五<img src="a.png"></ion-item> <ion-item>資料夾六<img src="b.png"></ion-item> <ion-item>資料夾七<img src="a.png"></ion-item> <ion-item>資料夾八<img src="b.png"></ion-item> </ion-list> </ion-content> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>APP-側滑</title> <script src="angular-1.5.5/angular.min.js"></script> <link rel="stylesheet" href="lib/css/ionic.min.css"> <style> i{ float: right; } .item{ height: 65px; font-size: 20px; } </style> <script src="lib/js/ionic.bundle.min.js"></script> <script> var app = angular.module("myapp",["ionic"]); app.controller("mycont",function ($scope,$ionicSideMenuDelegate) { $scope.toggleLeft = function() { $ionicSideMenuDelegate.toggleLeft(); }; }) </script> </head> <body ng-app="myapp"> <ion-side-menus> <!-- 中間內容 --> <ion-side-menu-content ng-controller="mycont"> <ion-header-bar align-title="center" class="bar-positive"> <div class="buttons"> <button class="button" ng-click="toggleLeft()">三</button> </div> <h1 class="title">Silde me!</h1> </ion-header-bar> <ion-content> <h1>Content</h1> </ion-content> </ion-side-menu-content> <!-- 左側選單 --> <ion-side-menu side="left"> <p style="text-align: center; height: 40px; line-height: 40px; font-size: 25px">left</p> <ion-list> <ion-item>item 0<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 1<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 2<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 3<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 4<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 5<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 6<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 7<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 8<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 9<i class="icon ion-chevron-right"></i></ion-item> <ion-item>item 10<i class="icon ion-chevron-right"></i></ion-item> </ion-list> </ion-side-menu> </ion-side-menus> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Title</title> <script src="angular-1.5.5/angular.min.js"></script> <script src="angular-1.5.5/angular-route.min.js"></script> <link rel="stylesheet" href="lib/css/ionic.min.css"> <style> .bar .title{ display: block; font-size: 20px<