欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS仿蘋果滑屏刪除控件

 更新時間:2016年01月18日 10:37:28   投稿:mrr  
前端開發(fā)中,為了對列表項進行快捷操作,有時就添個按鈕來簡單實現(xiàn)。但是,有時會發(fā)現(xiàn)按鈕影響美觀,甚至影響列表行的布局。稍在網(wǎng)上搜索無果,而寫此仿蘋果滑屏刪除控件

AngularJs被用來開發(fā)單頁面應(yīng)用程序(SPA),利用AJAX調(diào)用配合頁面的局部刷新,可以減少頁面跳轉(zhuǎn),從而獲得更好的用戶體驗。Angular的ngView及其對應(yīng)的強大路由機制,是實現(xiàn)SPA應(yīng)用的核心模塊。本文所說的頁面切換指的就是這個路由機制,即根據(jù)不同的url展示不同的視圖。

前端開發(fā)中,為了對列表項進行快捷操作,有時就添個按鈕來簡單實現(xiàn)。但是,有時會發(fā)現(xiàn)按鈕影響美觀,甚至影響列表行的布局。稍在網(wǎng)上搜索無果,而寫此仿蘋果滑屏刪除控件。

依賴項:angularJS、jQuery

測試瀏覽器:Chrome、IE11、手機瀏覽器

原先列表項代碼:

<div class="row-class" ng-repeat="item in list">
這是整行顯示的內(nèi)容
</div>

開發(fā)目標:

<div class="row-class" ng-repeat="item in list" slide-delete text="刪除" ondelete="ondelete(item)">
這是整行顯示的內(nèi)容
</div>

首先,要寫個angular指令:

myapp.directive('slideDelete', function() {
return {
restrict: 'AE',
scope: {
text: "@",
ondelete: "&"
},
link: function (scope, element, attrs) {
var w = $(element).outerWidth ();//應(yīng)顯示的寬度
var h = $(element).outerHeight();//應(yīng)顯示的高度
//按鈕寬度
var btn_w = 60;
//設(shè)計按鈕:
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將內(nèi)容包裹起來
$(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();//關(guān)閉背景
});
}
};
});

再寫個滑屏事件類,當然要兼容鼠標

(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);

關(guān)于上述代碼給大家介紹的AngularJS仿蘋果滑屏刪除控件的相關(guān)代碼,都是小編測試過的,可以放心安全使用。

相關(guān)文章

  • angularjs實現(xiàn)多選框分段全選效果實現(xiàn)

    angularjs實現(xiàn)多選框分段全選效果實現(xiàn)

    這篇文章主要為大家介紹了angularjs實現(xiàn)多選框分段全選效果實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-06-06
  • angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法

    angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法

    下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報錯的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 深入理解angular2啟動項目步驟

    深入理解angular2啟動項目步驟

    本篇文章主要介紹了深入理解angular2啟動步驟 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • AngularJS實現(xiàn)進度條功能示例

    AngularJS實現(xiàn)進度條功能示例

    這篇文章主要介紹了AngularJS實現(xiàn)進度條功能,結(jié)合具體完整實例形式分析了AngularJS實現(xiàn)進度條功能的原理、相關(guān)知識點與注意事項,需要的朋友可以參考下
    2017-07-07
  • Angularjs編寫KindEditor,UEidtor,jQuery指令

    Angularjs編寫KindEditor,UEidtor,jQuery指令

    使用過 AngularJS 的朋友應(yīng)該最感興趣的是它的指令?,F(xiàn)今市場上的前端框架也只有AngularJS 擁有自定義指令的功能,并且AngularJS 是目前唯一提供Web應(yīng)用可復(fù)用能力的框架。
    2015-01-01
  • 在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟

    在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下
    2024-03-03
  • AngularJs html compiler詳解及示例代碼

    AngularJs html compiler詳解及示例代碼

    本文主要介紹AngularJs html compiler的知識講解,這里整理了相關(guān)資料及相關(guān)示例代碼,有興趣的小伙伴可以參考下
    2016-09-09
  • Angular2整合其他插件的方法

    Angular2整合其他插件的方法

    本文給大家詳細分析了Angular2整合其他插件的方法,有興趣的朋友學(xué)習(xí)下。
    2018-01-01
  • angular中的cookie讀寫方法

    angular中的cookie讀寫方法

    本篇文章主要介紹了angular中的cookie讀寫方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • angularjs實現(xiàn)Tab欄切換效果

    angularjs實現(xiàn)Tab欄切換效果

    這篇文章主要為大家詳細介紹了angularjs實現(xiàn)Tab欄切換效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03

最新評論