AngularJS / ui-bootstrap accordion -点击时滚动到活动(打开)手风琴的顶部
AngularJS / ui-bootstrap accordion - scroll to top of active (open) accordion on click
当面板打开时,我需要将其滚动回"。刚刚点击的面板标题。我知道我可以创建一个指令来做到这一点,比如(从这个网站得到的):
.directive( 'scrollTop', scrollTop );
function scrollTop() {
return {
restrict: 'A',
link: link
};
}
function link( $scope, element ) {
$scope.collapsing = false;
$scope.$watch( function() {
return $(element).find( '.panel-collapse' ).hasClass( 'collapsing' );
}, function( status ) {
if ( $scope.collapsing && !status ) {
if ( $(element).hasClass( 'panel-open' ) ) {
$( 'html,body' ).animate({
scrollTop: $(element).offset().top - 20
}, 500 );
}
}
$scope.collapsing = status;
} );
}
在HTML中我应该使用:
<div uib-accordion-group is-open="status.openPanel" scroll-top></div>
但这似乎不起作用。当你点击第二个面板时,它会打开第一个和第二个面板,当打开第三个面板时,它甚至不会滚动到顶部。
我只需要它滚动回"。单击的面板的"panel-title"。我认为这是相当荒谬的,这似乎很难做到,因为很多时候面板的内容可以很长,我想大多数人都希望滚动到顶部的信息当面板打开。
我在这里看到过其他的帖子,但他们似乎没有处理AngularJS。我使用的是" ui-bootstrap-tpls-2.1.3 "
EDIT -如果您愿意,这里有一个Plunker可以玩。
这可能是一个快速和肮脏的方法,但工作完美
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
.controller('AccordionDemoCtrl', function($scope) {
$scope.oneAtATime = true;
$scope.groups = [{
title: 'Dynamic Group Header - 1',
content: 'Dynamic Group Body - 1'
}, {
title: 'Dynamic Group Header - 2',
content: 'Dynamic Group Body - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2 Dynamic Group Header - 2'
}];
$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
};
//scrolling
var accordion = $('.accordion'), timeOut;
accordion.on('click', '.panel-heading', function(e) {
if(e.target.nodeName != 'SPAN') return;
var element = this;
clearTimeout(timeOut);
//since we dont know the exact offsetTop for dynamic content
//using timeout 350 which let angular complete its render
timeOut = setTimeout(function() {
accordion.animate({
scrollTop: element.offsetTop -2
}, 300);
}, 350);
});
});
.accordion {
max-height: 220px;
overflow: auto;
padding: 2px; 8px 0 0;
}
*:focus { outline: none !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="ui.bootstrap.demo">
<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="accordion">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group 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>
</uib-accordion-group>
<uib-accordion-group heading="Custom template" template-url="group-template.html">
Hello
</uib-accordion-group>
<uib-accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<p>Please, to delete your account, click the button below</p>
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
</div>
</div>
</div>
相关文章:
- 打开网页后立即获取网页的活动javascript函数
- 单击我网站中的链接时打开新选项卡,保持当前选项卡处于活动状态
- 广告拦截处于活动状态,然后不要打开超链接到新标签
- 打开图形:Java脚本:必须使用活动访问令牌来查询有关当前用户的信息
- 从chrome扩展打开的窗口捕获活动面板中的屏幕
- 必须使用活动访问令牌来查询有关具有打开图的当前用户的信息
- 如何在客户打开web开发工具时获得活动
- 获取左侧导航链接以保持打开和活动状态
- JQuery UI(手风琴),在初始化时打开活动选项卡
- 引导手风琴,单击时滚动到活动(打开)手风琴的顶部
- 打开打印窗口处于活动状态的 PDF 链接
- FetchXML 查询在子网格中返回的动态 CRM 2015 中的活动记录 - 主题超链接将打开新的活动
- 如何知道单击了哪个按钮,以便我可以在同一活动中打开网页
- 检查选项卡是否打开为活动状态
- 当用户单击子菜单并在新页面中打开时,子菜单将保持活动状态
- 在打开(活动)移动下拉菜单时将标题的位置从固定更改为相对
- 跟踪由 window.open() 方法打开的窗口上的用户活动
- j查询手风琴 |打开页面加载和活动状态混淆的第一个元素
- 调用一个打开活动并将活动结果返回给javascript的java函数
- 从外部链接打开活动选项卡