三、手风琴Accordion

作者: 幸福幸福幸福 | 来源:发表于2017-03-31 10:59 被阅读492次

一个最简单的例子：

<html>
<head>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">
    <!-- 注意这里要用attr形式的，element形式不行 -->
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen"
         is-disabled="status.isFirstDisabled">
        This content is straight in the template.
    </div>
</uib-accordion>

<script>
    angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
    {
        $scope.oneAtATime = true;
        $scope.status = {
            isFirstOpen: true,
            isFirstDisabled: false
        };
    });
</script>
</body>
</html>

效果如下：

先介绍一下标签中各属性的作用(有的在上面这个例子中还没有出现)

uib-accordion的属性：
close-others:默认true，是否同时只能打开一个
template-url:字符串(eg:head.html)，在ui-bootstrap-tpls.js文件中使用的模板名称
uib-accodrion-group的属性
heading:string(默认none)，面板标题
template-url:内容模板指向，可以指向当前文件内script标签的id，也可以指向一个新的文件，一般用内部script标签的形式，下面会有例子（重要）
is-disabled:默认false，面板是否禁用
is-open：默认false，面板初始状态（打开or关闭）
panel-class：面板样式（这个是class属性的值，不是属性名），默认panel-default.可用值：panel-primary, panel-success， panel-info,panel-warning,panel-danger

下面写几种常用写法。

配合ng-repeat生成面板
<html>
<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">

<div uib-accordion-group class="panel-default" heading="{{ group.title }}"
is-disabled="status.isFirstDisabled" ng-repeat="group in groups">
{{ group.content }}
</div>
</uib-accordion>
```
 <script>
     angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
     {
         $scope.groups = [
             {title:'第一个面板',content:'第一个面板的内容'},
             {title:'第二个面板',content:'第二个面板的内容'}
         ];
         $scope.status = {
             isFirstOpen: true,
             isFirstDisabled: false
         };
         $scope.oneAtATime = true;
     });
 </script>
 </body>
 </html>
```

效果如图：

面板中包含动态生成的内容
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">

<div uib-accordion-group class="panel-default" heading="点击按钮动态添加item"
is-disabled="status.isFirstDisabled">
<div ng-repeat="item in items">{{ item }}</div>
<button class="btn btn-success" ng-click="addItem()">点击添加item</button>
<button class="btn btn-success" ng-click="reduceItem()">点击删除item</button>
</div>
</uib-accordion>
```
 <script>
     angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
     {
         $scope.groups = [
             {title:'第一个面板',content:'第一个面板的内容'},
             {title:'第二个面板',content:'第二个面板的内容'}
         ];
         $scope.items = ["item 1","item 2","item 3"];
         $scope.addItem = function(){
             var newItemNo = $scope.items.length+1;
             $scope.items.push("item "+newItemNo);
         };
         $scope.reduceItem = function(){
             $scope.items.splice(-1,1);
         }
         $scope.status = {
             isFirstOpen: true,
             isFirstDisabled: false
         };
         $scope.oneAtATime = true;
     });
 </script>
 </body>
 </html>
```

效果如图：

点击按钮之后，面板内容增删，面板大小自适应。

使用自定义模板
uib-accordion-group默认的模板是uib/template/accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参考原生的模板内容写一个自定义模板，然后用template-url来引用。
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">

<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>

 <uib-accordion close-others="oneAtATime">
     <div uib-accordion-group class="panel-default" heading="点击按钮动态添加item"
          is-disabled="status.isFirstDisabled" template-url="group-template.html">   <!-- heading与模板内的{{ heading绑定 }}-->
         <div ng-repeat="item in items">{{ item }}</div>
         <button class="btn btn-success" ng-click="addItem()">点击添加item</button>
         <button class="btn btn-success" ng-click="reduceItem()">点击删除item</button>
     </div>
 </uib-accordion>
 
 <script>
     angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
     {
         $scope.groups = [
             {title:'第一个面板',content:'第一个面板的内容'},
             {title:'第二个面板',content:'第二个面板的内容'}
         ];
         $scope.items = ["item 1","item 2","item 3"];
         $scope.addItem = function(){
             var newItemNo = $scope.items.length+1;
             $scope.items.push("item "+newItemNo);
         };
         $scope.reduceItem = function(){
             $scope.items.splice(-1,1);
         }
         $scope.status = {
             isFirstOpen: true,
             isFirstDisabled: false
         };
         $scope.oneAtATime = true;
     });
 </script>
 </body>
 </html>

效果图：

可以看到样式已经改变为新定义的模板样式

使用自定义的面板标题
如果面板的标题是简单的字符串文本，使用heading属性就足够了，但是如果内容较为复杂，比如有图标，那么可以使用uib-accordion-heading来自定义标题。
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<style>
.accordion-toggle { display: block; }
</style>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">

 <uib-accordion close-others="oneAtATime" is-open="status.open">
     <div uib-accordion-group class="panel-default" ng-click="$event.stopPropagation()"
          is-disabled="status.isFirstDisabled" is-open="status.open">
         <!--自定义面板标题，注意在uib-accordion里定义了is-open=status.open，然后可以通过开关状态来改变字体图标-->
         <uib-accordion-heading>
             自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
         </uib-accordion-heading>
         <!-- 面板内容部分 -->
         <div ng-repeat="item in items">{{ item }}</div>
         <button class="btn btn-success" ng-click="addItem()">点击添加item</button>
         <button class="btn btn-success" ng-click="reduceItem()">点击删除item</button>
     </div>   
 </uib-accordion>
 
 <script>
     angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
     {
         $scope.groups = [
             {title:'第一个面板',content:'第一个面板的内容'},
             {title:'第二个面板',content:'第二个面板的内容'}
         ];
         $scope.items = ["item 1","item 2","item 3"];
         $scope.addItem = function(){
             var newItemNo = $scope.items.length+1;
             $scope.items.push("item "+newItemNo);
         };
         $scope.reduceItem = function(){
             $scope.items.splice(-1,1);
         }
         $scope.status = {
             isFirstOpen: true,
             isFirstDisabled: false
         };
         $scope.oneAtATime = true;
     });
 </script>
 </body>
 </html>

在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：
.accordion-toggle { display: block; }
如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：
ng-click="$event.stopPropagation()"

三、手风琴Accordion

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读