Angular ui.bootstrap.tabs

发布时间：2020-12-17 09:39:59 所属栏目：安全来源：网络整理

导读：!DOCTYPE htmlhtmlhead meta name="viewport" content="width=device-width" / titleTabsIndex/title link href="~/Content/bootstrap.css" rel="stylesheet" / script src="~/Scripts/angular.js"/script script src="~/Scripts/ui-bootstrap-tpls.js"/scri

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TabsIndex</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls.js"></script>
    <script>
        angular.module('ui.bootstrap.demo',['ui.bootstrap'])
            .controller('TabsDemoCtrl',function ($scope,$window) {
                $scope.tabs = [
                  { title: '标签页a',content: '标签页a的内容' },{ title: '标签页b',content: '标签页b的内容',disabled: true }
                ];

                $scope.alertMe = function () {
                    setTimeout(function () {
                        $window.alert('clicked!');
                    });
                };
            });
    </script>
</head>
<body ng-app="ui.bootstrap.demo">
    <div ng-controller="TabsDemoCtrl">
        <uib-tabset active="active" type="tabs">
            <uib-tab index="0" heading="标签页1">内容1</uib-tab>
            <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                {{tab.content}}
            </uib-tab>
            <uib-tab index="3" select="alertMe()">
                <uib-tab-heading>
                    <i class="glyphicon glyphicon-bell"></i> Alert!
                </uib-tab-heading>
                内容部分
            </uib-tab>
        </uib-tabset>
    </div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!