AngularJS仿苹果滑屏删除控件


Posted in Javascript onJanuary 18, 2016

AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图。

前端开发中,为了对列表项进行快捷操作,有时就添个按钮来简单实现。但是,有时会发现按钮影响美观,甚至影响列表行的布局。稍在网上搜索无果,而写此仿苹果滑屏删除控件。

依赖项:angularJS、jQuery

测试浏览器:Chrome、IE11、手机浏览器

原先列表项代码:

<div class="row-class" ng-repeat="item in list">
这是整行显示的内容
</div>

开发目标:

<div class="row-class" ng-repeat="item in list" slide-delete text="删除" ondelete="ondelete(item)">
这是整行显示的内容
</div>

首先,要写个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 = $('<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();//关闭背景
});
}
};
});

再写个滑屏事件类,当然要兼容鼠标

(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仿苹果滑屏删除控件的相关代码,都是小编测试过的,可以放心安全使用。

Javascript 相关文章推荐
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
vue中多路由表头吸顶实现的几种布局方式
Apr 12 Javascript
vue实现在线学生录入系统
May 30 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 #Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 #Javascript
实例详解jQuery表单验证插件validate
Jan 18 #Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
Jan 18 #Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 #Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 #Javascript
轻松实现js图片预览功能
Jan 18 #Javascript
You might like
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
2019/10/03 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
2013/10/29 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
JQuery实现动态操作表格
2017/01/11 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
vue将时间戳转换成自定义时间格式的方法
2018/03/02 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
python编写的最短路径算法
2015/03/25 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
PyCharm 创建指定版本的 Django(超详图解教程)
2019/06/18 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python如何将函数值赋给变量
2020/04/28 Python
keras中的backend.clip用法
2020/05/22 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
CSS3实现时间轴效果
2016/07/11 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
Ruby如何实现动态方法调用
2012/11/18 面试题
Ruby如何创建一个线程
2013/03/10 面试题
护士自荐信范文
2013/12/15 职场文书
搞笑创意广告语
2014/03/17 职场文书
2016年国培研修日志
2015/11/13 职场文书