angularUI之accordion的用法

这是官网上的一段代码：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head><meta charset="UTF-8"><title>accordion_demo</title><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript" src="js/angular-animate.min.js"></script><script type="text/javascript" src="js/ui-bootstrap-tpls-2.1.4.js"></script><link rel="stylesheet" type="text/css" href="css/bootstrap.css"><script type="text/javascript">var app = angular.module('app',['ui.bootstrap']);app.controller('MyCtrl', function($scope){$scope.oneAtTime = true;$scope.groups = [{title: 'Dynamic Group Header -1',content: 'Dynamic Group body -1'},{title: 'Dynamic Group Header -2',content: 'Dynamic Group Body -2'}];$scope.items = ['Item 1', 'Item2', 'Item3'];$scope.addItem = function(){var newItemNo = $scope.items.length + 1;$scope.items.push('Item '+ newItemNo);}$scope.status = {isCustomHeaderOpen: false,isFirstOpen: true,isFirstDisabled: false}})</script>
</head>
<body ng-controller="MyCtrl"><p><button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button><button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = !status.isFirstDisabled">Enable/Disable first panel</button></p><div uib-accordion close-others="oneAtTime"><div uib-accordion-group class="" heading="Static Header, initially expanded"is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">This content is straight in the template.</div><div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">{{group.content}}</div><div uib-accordion-group class="panel-default" heading="Dynamic Body Content"><p>The body of the uib-accordion group grows to fit the contents</p><button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button><div ng-repeat="item in items">{{item}}</div></div><div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">Hello</div><div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html"><uib-accordion-heading>Custom template with custom header template<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':status.isCustomHeaderOpen, 'glyphicon-chevron-right':!status.isCustomHeaderOpen}"></i></uib-accordion-heading>World</div><div uib-accordion-group class="panel-danger" heading="Delete account"><p>Please, to delete your account, click the button below</p><button class="btn btn-danger">Delete</button></div><div uib-accordion-group class="panel-default" is-open="status.open"><uib-accordion-heading>I can have markup, too!<i class="pull-right glyphicon" ng-class="{'glyphicon-cheron-down':status.open, 'glyphicon-chevron-right':!status.open}"></i></uib-accordion-heading>This is just some content to illustrate fancy headings.</div><div uib-accordion-group class="panel-default" heading="test for accordion"><pre>hei!hei!hei!hei!hei!hei!</pre></div></div><script type="text/ng-template" id="group-template.html"><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 uib-accordion-header 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></script>
</body>
</html>

主要的效果是显现一个类似面板的折叠，点击标题就会在下方展开内容。效果如图所示：

这个UI指令由两个指令构成：ui-accordion、ui-accordion-group。
需要注意的是ui-accordion-group必须包含在ui-accordion中，否则会报错。
ui-accordion中包含两个属性：
1、close-others表示的是在ui-accordion包含的ui-accordion-group在同一个时刻，只能有一个处于被展开的状态。也就是说，当你点开某一个ui-accordion-group的时候，其他的则会被关闭。
2、template-url
在ui-accordion-group中包含了四个属性：
1、heading:指定标题，也就是你点击的部分，当你点击后，下面的内容会被展开。
2、is-disabled：指定这个ui-accordion-group是否被禁用，也就是是否能被展开。
3、is-open: 这个ui-accordion-group的展开状态，通过这个属性可以设置它的打开和关闭。
4、template-url : 指定一个模板。

angularUI之accordion的用法相关推荐

jqueryui / accordion的用法记录
jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider. 参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其 ...
【连载】研究EasyUI系统— Accordion组件
Accordion组件是easyui框架中的布局组件之一,它提供了多个可展开/折叠的面板.Accordion经常用作页面的导航菜单.我们先通过制作一个导航菜单来认识一下Accordion. 图中左侧便 ...
jqueryui手风琴_jQueryUI手风琴插件
jqueryui手风琴 In this post, we will discuss about one of the interesting features that are very useful ...
ajaxToolKit中的折叠面板用法--Accordion
1)在web.config 的<controls>中增中<add namespace="AjaxControlToolkit" assembly="Aj ...
MVC4 jquery 样式主题用法(案例)
开发工具:VS2012 MVC版本:MVC4 MVC4已经自带了jquery,新建的项目,基本上什么都不用添加就可以运行,跑项目.(集成了那么多东西,jquery,modernizr,自带的默认权限, ...
jQuery easyUI布局（Layout）与手风琴（Accordion）
上期讲了easyUI最重要的组件:面板,这期讲讲布局和手风琴运用jQuery easyUI是需要引用文件的,详见上一期布局(layout) 效果图如下: 我们从上图可以看到,整个布局分为五个部分, ...
jQuery Accordion插件
<h1>jQuery UI Accordion 示例</h1> 本篇介绍 Accordion 组件(类似手风琴可以摺叠的 UI 组件). 基本 ...
html accordion折叠菜单动态,jQuery EasyUI 布局插件 – Accordion 折叠面板 | 菜鸟教程...
jQuery EasyUI 布局插件 - Accordion 折叠面板 jQuery EasyUI 插件通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板 ...
EasyUI Accordion折叠面板
EasyUI Accordion折叠面板 Accordion介绍效果图依赖于panel 用法刷新折叠面板(Accordion Panel)内容新添加面板获取指定的面板(panel)索引容器 ...
html easyui怎么实现折叠面板,Easyui Accordion 折叠面板_EasyUI 插件
通过 $.fn.accordion.defaults 重写默认的 defaults. 折叠面板(accordion)允许您提供多个面板(panel),同时显示一个或多个面板(panel).每个面板(p ...

angularUI之accordion的用法

angularUI之accordion的用法相关推荐

最新文章

热门文章