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 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
JavaScript实现表单注册、表单验证、运算符功能
2018/10/15 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
python入门教程之识别验证码
2017/03/04 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
安装python3.7编译器后如何正确安装opnecv的方法详解
2020/06/16 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
Python Django项目和应用的创建详解
2021/11/27 Python