AngularJs is used to develop single-page applications (SPAs). Using AJAX calls to cooperate with the local refresh of the page can reduce page jumps and achieve a better user experience. Angular's ngView and its corresponding powerful routing mechanism are the core modules for implementing SPA applications. The page switching mentioned in this article refers to this routing mechanism, that is, displaying different views according to different URLs.
In front-end development, in order to quickly operate list items, sometimes a button is added to simply implement it. However, sometimes you find that the buttons affect the aesthetics and even the layout of the list rows. A little search on the Internet was fruitless, and I wrote this imitation of Apple sliding screen to delete the control.
Dependencies: angularJS, jQuery
Test browser: Chrome, IE11, mobile browser
Original list item code:
<div class="row-class" ng-repeat="item in list"> This is what the whole line shows </div>
Development objectives:
<div class="row-class" ng-repeat="item in list" slide-delete text="delete" ondelete="ondelete(item)"> This is what the whole line shows </div>
First, write an angular command:
('slideDelete', function() {
return {
restrict: 'AE',
scope: {
text: "@",
ondelete: "&"
},
link: function (scope, element, attrs) {
var w = $(element).outerWidth ();//The width to be displayedvar h = $(element).outerHeight();//The height should be displayed//Button widthvar btn_w = 60;
//Design button: = $('<div style="position:absolute;z-index:5998;right:0;top:0;width:'+btn_w+'px;height:'+h+'px;color:#ffff;background-color:#900;text-align:center;padding-top:10px">'+(||'Delete')+'</div>');//Change the line and wrap the content with an absolute positioning 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>');
//Add button:$(element).css({overflow:"hidden", position:"relative", "z-index":5999}).append()
//Sliding screen function.slideable({
getLeft: function(self){return (":first-child").position().left;},
setLeft: function(self, x){ (":first-child").css({left: x<-btn_w && -btn_w || x<0 && x || 0});},
onslide: function(self, x){
= x < -btn_w / 2;
("z-index", && 6001 || 5999);
//Background, click to closevar bk = $.fixedBackground(6000, );
&& ("self", self).click(function(){
var self = ("self");
$.fixedBackground(6000, false);
self && ("z-index", 5999).children(":first-child").animate({left: 0},100);
});
(":first-child").animate({left: ? -btn_w : 0},100);
}
})
//Button Event(function(){
&& ();
$.fixedBackground(6000, 1).click();//Close the background});
}
};
});
Write a slide event class, of course, it must be compatible with the mouse
(function($){
$. = function(options){
var self = this;
= options;
= 0;
= 0;
= false;
= || self;
("mousedown",function(event){ onmousedown(self, event); })
("mousemove",function(event){ onmousemove(self, event); })
("mouseup" ,function(event){ onmouseup (self, event); })
[0].addEventListener('touchstart', function(event) { onmousedown(self, {screenX: [0].pageX}); })
[0].addEventListener('touchmove' , function(event) { onmousemove(self, {screenX: [0].pageX}); })
[0].addEventListener('touchend' , function(event) { onmouseup (self, {screenX: [0].pageX}); })
return this;
}
function onmousedown(self, event){
= ;
&& (self);
= && (self) || 0;
= true;
}
function onmousemove(self, event){
&& && (self, + - );
}
function onmouseup(self, event){
= false;
+= - ;
&& (self, );
}
//Background function$.fixedBackground = function(z_index, b_show){
var bk = $('#fixed-background-'+z_index+'');
if(!b_show)return bk && ();
if(!(bk && >0)){
bk = $('<div 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);
The code related to AngularJS imitation Apple sliding screen delete controls introduced to you about the above code are all tested by the editor and can be used safely.