Rumah > hujung hadapan web > tutorial js > AngularJS meniru kawalan pemadaman skrin gelongsor Apple_AngularJS

AngularJS meniru kawalan pemadaman skrin gelongsor Apple_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan: 2016-05-16 15:19:32
asal
1243 orang telah melayarinya

AngularJs digunakan untuk membangunkan aplikasi satu halaman (SPA). Panggilan AJAX digunakan untuk bekerjasama dengan penyegaran separa halaman, yang boleh mengurangkan lonjakan halaman dan memperoleh pengalaman pengguna yang lebih baik. ngView Angular dan mekanisme penghalaan berkuasa yang sepadan adalah modul teras untuk melaksanakan aplikasi SPA. Penukaran halaman yang disebut dalam artikel ini merujuk kepada mekanisme penghalaan ini, yang memaparkan paparan berbeza mengikut URL berbeza.

Dalam pembangunan bahagian hadapan, untuk melaksanakan operasi pantas pada item senarai, kadangkala mudah untuk menambah butang. Walau bagaimanapun, kadangkala anda mendapati bahawa butang mempengaruhi estetika dan juga susun atur baris senarai. Selepas sedikit carian di Internet tidak berjaya, saya menulis kawalan memadam skrin gelongsor Apple tiruan ini.

Pergantungan: angularJS, jQuery

Uji penyemak imbas: Chrome, IE11, penyemak imbas mudah alih

Kod item senarai asal:

<div class="row-class" ng-repeat="item in list">
这是整行显示的内容
</div>
Salin selepas log masuk

Matlamat pembangunan:

<div class="row-class" ng-repeat="item in list" slide-delete text="删除" ondelete="ondelete(item)">
这是整行显示的内容
</div>
Salin selepas log masuk

Pertama, tulis arahan sudut:

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 &#63; -btn_w : 0},100);
}
})
//按钮事件
scope.btn.click(function(){
scope.ondelete && scope.ondelete();
$.fixedBackground(6000, 1).click();//关闭背景
});
}
};
});
Salin selepas log masuk

Tulis kelas acara gelongsor yang lain, sudah tentu ia mesti serasi dengan tetikus

(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);
Salin selepas log masuk

Mengenai kod kawalan pemadaman skrin gelongsor Apple tiruan AngularJS yang diperkenalkan di atas, ia telah diuji oleh editor dan boleh digunakan dengan selamat.

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan