html5_ionic 탭 작업

9672 단어
/span>html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <link href="ionic/css/ionic.css" rel="stylesheet">
    <script src="ionic/js/ionic.bundle.min.js">script>
    <script>
        var app = angular.module("myapp",["ionic"]);
        app.config(function($stateProvider, $urlRouterProvider){
            $stateProvider.state("a", {
                // url, url 
                url: "/z",
                // 
                templateUrl: "pages/home.html"
            }).state("b", {
                url: "/x",
                templateUrl: "pages/favorites.html"
            }).state("c", {
                url: "/c",
                templateUrl: "pages/setting.html"
            });
            // url z 
            $urlRouterProvider.otherwise("z");
        });
    script>
head>
<body ng-app="myapp">

<ion-nav-view>ion-nav-view>

<div class="tabs tabs-icon-top">
    
    <a class="tab-item" ui-sref="a">
        <i class="icon ion-home">i>
         
    a>
    <a class="tab-item" ui-sref="b">
        <i class="icon ion-star">i>
         
    a>
    <a class="tab-item" ui-sref="c">
        <i class="icon ion-gear-a">i>
         
    a>
div>

body>
html>

// , 
<ion-view>
    <ion-content>
         
    ion-content>
ion-view>

좋은 웹페이지 즐겨찾기