AngularJS仿苹果滑屏删除控件
内容摘要
AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核
文章正文
AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图。
前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现。但是,有时会发现按钮影响美观,甚至影响列表行的布局。稍在网上搜索无果,而写此仿苹果滑屏删除控件。
依赖项:angularJS、jQuery
测试浏览器:Chrome、IE11、手机浏览器
原先列表项代码:
1 2 3 | <div class = "row-class" ng-repeat= "item in list" > 这是整行显示的内容 </div> |
开发目标:
1 2 3 | <div class = "row-class" ng-repeat= "item in list" slide- delete text= "删除" ondelete= "ondelete(item)" > 这是整行显示的内容 </div> |
首先,要写个angular指令:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | myapp.directive( 'slideDelete' , function () { return { restrict: 'AE' , scope: { text: "@" , ondelete: "&" }, link: function (scope, element, attrs) { var w = $(element).outerWidth (); //应显示的宽度 var h = $(element).outerHeight(); //应显示的高度 //按钮宽度 var btn_w = 60; //设计按钮: scope.btn = $( '<div style="position:absolute;z-index:5998;right:0;top:0;width:' +btn_w+ 'px;height:' +h+ 'px;color:#fff;background-color:#900;text-align:center;padding-top:10px">' +(scope.text|| '删除' )+ '</div>' ); //改造行,用一个绝对定位div将内容包裹起来 $(element).contents().wrapAll( '<div new_box style="position:absolute;z-index:5999;left:0;top:0;width:' +w+ 'px;height:' +h+ 'px;background-color:#fff;"></div>' ); //添加按钮: $(element).css({overflow: "hidden" , position: "relative" , "z-index" :5999}).append(scope.btn) //滑屏功能 .slideable({ getLeft: function (self){ return self.children( ":first-child" ).position().left;}, setLeft: function (self, x){ self.children( ":first-child" ).css({left: x<-btn_w && -btn_w || x<0 && x || 0});}, onslide: function (self, x){ scope.open = x < -btn_w / 2; self.css( "z-index" , scope.open && 6001 || 5999); //背景,点击收起 var bk = $.fixedBackground(6000, scope.open); scope.open && bk.data( "self" , self).click( function (){ var self = bk.data( "self" ); $.fixedBackground(6000, false); self && self.css( "z-index" , 5999).children( ":first-child" ).animate({left: 0},100); }); self.children( ":first-child" ).animate({left: scope.open ? -btn_w : 0},100); } }) //按钮事件 scope.btn.click( function (){ scope.ondelete && scope.ondelete(); $.fixedBackground(6000, 1).click(); //关闭背景 }); } }; }); |
再写个滑屏事件类,当然要兼容鼠标
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | ( function ($){ $.fn.slideable = function (options){ var self = this; self.options = options; self.left = 0; self.down = 0; self.pressed = false; self.bindobj = options.bindobj || self; self.bindobj.bind( "mousedown" , function (event){ onmousedown(self, event); }) self.bindobj.bind( "mousemove" , function (event){ onmousemove(self, event); }) self.bindobj.bind( "mouseup" , function (event){ onmouseup (self, event); }) self.bindobj[0].addEventListener( 'touchstart' , function (event) { onmousedown(self, {screenX: event.changedTouches[0].pageX}); }) self.bindobj[0].addEventListener( 'touchmove' , function (event) { onmousemove(self, {screenX: event.changedTouches[0].pageX}); }) self.bindobj[0].addEventListener( 'touchend' , function (event) { onmouseup (self, {screenX: event.changedTouches[0].pageX}); }) return this; } function onmousedown(self, event){ self.down = event.screenX; self.options.onmousedown && self.options.onmousedown(self); self.left = self.options.getLeft && self.options.getLeft(self) || 0; self.pressed = true; } function onmousemove(self, event){ self.pressed && self.options.setLeft && self.options.setLeft(self, self.left + event.screenX - self.down); } function onmouseup(self, event){ self.pressed = false; self.left += event.screenX - self.down; self.options.onslide && self.options.onslide(self, self.left); } //背景功能 $.fixedBackground = function (z_index, b_show){ var bk = $( '#fixed-background-' +z_index+ '' ); if (!b_show) return bk && bk.remove(); if (!(bk && bk.length>0)){ bk = $( '<div id="fixed-background-' +z_index+ '" style="position:fixed;z-index:' +z_index+ ';left:0;top:0;right:0;bottom:0;background-color:rgba(0,0,0,0)">' ); $( "body" ).append(bk); } return bk; } })(jQuery); |
关于上述代码给大家介绍的AngularJS仿苹果滑屏删除控件的相关代码,都是小编测试过的,可以放心安全使用。
代码注释