Collapse

uib-collapse提供了一个简单的方法来隐藏和显示元素。

参数设置:

1) collapsed(): 元素完成折叠后的可选操作

2) collapsing(): 元素折叠前的可选操作。如果表达式返回一个promise,直到promise resolves动画才会开始。如果promise被rejected了,那么折叠就取消了。

3) expanded(): 元素完成展开后的可选操作

4) expanding(): 元素展开前的可选操作。如果表达式返回一个promise,直到promise resolves动画才会开始。如果promise被rejected了,那么展开就取消了。

5) uib-collapse: 默认false; 元素是否应该被折叠

1 <div ng-controller="CollapseDemoCtrl">
2     <button type="button" class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button>
3     <hr>
4     <div uib-collapse="isCollapsed">
5         <div class="well well-lg">Some content</div>
6     </div>
7 </div>
1 angular.module(‘ui.bootstrap.demo‘).controller(‘CollapseDemoCtrl‘, function ($scope) {
2   $scope.isCollapsed = false;
3 });
时间: 2024-10-20 04:08:40

Collapse的相关文章

Bootstrap 历练实例 - 折叠(Collapse)插件方法

方法 下面是一些折叠(Collapse)插件中有用的方法: 方法 描述 实例 Options:.collapse(options) 激活内容为可折叠元素.接受一个可选的 options 对象. $('#identifier').collapse({ toggle: false }) Toggle: .collapse('toggle') 切换显示/隐藏可折叠元素. $('#identifier').collapse('toggle') Show: .collapse('show') 显示可折叠元

[Bootstrap] 8. &#39;Collapse&#39;, data-target, data-toggle &amp; data-parent

Using Bootstrap JavaScript Plugins If we want to add behavior to our website, which of the following will NOT work? Updating our HTML with data attributes that the Bootstrap JavaScript Library requires. Adding Bootstrap CSS classes to our HTML that t

【JavaScript】使用Bootstrap来编写 选择折叠项collapse

选择折叠项collapse在网页中并不常用,不过也并不少见. 这也算是一个比较实用的组件. 折叠项collapse在默认情况下仅能有一项是处于打开状态的. 一.基本目标 使用Bootstrap来编写如下图的选择折叠项: 其中服务条款2在打开网页的时候就是打开状态. 点击不同的折叠项,其余的项就会收起,这项就会打开. 二.制作过程 1.同之前<[JavaScript]使用Bootstrap来编写一个在当前网页弹出的对话框,可以关闭,不用跳转,非弹窗>的第一步(点击打开链接) 因为需要使用Boot

bootstrap collapse 无法收回

$(function () { //修复collapse不能正常折叠的问题 $(".collapsed").click(function () { var itemHref = $(this).attr("href"); var itemClass = $(itemHref).attr("class"); if (itemClass === "panel-collapse collapse") { $(itemHref).at

Bootstrap 学习之js插件(折叠(collapse)插件)

Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 用法 下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class: Class 描述   .collapse 隐藏内容. .collapse.in 显示内容. .collapsing 当过渡效果开始时被添加,当过渡效果完成时被移除.   您可以通过以下两种方式使用折叠(Collapse)插件: 通过 data 属性

折叠Collapse插件

实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. .collapsing 当过渡效果开始时被添加,当过渡效果完成时被移除. <!DOCTYPE HTML><html><head><link href="/stylesheets/bootstrap.min.css" rel="stylesh

Bootstrap源码分析之nav、collapse

导航分析(nav): 源码文件:_navs.scss:导航模块Mixins/_nav-divider.scss:分隔线Mixins/_nav-vertical-align.scss:垂直对齐 1.只是用css进行了样式修饰,对Js没有任何依赖2.导航模块可以包含下拉模块3.实现了水平.垂直.水平平均分配(table-cell实现,4.0移除).tabs.胶囊等样式4.Nav-divider:有一个像素的高度实现分隔线5.Nav-stacked:垂直对齐实现6.提供了tab-content类,用于

深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及

问题与对策:CSS的margin塌陷(collapse)

1: <!DOCTYPEHTML PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 2: <html> 3: <head> 4: <title></title> 5: <metaname=""content=""> 6: <style> 7: *{ 8: margin:0px; 9: padding:0px; 10: }

CSS的margin塌陷(collapse)

对于以下简单代码: 点击(此处)折叠或打开 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta name="" content=""> <style> *{ margin:0px; padding:0px; } #no1