AngularJS仿苹果滑屏删除控件_AngularJS
程序员文章站
2022-04-10 22:53:19
...
AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图。
前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现。但是,有时会发现按钮影响美观,甚至影响列表行的布局。稍在网上搜索无果,而写此仿苹果滑屏删除控件。
依赖项:angularJS、jQuery
测试浏览器:Chrome、IE11、手机浏览器
原先列表项代码:
这是整行显示的内容
开发目标:
这是整行显示的内容
首先,要写个angular指令:
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 = $(''+(scope.text||'删除')+''); //改造行,用一个绝对定位div将内容包裹起来 $(element).contents().wrapAll(''); //添加按钮: $(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
再写个滑屏事件类,当然要兼容鼠标
(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 = $(''); $("body").append(bk); } return bk; } })(jQuery);关于上述代码给大家介绍的AngularJS仿苹果滑屏删除控件的相关代码,都是小编测试过的,可以放心安全使用。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
上一篇: JSONP实现
下一篇: angularJS 中input示例分享