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控件的相对独立性
Sep 06 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
js+SVG实现动态时钟效果
Jul 14 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
深入详解JS函数的柯里化
Jun 09 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
js Canvas实现的日历时钟案例分享
2016/12/25 Javascript
原生ajax处理json格式数据的实例代码
2016/12/25 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
PythonWeb项目Django部署在Ubuntu18.04腾讯云主机上
2019/04/01 Python
安装python及pycharm的教程图解
2019/10/10 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
用python解压分析jar包实例
2020/01/16 Python
使用pymysql查询数据库,把结果保存为列表并获取指定元素下标实例
2020/05/15 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
使用python将微信image下.dat文件解密为.png的方法
2020/11/30 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
红色连衣裙精品店:Red Dress Boutique
2018/08/11 全球购物
PHP如何去执行一个SQL语句
2016/03/05 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
培训演讲稿范文
2014/01/12 职场文书
协议书模板
2014/04/23 职场文书
临时租车协议范本
2014/09/23 职场文书
教师年度考核个人总结
2015/02/12 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL