实现效果
打开页面或点击“-”后，页面不显示明细信息：
点击“+”后，页面显示明细信息：
实例一：借助JQuery操作DOM实现
<!doctype html>
<html ng-app="toggle">
<head>
<script src="lib/jquery-1.9.1.js"></script>
<script src="lib/angular.js"></script>
<script src="js/ToggleDirective01.js"></script>
</head>
<body>
<div ng-controller="BJControl">
<span>账单总额：280.4</span>
<br>
<span ext-toggle="{label: '账单明细', showModel: 'ctrl.isShowDetailInfo'}"></span>
<table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
<tr>
<td width="30%">借款人</td>
<td width="30%">借款金额</td>
<td width="40%">借款时间</td>
</tr>
<tr>
<td>张三</td>
<td>100.2</td>
<td>201.01.09</td>
</tr>
<tr>
<td>李四</td>
<td>180.2</td>
<td>201.03.09</td>
</tr>
</table>
</div>
</body>
</html>
function BJControl($scope) {
$scope.ctrl = {
isShowDetailInfo : false
};
}
var md = angular.module('toggle', []);
//作用：plus/minus切换ng-show
//用法：<span ext-toggle="{label: '账单明细', showModel: 'ctrl.isShowDetailInfo'}"></span>
md.directive('extToggle', ['$parse', '$compile', function($parse, $compile){
'use strict';
var countNum = 1;
return {
restrict: 'A',
link: function(scope, el, attrs, ctrl){
var opts = scope.$eval(attrs.extToggle) || {};
if(!opts.showModel)
return;
var showImgPathModel = opts.showModel + '_toggleImgPath';
var getterImg = $parse(showImgPathModel);
var setterImg = getterImg.assign;
// 显示了就显示减号
var getter = $parse(opts.showModel);
setterImg(scope, 'img/' + (getter(scope) ? 'minus' : 'plus') + '.png');
var suf = countNum++;
scope['toggle_' + suf] = function(){
var setter = getter.assign;
var isShow = getter(scope);
if(isShow){
setterImg(scope, 'img/plus.png');
setter(scope, false);
}else{
setterImg(scope, 'img/minus.png');
setter(scope, true);
}
};
//加上id属性，是为了在模型变化的时候，图片也得跟着变。需要执行dom的click方法
var tpl = '<img ng-src="{{' +
showImgPathModel +
'}}" ng-click="toggle_' + suf + '()" id="' + opts.showModel.replace('.', '_') + '"/>';
if(opts.label)
tpl += ' <label>' + opts.label + '</label>';
var innerEl = $(tpl);
innerEl.appendTo(el);
$compile(innerEl)(scope);
}
};
}]);
实例二：纯AngularJS实现
<!doctype html>
<html ng-app="toggle">
<head>
<script src="lib/angular.js"></script>
<script src="js/ToggleDirective02.js"></script>
</head>
<body>
<div ng-controller="BJControl">
<span>账单总额：280.4</span>
<br>
<span ext-toggle="" show-model="ctrl.isShowDetailInfo">账单明细</span>
<table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
<tr>
<td width="30%">借款人</td>
<td width="30%">借款金额</td>
<td width="40%">借款时间</td>
</tr>
<tr>
<td>张三</td>
<td>100.2</td>
<td>201.01.09</td>
</tr>
<tr>
<td>李四</td>
<td>180.2</td>
<td>201.03.09</td>
</tr>
</table>
</div>
</body>
</html>
function BJControl($scope) {
$scope.ctrl = {
isShowDetailInfo : false
};
}
var md = angular.module('toggle', []);
//作用：plus/minus切换ng-show
//用法：<span ext-toggle="" show-model="ctrl.isShowDetailInfo">账单明细</span>
md.directive('extToggle', ['$parse', function($parse){
'use strict';
return {
restrict: 'A',
scope: {
showModel: '='
},
transclude: true,
template: '<span ng-click="toggleShow();"><img ng-src="{{imgPath}}"> <label ng-transclude></label></span>',
replace: true,
link: function(scope, el, attrs, ctrl){
scope.imgPath = 'img/plus.png';
scope.$watch('showModel', function(val){
if(val){
scope.imgPath = 'img/minus.png';
}else{
scope.imgPath = 'img/plus.png';
}
});
scope.toggleShow = function(){
scope.showModel = !scope.showModel;
};
}
};
}]);
实例三：AngularJS加强版实现
<!doctype html>
<html ng-app="toggle">
<head>
<script src="lib/angular.js"></script>
<script src="js/ToggleDirective03.js"></script>
</head>
<body>
<div ng-controller="BJControl">
<span>账单总额：280.4</span>
<br>
<span ext-toggle="{showModel: 'ctrl.isShowDetailInfo'}">账单明细</span>
<table ng-show="ctrl.isShowDetailInfo" border="1" width="75%">
<tr>
<td width="30%">借款人</td>
<td width="30%">借款金额</td>
<td width="40%">借款时间</td>
</tr>
<tr>
<td>张三</td>
<td>100.2</td>
<td>201.01.09</td>
</tr>
<tr>
<td>李四</td>
<td>180.2</td>
<td>201.03.09</td>
</tr>
</table>
</div>
</body>
</html>
function BJControl($scope) {
$scope.ctrl = {
isShowDetailInfo : false
};
}
var md = angular.module('toggle', []);
//作用：plus/minus切换ng-show
//用法：<span ext-toggle="{showModel: 'ctrl.isShowDetailInfo'}">账单明细</span>
md.directive('extToggle', ['$parse', function($parse){
'use strict';
return {
restrict: 'A',
scope: true,
transclude: true,
template: '<span ng-click="toggleShow();"><img ng-src="{{imgPath}}"> <label ng-transclude></label></span>',
replace: true,
link: function(scope, el, attrs, ctrl){
var opts = scope.$eval(attrs.extToggle) || {};
if(!opts.showModel)
return;
scope.imgPath = 'img/plus.png';
scope.$watch(opts.showModel, function(val){
if(val){
scope.imgPath = 'img/minus.png';
}else{
scope.imgPath = 'img/plus.png';
}
});
scope.toggleShow = function(){
var getter = $parse(opts.showModel);
var setter = getter.assign;
var oldShowVal = getter(scope) || false;
setter(scope, !oldShowVal);
};
}
};
}]);
相关推荐
关键在于使用Angular的数据绑定和条件指令来控制内容的显示。 1. `*ngIf`指令：这是一个Angular的结构指令，用于根据表达式的值决定元素是否应该出现在DOM中。在例子中，`*ngIf="!isShow"` 用于控制`<ion-list>`...
本文主要探讨了在Vue.js框架下实现一个可以垂直方向展开与收缩的模块，并且这些模块的高度是不确定的。在许多应用场景中，如折叠...这种技术可以广泛应用于需要动态内容展示的Web应用中，提高页面的交互性和用户体验。
`navbar-toggle`类提供了折叠按钮的样式，`data-toggle="collapse"`表示当按钮被点击时，会触发折叠或展开动作。`data-target`属性指定了要操作的目标元素，即下面的`divNav`。 导航条的折叠内容部分是这样的： ``...
在提供的代码片段中，我们看到一个名为`textfold`的自定义指令，用于实现文字折叠展开功能。这个指令通过`restrict: 'EA'`定义了它可以作为元素（E）或属性（A）使用。 指令的`template`属性定义了HTML模板，包含了...
transition可以轻松实现元素状态改变时的平滑过渡，比如银行卡在展开和收缩时的大小变化；而animation则可以定义复杂的动画序列，如卡片的旋转、淡入淡出效果。此外，CSS3的Flexbox或Grid布局也可能被用到，以保证...
3. **效果**：这可能是指zTree在实际应用中的视觉效果和交互体验，比如节点展开收缩的动画、选中状态的反馈等。 综合以上信息，"ztree二级树菜单"的实现涉及到前端的zTree库与后端的SSI框架的结合，以及Action和JSP...
此外，当左侧导航菜单展开或收缩导致页面内容压缩时，图表的尺寸变化可能不会立即触发resize方法。为了解决这个问题，可以采取以下策略： - 动态检测左侧菜单的状态变化，根据状态来决定是否需要调整图表的尺寸。 -...
如果需要在动态数据加载后操作菜单（如收缩、折叠展开等），我们通常需要在link函数中进行，因为只有在这个阶段，由指令创建的元素才会出现在DOM中。 现在，我们可以具体介绍如何实现一个动态菜单操作指令。首先，...
使用`v-if`指令来决定何时渲染三级菜单。在二级菜单的循环中，我们可以定义一个辅助函数`isThirdLevelMenu(child)`来检查当前二级菜单项`child`是否包含`children`属性并且其长度大于0，表示存在三级菜单。如果满足...
- **滑动效果**：如页面元素的淡入淡出、左右滑动，常用于图片轮播、导航菜单的展开与收缩。 - **动画效果**：包括平滑滚动、计时器驱动的动画、CSS3过渡和动画结合JavaScript的实现。 - **下拉菜单**：通过...
根据提供的文档内容，我们可以归纳和扩展出以下几个关键的知识点： ### 1. 浏览器执行的语言 **知识点概述：** 浏览器主要负责解释并呈现网页内容，它支持多种脚本语言，但并不是所有语言都能在浏览器中直接执行。...
监控项目默认显示一条，通过按钮控制展开或收缩所有项目，优化了界面的交互体验。 6. **新增维修项目/定检包**：在创建时控项目和时寿项目时，必须指定相关的部件。新增维修项目的版本号与维修方案的版本号保持一致...
- **元素**：JSP页面包含指令（Directives）、脚本元素（Scripting Elements）和动作（Actions）。例如，`<jsp:include>`用于动态包含其他页面，`<jsp:useBean>`用于实例化Java Bean等。 - **树状菜单实现**：在...
无限级别的菜单通常指的是在网页设计中，一...以上知识点总结起来，涵盖了网页设计中关于菜单设计、实现技术、页面控制和开发指令等多个方面的内容，这对于理解现代网页开发中导航菜单的功能和实现方式有着重要的帮助。
- **实现对话框的部分收缩和展开**：通过调整对话框的大小实现。 - **隐藏对话框的巧妙实现方式**：不能直接在`OnInitDialog`中处理，需要用到自定义消息的方法。 #### 第十课：属性页对话框和向导对话框 - **制作...
通过结合CSS动画和Angular指令，开发者能够实现卡片的动态展开和收缩。这些动画可能是平滑的淡入淡出，或者是更复杂的3D转换，以增加视觉吸引力。 TypeScript在其中扮演了关键角色，它提供了强类型系统和面向对象...
`showToggle`方法用于切换一级菜单的展开和收缩，而`treeNavSwitch`方法用于处理二级菜单的点击事件并更新选中状态。 ```javascript methods:{ showToggle:function(index){ // 展开/收缩一级菜单 this.isShow =...
3. CSS样式：为了提供良好的用户体验，需要精心设计菜单的展开、收缩动画，以及在不同设备上的适配性，如响应式布局以适应手机和平板。 三、无限级联动的常见技术框架 1. jQuery插件：如jQuery UI的Selectmenu插件...
1. JSP基础：包括JSP语法、指令（page、include、taglib）、动作（useBean、forward、param等）以及EL（Expression Language）表达式。 2. HTML/CSS布局：用于构建界面结构和样式，如使用div、ul、li等标签进行布局...
我们可以通过自定义节点模板和监听节点操作事件，实现展开、收缩、添加、删除等操作。 面包屑导航是后台系统常见的导航方式，它清晰地显示了当前页面在整个系统中的位置。Element UI的Breadcrumb组件可以帮助我们...