AngularJs的UI组件ui-Bootstrap分享（三）—

Accordion手风琴控件使用uib-accordion和uib-accordion-group指令。

<script>

        angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {

            $scope.oneAtATime = true;

            $scope.status = {

                isFirstOpen: true,

                isFirstDisabled: false

            };

        });

</script>

<uib-accordion close-others="oneAtATime">

            <uib-accordion-group heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">

                内容...

            </uib-accordion-group>

</uib-accordion>

效果为：

uib-accordion的属性:

属性名称	默认值	说明
close-others	true	展开一个面板时是否关闭其他面板
template-url	template/accordion/accordion.html	在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

uib-accordion-group的属性:

属性名称	默认值	说明
heading	none	面板头部的标题
is-disabled	false	面板是否禁用
is-open	false	面板是否展开
panel-class	panel-default	可以使用Bootstrap的样式,如panel-primary, panel-success, panel-info,panel-warning,panel-danger等。必须为字符串。
template-url	uib/template/accordion/accordion-group.html	在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称

上例中的uib-accordion-group标题和内容都是直接写在视图中的，除此之外，uib-accordion-group还有其他几种使用方式：

1. 配合ng-repeat生成面板

$scope.groups = [

              {

                  title: '第一个面板',

                  content: '第一个面板的内容'

              },

              {

                  title: '第二个面板',

                  content: '第二个面板的内容'

              }

            ];

<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">

                {{group.content}}

</uib-accordion-group>

效果为：

2. 面板中可以包含动态生成的内容

$scope.items = ['Item 1', 'Item 2', 'Item 3'];

$scope.addItem = function () {

      var newItemNo = $scope.items.length + 1;

      $scope.items.push('Item ' + newItemNo);

 };

<uib-accordion-group heading="动态内容">

                <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>

                <div ng-repeat="item in items">{{item}}</div>

</uib-accordion-group>

效果为：

点击Add Item按钮后，面板的内容增加了，面板的大小也会变化，适应新的内容。

3. 使用自定义模板

uib-accordion-group默认的模板是uib/template/accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参考原生的模板内容写一个自定义模板，然后用template-url来引用。

例：

 <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-group heading="Custom template" template-url="group-template.html">

 Hello

 </uib-accordion-group>

4. 使用自定义的面板标题

如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-accordion-heading

<uib-accordion-group 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>

     内容...

</uib-accordion-group>

效果为：

在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：

.accordion-toggle { display: block; }

如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：

ng-click="$event.stopPropagation()"

最后，贴上完整的代码：

 <!DOCTYPE html>

 <html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {

             $scope.oneAtATime = true;

             $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.status = {

                 isFirstOpen: true,

                 isFirstDisabled: false

             };

         });

     </script>

 </head>

 <body style="padding:10px;">

     <div ng-controller="AccordionDemoCtrl">

         <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>

         <div class="checkbox">

             <label>

                 <input type="checkbox" ng-model="oneAtATime">

                 同一时间只展开一个面板

             </label>

         </div>

         <uib-accordion close-others="oneAtATime">

             <uib-accordion-group  heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">

                 内容...

             </uib-accordion-group>

             <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">

                 {{group.content}}

             </uib-accordion-group>

             <uib-accordion-group heading="动态内容">

                 <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>

                 <div ng-repeat="item in items">{{item}}</div>

             </uib-accordion-group>

             <uib-accordion-group heading="Custom template" template-url="group-template.html">

                 Hello

             </uib-accordion-group>

             <uib-accordion-group heading="提示面板" panel-class="panel-info">

                 注意面板的颜色

             </uib-accordion-group>

             <uib-accordion-group 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>

                 内容...

             </uib-accordion-group>

         </uib-accordion>

     </div>

 </body>

 </html>

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion的更多相关文章

Android用户界面 UI组件--TextView及其子类(三) EditView以及各种Span文字样式讲解
EditView和TextView的用法差不多,只是文字可编辑小技巧: 设置EditText隐藏键盘 setInputType(0); 设置EditText不被输入法遮盖 getWindow() ...
Android用户界面UI组件--AdapterView及其子类(三) ExpandableListView
ExpandableListView: List中的每一项可以展开收缩. 一种伸缩式的ListView. android:cacheColorHint="#00000000" 这个 ...
Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合侧边栏 ion-menu
1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目属性作用可选值 side 配置侧边栏的位置 start end me ...
Ionic4.x 中的 UI 组件(UI Components) 日期组件
1.日期组件的基本使用官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...
Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件
Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中找 Swiper Api:http://ida ...
Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
挂号平台首页开发（UI组件部分）
JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...
AngularJs的UI组件ui-Bootstrap分享（一）
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel
Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

随机推荐

JavaScript原型理解
这东西我还不是很理解,但是把自己实践的过程记录下来,希望积累到一定程度,能自然而而然的理解了.很多东西我是这样慢慢理解的,明白为啥是那样子,真的很神奇哦.少说废话,开始吧. 可以先阅读这篇文章 fun ...
printk函数日志级别的设置【转】
本文转载自: 下面执行cat /proc/sys/kernel/printk 打印出的四个数字分别代表: 控制台日志级别.默认的消息日志级别.最低的控制台日志级别和默认的控制台日志级别只有当prin ...
win7 64 旗舰版虚拟GPU-VMware下+vs2013安装caffe+matlab+python
转发请说明来处 Win7配置caffe(无GPU) 配置环境: 必须:win7 64 + vs2013 Win7 64位旗舰版要升级到service spack(因为是在vs2013下,想安装vs20 ...
Java虚拟机学习（1）：体系结构内存模型
一:Java技术体系模块图 Java技术体系模块图二:JVM内存区域模型 1.方法区也称"永久代" ."非堆", 它用于存储虚拟机加载的类信息.常量.静态 ...
size_t总结
1.sizeof返回的必定是无符号整形,在标准c中通过 typedef 将返回值类型定义为size_t. 若用printf输出size_t类型时,C99中定义格式符%zd;若编译器不支持可以尝试%u或 ...
关于Unity四元数相乘先后顺序的问题
在unity中四元数和向量相乘在unity中可以变换旋转.四元数和四元数相乘类似矩阵与矩阵相乘的效果. 矩阵相乘的顺序不可互换,只有特殊条件矩阵才可互换.四元数相乘类似,今天就因为这个问题掉进坑里了, ...
tar等
tar格式,会打包成一个文件,可以对多个目录,或者多个文件进行打包tar命令只是打包,不会压缩,打包前后大小是一样的 tar命令 -c //打包-x //解压-f //指定文件-t //查看 tar ...
How To Use DBLink In Oracle Forms 6i
You want to connect multiple databases in oracle forms to perform certain tasks, for example you nee ...
centos7上consul的集群安装
centos7上consul的安装 ###一下载下载文件 wget https://releases.hashicorp.com/consul/0.6.4/consul_0.6.4_linux_a ...
类似\u4e0b\u6ce8\u903e\u65f6解码
HttpUtility.UrlDecode("\u4e0b\u6ce8\u903e\u65f6"); HttpUtility.UrlDecode("\\u5c1a\\u6 ...

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion的更多相关文章

随机推荐

热门专题