实现效果
打开页面或点击“-”后,页面不显示明细信息:
点击“+”后,页面显示明细信息:
实例一:借助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); }; } }; }]);
相关推荐
Na + -K + -2Cl-Coporter1在苯肾上腺素引起的小鼠主动脉节律性收缩中的作用
JS+CSS点击收缩展开的竖直菜单! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
jQuery图片内容展开/收缩选项卡,点击图片会出现对应的文字解说。兼容主流浏览器,php中文网推荐下载! 使用方法: 1、head区域引用以下文件 <link rel="stylesheet" href="css/jquery.gridquote.css?3.1.64"&...
NULL 博文链接:https://lc2586.iteye.com/blog/727573
vue2+element-ui,el-aside侧边栏容器收缩与展开效果
jQuery+CSS 用图片收缩与放大 jQuery+CSS 用图片收缩与放大
一个由jquery实现的Accordion图文菜单-展开收缩的图片导航,其实也可看作是图片特效,鼠标放在上面,就会展开和合拢,完整的菜单名称:liteAccordion - a horizontal accordion plugin for jQuery。
L-塑料收缩率表,L-塑料收缩率表,L-塑料收缩率表,L-塑料收缩率表,L-塑料收缩率表,L-塑料收缩率表
20210501-浙商证券-信用收缩系列研究之五:表内信贷如何收缩?.pdf
很实用的jQuery+CSS实用图片收缩与放大效果插件
html5响应式排版点击页面三折页展开收缩显示特效 html5响应式排版点击页面三折页展开收缩显示特效
这个页面主要展示如果一个页面中的内容特别多的时候,内容收缩展示部分内容,点击展示之后,显示所有的内容,点击收缩展示部分的内容。
About the Library inspiration This library is strongly inspired in this concept from Hila Peleg in dribble. See it below Working example For more details on how to use this library please refer to ...
matlab开发-节段展开和收缩auserdefined域图。此函数允许用户分割、延迟或收缩不规则的、可能是凹形的域。
jQuery图片内容展开收缩选项卡是一款带有淡入淡出效果的jQuery图片内容选项卡切换特效。
内容讲述了使用jquery来实现 div展开收缩内容
侧边展开收缩菜单结构清晰
采用原生的JavaScript实现的图片收缩与展开效果;其中采用的图片均来自网络,希望和大家一起分享学习web前端。
带收缩和展开的简单自定义textview效果图 (带提示图标)效果图 (不带提示图标)