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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 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实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
限制复选框的最大可选数
2006/07/01 Javascript
理解JavaScript中的事件
2006/09/23 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
js中开关变量使用实例
2017/02/24 Javascript
js 调用百度分享功能
2017/02/27 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
JS实现小球的弹性碰撞效果
2017/11/11 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
2020/09/10 Javascript
js删除对象中的某一个字段的方法实现
2021/01/11 Javascript
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
Django中的forms组件实例详解
2018/11/08 Python
Pycharm新手教程(只需要看这篇就够了)
2019/06/18 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
Servlet面试题库
2015/07/18 面试题
在校生自我鉴定
2014/01/23 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
体育教师求职信
2014/06/30 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
学生检讨书范文
2019/06/24 职场文书