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-Jquery简介 入门了解篇
Nov 25 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
js动态往表格的td中添加图片并注册事件
Jun 12 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
深入了解JavaScript中的Symbol的使用方法
Jul 28 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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操作MongoDB类实例
2015/06/17 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
firebug的一个有趣现象介绍
2011/11/30 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
深入了解python列表(LIST)
2020/06/08 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
新东网科技Java笔试题
2012/07/13 面试题
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
三分钟演讲稿事例
2014/03/03 职场文书
高三学生评语大全
2014/04/25 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
骨干教师申报材料
2014/12/17 职场文书
医学生自荐信范文
2015/03/05 职场文书
把77A收信机改造成收音机
2022/04/05 无线电