工作一年的三两事(三)
2016-12-30 本文已影响17人
梦里都是你的柔情似水
2016年马上就要过去了，回首在公司的一年中，工作遇到了不少坑，也学到了不少新知识，至少对于我来说是新知识_，特此腾出时间记录一下，程序员、语死早，一些话表达不清楚只能靠代码和截图了，见谅见谅。
本篇博文，分三个篇幅：PHP、Ionic、AngularJs。都是在工作项目中接触到的，还有nodejs，但是接触时间比较短，还是先多学学。
三、AngularJs
AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
分享一些前端频繁使用的模块代码
弹窗及消息
一开始网上找的，挺好用的一个模块代码，在其基础上进行了一些扩展和改造，即拿即用
先看看如何使用和效果图
消息
在controller中注入
函数调用
效果图
确认弹窗
函数调用
效果图
CSS代码部分：
(这部分要感谢公司前端同事)
/*提示信息*/
.nspop_megcontainer {position: fixed;bottom: 12px;width:100%;z-index: 999;}
.nspop_megcontainer .main {padding: 8px;background-color:#030303;width: 10em;margin: auto;border-radius: 5px;opacity: 0.8;}
.nspop_megcontainer .textContent { color: #ffffff;text-align:center;}
/*确认弹窗样式*/
.confirmPop{text-align:center;width:100%;height:100%;display:table;position:absolute;top: 0;left: 0;z-index: 12;}
.confirmPop_box{display:table-cell;vertical-align:middle;}
.confirmPop_content{width: 70%;margin:0 auto;position:relative;}
.confirmPop_wrap{width: 100%;height: auto;background:#ffffff;border-radius: 10px;}
.confirmPop_img{width: 100%;height: auto;padding: 15px 38%10px;box-sizing: border-box;}
.confirmPop_img img{width: 100%;height: auto;}
.confirmPop_text{width: 100%;height: auto;line-height:20px;padding: 5px 10px;box-sizing: border-box;text-align: center;}
.confirmPop_btn{width: 100%;height: auto;overflow:hidden;padding: 8px;box-sizing: border-box;}
.confirmPop_btn_left{width: -webkit-calc(50% - 8px);width:-moz-calc(50% - 8px);width: calc(50% - 8px);height: 30px;line-height:30px;text-align: center;float: left;background: #e0e0e0;color:#666666;border-radius: 8px;margin: 0 4px;}
.confirmPop_btn_right{width: -webkit-calc(50% - 8px);width:-moz-calc(50% - 8px);width: calc(50% - 8px);height: 30px;line-height:30px;text-align: center;float: left;background: #33ccff;color:#ffffff;border-radius: 8px;margin: 0 4px;}
JS部分
angular.module('app')
.factory("dialogsManager", function ($q, $http, $compile, $timeout, $rootScope) {
//不明白可加 qq群517568588 交流
//消息模板
var megTmp;
var dialog = {
megs: [],
showMessage: showMessage,
alert: alert, //未实现
confirm: confirm, //未实现
luckPop:luckPop, //中奖弹窗
};
//消息展示
function showMessage(content, options) {
megTmp = "<div class='nspop_megcontainer myactive' >" +
"<div class='main'>" +
"<div class='textContent'>{{content}}</div>" +
"</div>" +
"</div>";
if(typeof options == 'undefined') options = {};
options.bottom = 280;
options.timeout = 2000;
options = remove(options);
//消息文本
options.scope.content = content;
msg(options,function(result){
$timeout(function () {
result.remove(); //移除消息展示
options.scope.$destroy(); //摧毁作用域
}, options.timeout);
})
};
//中奖
function luckPop(name,number,callback){
megTmp= '<div class="lottery zoomIn">' +
'<div class="lottery_cont">' +
''+
'</div>'+
'<div class="lottery_text">'+
'<div>期号：{{number}}</div>'+
'<div>{{name}}</div></div></div>'+
'<div ng-click="cancel()" class="lottery_bg"></div>';
var options = {};
options.bottom = 0;
options.timeout = 0;
options = remove(options);
options.scope.name = name;
options.scope.number = number;
options.scope.click = function(){
callback();
options.scope.cancel();
};
options.scope.cancel = function(){
options.scope.mode.remove(); //移除消息展示
options.scope.$destroy(); //摧毁作用域
};
msg(options,function(result){
options.scope.mode = result;
})
}
//确认框
//params:{'okText':'确定','cancelText':'取消',template:'是否确定删除该商品？'}
function confirm(params,success,error){
if(params.template == '') return;
megTmp = '<div class="confirmPop">'+
'<div class="confirmPop_box">'+
'<div class="confirmPop_content">'+
'<div class="confirmPop_wrap">'+
'<div class="confirmPop_img">'+
'</div>'+
'<div class="confirmPop_text">{{template}}</div>'+
'<div class="confirmPop_btn">'+
'<div class="confirmPop_btn_left" ng-click="cancel()">{{cancelText}}</div>'+
'<div class="confirmPop_btn_right" ng-click="confirm()">{{okText}}</div>'+
'</div></div></div></div></div>'+
'<div class="pop_bg"></div>';
var options = {
bottom:0,
timeout:0
};
options = remove(options);
options.scope.okText = params.okText || '确定';
options.scope.cancelText = params.cancelText || '取消';
options.scope.template = params.template;
options.scope.confirm = function(){
options.scope.mode.remove(); //移除消息展示
options.scope.$destroy(); //摧毁作用域
if(typeof success == 'function') success();
};
options.scope.cancel = function(){
options.scope.mode.remove();
options.scope.$destroy();
if(typeof error == 'function') error();
};
msg(options,function(result){
options.scope.mode = result;
})
}
//消息创建
function msg(options,callback){
var megPromise = $q.when(compileTmp({
template: megTmp,
scope: options.scope,
appendTo: angular.element(document.body)
}))
megPromise.then(function (result) {
dialog.megs.push(result);
result.css("bottom", options.bottom + "px");
callback(result);
})
}
//移除和继承
function remove(options){
//移除已存在的消息展示
angular.forEach(dialog.megs, function (item, index) {
item.remove();
});
options = angular.extend({
bottom: options.bottom, //下边距离
scope: $rootScope.$new(), //创建一个继承自根的作用域
timeout: options.timeout //多少秒后自动隐藏
}, options);
return options;
}
//编译模板
function compileTmp(options) {
var tem = $compile(options.template)(options.scope);
if (options.appendTo) {
options.appendTo.append(tem);
}
return tem;
};
return dialog;
})
弹窗使用的图标
顺便在分享一下AngularJs图片懒加载模块
Git地址 https://github.com/Treri/me-lazyimg
简单介绍一下使用
JS引入
<script type="text/javascript" src="js/ me-lazyimg.js"></script>
Html代码
<!--滚动区域内-->
<div lazy-container>
</div>
好了，这次的代码分享就到这里结束了，明年见
2016-12-30 21:40
