angular三种tab选项卡的实现

最新推荐文章于 2023-07-01 14:16:29 发布

海角一号

最新推荐文章于 2023-07-01 14:16:29 发布

阅读量1.4w

点赞数

分类专栏：网页技术文章标签： angularjs

网页技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
</head>

<body ng-app="myApp" style="background:#4A4A4A; overflow:hidden;" class="row" >
<div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;">FE-演示平台</div>
<section class="row">
    <section class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;" ng-controller="tabDemo">
        <p>通过设置改变开关：</p>
        <p>
            <button class="btn btn-sm btn-danger"  ng-click="tabs[0].active = true">选中第2个</button>
            <button class="btn btn-sm btn-default" ng-click="tabs[1].active = true">选中第3个</button>
            <button class="btn btn-sm btn-default" ng-click="tabs[1].disabled = !tabs[1].disabled">开启/禁用第3个</button>
        </p>
        <hr>
        <tabset>
            <tab heading="html5">html5内容</tab>
            <tab heading="{{tab.title}}" ng-repeat="tab in tabs" active="tab.active" disabled="tab.disabled">{{tab.content}}</tab>
            <tab select="alertMe()">
                <tab-heading>
               <!-- //heading。 标题文本或者html内容-->
                    <i class="glyphicon glyphicon-bell">弹出!</i>
                </tab-heading>
                欢迎您！
            </tab>
        </tabset>
        <hr>
        <!--// vertical 方式 默认为false为水平方向 反之。。。-->
        <tabset vertical="false" type="pills">
            <tab heading="第一列">第一列内容</tab>
            <tab heading="第二列">第二列内容</tab>
        </tabset>
    </section>
</section>
</body>

下面是对应的js代码：

<script>
    angular.module('myApp',['ui.bootstrap']).controller('tabDemo',function($scope,$window){  
        $scope.tabs = [
            {title : 'jquery' ,content : '我是jquery内容'},
            {title : 'angular' ,content : '我是angular内容'}
        ];
        $scope.alertMe = function(){
            $window.alert('欢迎您!')
        }
    })
</script>