AngularJS仿苹果滑屏删除控件
AngularJs被用来开发单页面应用程序（SPA），利用AJAX调用配合页面的局部刷新，可以减少页面跳转，从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制，是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制，即根据不同的url展示不同的视图。
前端开发中，为了对列表项进行快捷操作，有时就添个按钮来简单实现。但是，有时会发现按钮影响美观，甚至影响列表行的布局。稍在网上搜索无果，而写此仿苹果滑屏删除控件。
依赖项：angularJS、jQuery
测试浏览器：Chrome、IE11、手机浏览器
原先列表项代码：
<divclass="row-class"ng-repeat="iteminlist"> 这是整行显示的内容 </div>
开发目标：
<divclass="row-class"ng-repeat="iteminlist"slide-deletetext="删除"ondelete="ondelete(item)"> 这是整行显示的内容 </div>
首先，要写个angular指令：
myapp.directive('slideDelete',function(){
return{
restrict:'AE',
scope:{
text:"@",
ondelete:"&"
},
link:function(scope,element,attrs){
varw=$(element).outerWidth();//应显示的宽度
varh=$(element).outerHeight();//应显示的高度
//按钮宽度
varbtn_w=60;
//设计按钮：
scope.btn=$('<divstyle="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('<divnew_boxstyle="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){returnself.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);
//背景，点击收起
varbk=$.fixedBackground(6000,scope.open);
scope.open&&bk.data("self",self).click(function(){
varself=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();//关闭背景
});
}
};
});
再写个滑屏事件类，当然要兼容鼠标
(function($){
$.fn.slideable=function(options){
varself=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});})
returnthis;
}
functiononmousedown(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;
}
functiononmousemove(self,event){
self.pressed&&self.options.setLeft&&self.options.setLeft(self,self.left+event.screenX-self.down);
}
functiononmouseup(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){
varbk=$('#fixed-background-'+z_index+'');
if(!b_show)returnbk&&bk.remove();
if(!(bk&&bk.length>0)){
bk=$('<divid="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);
}
returnbk;
}
})(jQuery);
关于上述代码给大家介绍的AngularJS仿苹果滑屏删除控件的相关代码，都是小编测试过的，可以放心安全使用。