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

随机推荐

oracle表的操作简述
单表的操作!(代码完全可以用手工代替,写下来为了记忆)1.建立表create table HKB_TABLE_MODIFY( NAME VARCHAR2(6), AGE VARCHAR2(3), ...
Dynamics AX 2012 R3 Demo 安装与配置 - 导入测试数据 (Step 4)
在前面三节中,Reinhard分别讲解了如何配置安装环境,安装数据库服务器,AOS和客户端,安装后的编译和配置.如果一直跟随Reinhard的脚步,到这里,已经拥有一个没有数据的系统. ...
PHP中怎样创建一个空对象?
如果没有声明一个对象然后就对其属性赋值会出现警告.那么我们给它创建一个空对象然后赋值就好了.PHP中创建一个空对象代码如下: 第一种方式: $empty_object = new stdClass() ...
Cookie与Session的区别
cookie机制 Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器.IETF RFC 2965 HTTP State Management Mechanism 是通用c ...
关于一个新的DOM选择器querySelector
在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...
hadoop2.0初识1.2
1 hadoop启动方式(三种) 1.1 各个服务组件逐一启动 *dfs hadoop-daemon.sh start|stop namenode|datanode|secondarynamenode ...
如何很好的使用Linq的Distinct方法
Person1: Id=1, Name="Test1" Person2: Id=1, Name="Test1" Person3: Id=2, Name=&quo ...
遍历List中的object对象
我的解决方法是 List<Object[]> list = queryTrans; for (Object[] o : list) { for (int q = 0; q < o.l ...
Shell脚本查看apk签名信息
用shell写了一个查看apk签名的脚本.代码很少也很简单支持递归目录查询 #!/bin/bash #使用方法 ./getcertificate.sh xx.apk get_signature() ...
Delphi 使用之dll文件生成与调用
DLL是Dynamic-Link Libraries(动态链接库)的缩写,库里面是一些可执行的模块以及资源(如位图.图标等).可以认为DLL和EXE基本上是一回事,只是DLL不能直接执行,而必须由应用 ...

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

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

随机推荐

热门专题