@hotjp
2017-08-15T09:44:50.000000Z
字数 13621
阅读 5449
文档
[注]此文档为最新版文档,旧版文档地址
artTemplate
mui
AmazeUI
est
插件:
日历 Simple-Calendar
倒计时 DownCount
二维码相关 qrcode
html2canvas
表单验证 validator
时间处理 momentjs
PC插件:
分页 createPage
放大镜 Magnifier
懒加载 jquery_lazyload
滑动验证 slideunlock
瀑布流 Masonry
图片上传 WebUploader
微信插件:
图片上传 uploadImg
滑动验证 sliderUnlock
使用artTemplate-3.0,原生语法版本,文档地址
使用less,工具库使用百度提供的est,编译less需输出map文件。
在less中定义了一些基本色,字体用5种黑色,
@gray-darker: lighten(#000, 17%); // #2b2b2b
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 40%); // #666
@gray-light: lighten(#000, 60%); // #999
@gray-lighter: lighten(#000, 93.5%); // #eee
主色调
@c-main: #4680d1; // 主色调
@c-main-light: #7ca9ea; // 浅主色调
状态色
@c-success: #56d146; // 成功
@c-info: #4680d1; // 信息 default和主色调相同
@c-warn: #f49127; // 警告
@c-error: #df3a3a; // 错误
价格颜色
@c-price: #ff5454;
icon颜色
@c-icon: #ffaa06;
微信端的工具类更多些,可去样式表头部查看
.l{
float: left;
}
.r{
float: right;
}
.fix{
*zoom: 1;
*clear: both;
}
.fix:before, .fix:after {
display: table;
clear: both;
content: '';
}
.pr{
position: relative;
}
.hide{
display: none;
}
除了前端框架的图标外,没有新引入的图标库,项目中用到的图标需切图完成。
page
定义了一个全局变量page作为页面数据命名空间,在其中存放页面中需要用到的变量,减少全局变量的污染。
page.url
对URL的操作
location.href = "http://192.168.50.114:8083/m/ec/goods/index.html?id=1"
// 返回完整url
page.url.url // http://192.168.50.114:8083/m/ec/goods/index.html?id=1
// 返回url参数
page.url.paras // {id: "1"}
// 返回不包含参数的url
page.url.pathname // http://192.168.50.114:8083/m/ec/goods/index.html
// 取URL参数
page.url.get('id') // 1
// 设置URL参数
page.url.set({'kw':'abc'}) // http://192.168.50.114:8083/m/ec/goods/index.html?id=1&kw=abc
// 重构url
page.url.build()
// 移除url参数
page.url.remove('id') // http://192.168.50.114:8083/m/ec/goods/index.html?kw=abc
page.page
页码 默认0,应在success里做自增操作
page.pageSize
每页显示个数,默认10
getJson(url,param,success,error)
异步json获取
/**
* 异步json获取
* @param {String} url 接口地址
* @param {Object} param 发送数据
* @param {Function} [success] 成功回调
* @param {Function} [error] 错误回调
*/
getJson('/ec/goods/doFindGoods.do', {
goodsId: 129
}, function (res) {
if(!res.success){
mui.toast(res.errorMessage);
setTimeout(function(){
mui.back();
},1000);
}
})
getWidgetData(widgetName,type,success,error)
根据组件名称返回数据
[注] getWidgetData的 接口地址为/comm/widget/doSearchWidgetData.do,部分组件的接口地址不是这个地址,可自行封装。
/**
* @param widgetName 组件中文名
* @param type 组件数据类型
* @param {Function} [success] 成功回调函数(返回data)
* @param {Function} [error] 出错回调
*/
getWidgetData('PC-首页顶部轮播下方多图广告位',2, function (res) {
var data = {
vars: vars,
xData: res.data.widgetData
};
renderTmp('#topSilderad', 'topSilderadTpl', data);
lazyLoad.refresh(true);
});
renderTmp(selector,tmpId,data,callback)
渲染模板,追加数据,传入callback时返回原生dom+html,不做数据追加处理,需手动追加。使用方式:
/**
* @param {String} selector 原生选择器,只处理第一个元素
* @param {String} tmpId 模板id,不需要加 #
* @param {JSON} data 后台返回的json数据
* @param {Function} [callback] 回调函数
*/
renderTmp('#topSilderad', 'topSilderadTpl', data);
或者:
renderTmp('#topSilderad', 'topSilderadTpl', data,function(el,html){
el.innerHTML += Tpl;
if(el.className.indexOf('show') < 0){
el.className += ' show';
}
});
toNewPage(href,cantBack)
处理页面跳转,
/**
* @param {String} href 要跳转的URL
* @param {Boolean} [cantBack] true 是否禁止页面返回,替换url,默认false,为true时禁止页面返回
*/
toNewPage('http://www.baidu.com',true);
cookie.set(key, val, dur)
key 键 ,val 值 ,dur过期时间(毫秒)
cookie.get(key)
cookie.set('name','Bob',10000);
cookie.get('name');
使用前先判断浏览器支持情况
local.set(key,val,dur); key 键,val 值,dur过期时间(小时)
local.get(key);
local.set('name','Bob',24);
local.get('name');
imgFormat(url,format,[isZip],[notForImg])
图片格式化集成错误图片替换,返回一个拼接好的URL
,输出时不转义输出,artTemplate需要加#,使用方式:
/**
*@param {String} url 图片路径,
* @param {String}format 后台拦截器裁剪尺寸
*@param {Boolean} isZip 是否使用压缩(否的话原图输出),
*@param {Boolean} notForImg只返回路径,不拼接img标签需要的onerror
*/
<img src="<%=#imgFormat(xData[i], '750x750.png',false)%>">
dateFormat(date, format)
格式化时间
/**
*@param {String} date 时间 格式为"2017-05-25 00:00:00"或"2017/05/25 00:00:00"
*@param {String} format格式 'y'年, 'M'月份, 'd'日, 'h'小时, 'm'分, 's'秒 , 'q'季度 , 'S'毫秒
*/
dateFormat("2017-05-25 00:00:00",'yyyy-MM-dd hh:mm:ss')
moneyFormat(num, [format])
格式化金额,每一个设置价格的地方都必须要使用moneyFormat
/**
* @param num 金额
* @param [format] 需保留的小数,不设置时原样输出
*/
moneyFormat(3000,2) // "3,000.00"
Base64
加密解密toUri(str) 加密
fromUri(str) 解密
toUri(339) // "MzM5"
fromUri("MzM5") // "339"
checkLogin(toLogin,callback)
判断是否登录
/**
* 判断登录
* @param toLogin 如果未登录,是否进入登录页面,默认false
* @param callback 如果是已登录状态时的回调函数
*/
checkLogin(function(){
alert('已登录才执行')
})
rmoney(s)
价格转换浮点型 把moneyFormat格式化后的金额转成number类型
rmoney('20,100') // 20100
autoGrow(selector)
textarea内容超出自动扩展,不会出现滚动条
定位
若为微信端,可使用微信定位,moClient='wx'即可,否则使用百度定位
var moClient = $('#moClient').val();
jsLocation(moClient, function (city) {
$('#userAddr').html(city);
});
vars
定义路径
var vars = {
root: "${vars.root}", // 根目录
clientRoot: "${vars.clientRoot}", //根目录或根目录\m,包含root
uploadRoot: "${vars.uploadRoot}", //图片上传路径
resourceFolder:"${vars.resourceFolder}", // 资源路径 \resources
theme: {
id: "${vars.theme.id}", //模板id emall-> default
root: "${vars.theme.root}" //资源路径 \resources
}
};
使用方式:
<a href="<%=vars.clientRoot%>/ex/goods/index.html"></a>
<link href="${vars.theme.root}/resources/css/mui.picker.css" rel="stylesheet"/>
日历插件
Simple-Calendar无依赖,只有js和css文件。 配置项众多,添加标记的话需要设置option.showMark和mark两项,实例化后追加标记需要调用addmark和updateMark方法。
<div id='container'></div>
<script>
var options = {
width: '500px',
height: '500px',
language: 'CH', //语言
showLunarCalendar: true, //阴历
showHoliday: true, //休假
showFestival: true, //节日
showLunarFestival: true, //农历节日
showSolarTerm: true, //节气
showMark: true, //标记
timeRange: {
startYear: 1900,
endYear: 2049
},
mark: {
'2016-5-5': '上学'
},
theme: { //主题颜色
changeAble: false,
weeks: {
backgroundColor: '#FBEC9C',
fontColor: '#4A4A4A',
fontSize: '20px',
},
days: {
backgroundColor: '#ffffff',
fontColor: '#565555',
fontSize: '24px'
},
todaycolor: 'orange',
activeSelectColor: 'orange',
}
}
var myCalendar = new SimpleCalendar('#container',options);
</script>
倒计时插件
DownCount可从天开始,因需要传入服务器时间,在原来插件基础上做了修改:
<p class="countdown">
<span class="hours">00</span>时
<span class="minutes">00</span>分
<span class="seconds">00</span>秒
</p>
<!--span上的class为必须-->
<script>
$('.countdown').downCount({
date: date, //结束时间
offset: +8, //时区
now_date: now_date //开始时间、服务器时间
}, function () {
// 倒计时执行完回调函数
});
</script>
二维码生成
依赖qrcode.js (实现二维码数据计算的核心类)
和jquery.qrcode.js(把qrcode用jquery方式封装起来的,用它来实现图形渲染,支持canvas和table两种方式),使用方式:
$('#output').qrcode('http://www.jerei.com')
html2canvas
html2canvas html转成图片 因直接截图不清晰,所以在源码基础上做了调整,传参时宽高要乘2,html里的图片不要用百分比设置宽高,否则会缩小变形。
var ct = $('.mui-content');
var width = ct.width();
var height = ct.height();
html2canvas(ct, {
timeout: 300,
width: width * 2,
height: height * 2,
onrendered: function (canvas) {
// 回调
}
});
表单验证
一开始手写验证,随后引入validator.js,支持字符串验证和表单验证,可拓展,相比源码,新增加 is_idCard
身份证验证, 使用如下:
<!--字符串验证-->
<script>
var v = new validator();
v.isEmail('wowohoo@qq.com');
v.isIp('192.168.23.3');
</script>
<!--表单验证-->
<form id="form">
<div>
<label for="email">邮箱验证</label>
<input type="email" name="email" id="email" class="" value="">
</div>
<div>
<input type="radio" name="sex" value="1">
<input type="radio" name="sex" value="2">
</div>
<input type="text" name="phone" value="">
<button type="submit">提交</button>
</form>
<script>
// 表单验证,submit时验证
var v = new Validator('form', [{
//name 字段
name: 'phone',
display: "你输入的{{phone}}不是合法手机号|不能为空|太长|太短",
// 验证条件
rules: 'is_phone|required|min_length(2)|max_length(12)'
},{
//name 字段
name: 'email',
display: "你输入的{{email}}不是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|required|min_length(2)|max_length(12)'
}, {
//name 字段
name: 'sex',
display:"请你选择性别{{sex}}|请输入数字",
regexp_num:/^[0-9]+$/,//增加验证条件
// 验证条件
rules: 'required|regexp_num'
}], function(obj, evt) {
if (obj.errors) {
// 判断是否错误,obj.errors为数组
console.log(obj.errors)
}
});
// 手动验证
v.validate()
</script>
时间处理函数
momentjs(momentjs中文网),可支持多语言,对时间进行格式化,计算相对时间,日历时间
使用mui作为前端框架,官方文档地址
使用rem做单位,设计图宽度750px,定义html的font-size为 13.33333333vw,即1rem=100px。body的font-size为0.32rem,即16px。
对mui的hack在mui.util.less中。
使用雪碧图,切图注意rem的小数像素问题。
渲染模板时,被追加数据的元素需要加dataContent的class,主要作用设置透明度为0,追加完数据后会自动加show的class,透明度置为1,使用方式:
<ul class="sort_left dataContent" id="sortListLeft"></ul>
jQuery3.1.0 无ajax无animate
若要使用ajax的话,使用mui提供的ajax方法
mui.ajax({
type: 'POST',
url: url,
data: param,
dataType: 'json',
success: function (res) {
},
error:function(msg){
});
debug
真机调试不方便,引入debug,在原来基础上做了封装,使用时在URL上拼接"_debug=true",js需console要输出的信息
返回强制刷新
ios端有返回上一级页面不刷新的问题,此方法可强制执行js,但由后端模板引擎渲染的页面无法刷新
window.addEventListener('pagehide', function(e) {
var $body = $(document.body);
$body.children().remove();
// 要等到回调函数完成,用户按返回才执行script标签的代码
setTimeout(function() {
$body.append("<script type='text/javascript'>window.location.reload();<\/script>");
});
});
loading
进度条_num 判断进度条显示状态 change 改变进度条状态 check 检查进度条状态
[注]进页面会有默认的loading,若页面有getJson请求,则会在请求完毕后自动关闭,若没有需手动关闭
loading.ing(); // 进度条显示
loading.done();// 进度条隐藏
reloadPull(selector)
清空重置上拉加载 需要手动设置页码以及清空dom,会自动触发一次上拉
占位图
可以手动设置在元素上加dataContent和seize的class,然后设置高度,或者用js设置在getJson/getWidgetData时多传一个参数,同时被追加的元素加data-height属性,使用如下:
<ul class="sort_left dataContent seize" id="sortListLeft"></ul>
<style>
.sort_left{height:4rem};
</style>
或者:
<ul class="sort_left dataContent" data-height="4rem" id="sortListLeft"></ul>
<script>
getWidgetData(data.name, data.datatype, function (res) {
var widgetData = {
vars: vars,
xData: res.data.widgetData || null
};
renderTmp(el, data.tplid, widgetData);
lazyLoad.refresh(true);
},'#sortListLeft');
</script>
toast(message, type)
弹出提示
/**
* toast
* @param {string} message 弹出字符串
* @param {string} type success/info/warn/error 四种类型
*/
tosat('some message','success')
懒加载
使用mui提供的懒加载,每次新增图片都要调用refresh方法更新,初始化懒加载的代码在common中,若要替换图片,可到common中修改:
// common
var lazyLoad = mui('body').imageLazyload({
placeholder: '/resources/images/placeholder.png',
autoDestroy: false
});
使用方式:
<img data-lazyload="image.jpg">
<script>
lazyLoad.refresh(true);
</script>
图片上传
微信端的图片上传是把图片转成base64格式再上传,依赖jQuery版本为1.11.0,支持裁剪,需要的文件在\include\c_multi_img_upload.ftl中,缺点是如果一次上传多张或图片过大,容易断开连接,可以把压缩比率调小点,使用方式:
$(function () {
uploadComponent._options.width = 350; //裁剪区域宽高
uploadComponent._options.height = 350;
uploadComponent._options.noclip = true; // 是否裁剪
uploadComponent._options.rate = .66; // 压缩比率
uploadComponent.init();
});
sliderUnlock()
滑动验证验证后page.flag等于1,否则等于0
<div class="slider" id="range">
<div class="label">向右滑动验证</div>
<div class="track-on" id="track" >
<div class="bg-green">欢迎登陆英纳维胜商城</div>
</div>
<div class="button-on" id="btn" >
<div class="icon" id="icon"></div>
<div class="spinner" id="spinner">成功</div>
</div>
</div>
<script>
sliderUnlock('#range');
</script>
pageInit
中
function pageInit() {
// 页面代码
}
使用Amaze UI作为前端框架,官方文档地址
相比微信端,PC端less定义的基础样式更多,
@support-ie-version: 8; // 支持的浏览器版本
@support-html5: true; // 支持HTML5
@default-font-size: 16px; // 默认字号
@default-border-width: 1px; // 默认边框宽度
@default-border-radius: 2px; // 默认圆角
@default-transform-duration: .2s; // 默认动画时长
// font 字体
@code: Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace;
@sans-serif: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif;
@serif: Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif;
@body-bg:#f4f4f4; //body
图片上传
使用百度提供的 WebUploader 0.1.5版本
定义了webupload(btn,list,num)方法,btn 上传按钮 , list 追加图片的列表,每个item中.info存放图片url , num 允许上传图片的个数,使用方式:
<div class="upLoad_list"></div>
<div class="upload_btn">
<span class="icon">+</span>
</div>
<script>
webupload('upload_btn','upLoad_list',3);
</script>
其中,upLoad_list和upload_btn为必要结构,图片上传后的URL存放在每个file-item的span.imgUrl中
瀑布流
使用Masonry,瀑布流的懒加载使用imagesLoaded
var msny=$('#postingsList').masonry({ //初始化
itemSelector: '.postings_item'
});
// 新增图片后更新
msny.imagesLoaded().progress( function(instance, image) {
if(!image.isLoaded ){
$(image.img).attr('src',vars.theme.root+"/resources/images/placeholder.png").css('height','200px')
}
msny.masonry('layout').masonry('reloadItems');
});
滑动验证
使用jquery.slideunlock.js,在源码基础上做了调整,增加重置方法,
<div id="range">
<div id="slider_bg"></div>
<span id="label">>></span> <span id="labelTip" data-tip="欢迎登录EMALL商城">拖动滑块验证</span>
</div>
<script>
/**
*el 包裹元素
*[callback] 回调函数
*/
sliderUnlock('#range', function (slider) {
// 滑动验证成功
if (!$('#mobile').hasClass('lenPassed')) {
//没填写手机号需填写手机号
toast('请填写手机号', 'warning');
slider.restart(); // 重置
} else if (!$('#mobile').hasClass('passed')) {
toast('手机号格式错误', 'warning');
slider.restart();
} else {
$('.step1 .am-btn').removeClass('am-disabled');
}
});
</script>
懒加载
使用jquery_lazyload,common中做了处理,使用方式与mui的懒加载基本一致:
<img data-lazyload="image.jpg">
<script>
lazyLoad.refresh();
</script>
toast(data,[type],[callback])
仿照mui.toast,结合AmazeUI的模态窗
/**
*data 要弹出的内容 ,
*[type] toast样式 success,error,warning,默认success ,
*[callback] 回调,关闭时执行
*/
toast('请填写手机号', 'warning');
放大镜
基于AmazeUI的插件Amaze UI Magnifier
<figure class="am-magnifier">
<img id="small-image" width="480" height="270" src="images/bing-rect.jpg" alt="Bing rect image">
<div></div>
<div class="am-margin-left-sm">
<img width="1920" height="1080" src="images/bing-rect.jpg" alt="Bing rect image">
</div>
</figure>
<script>
$(function() {
$('#small-image').magnify({
shape: 'rect',
width: 120
});
});
</script>
分页插件
// 分页标志,如果生成过分页则不再重新生成
page.pageFlag = 0;
getJson("/ec/goods/doSearchGoodsByProps.do", {}, function (data) {
// 获取总页数
page.pageCount = data.data.pageCount;
creatPage();
})
function creatPage(){
if(page.pageFlag == 1){
$(".paging").page({
pages:page.pageCount,// 总页数
groups: 5, //连续显示分页数
jump:function(context,first){// 触发分页后的回调
$('#container').empty();
page.page = context.option.curr;
getPageData();
}
});
page.pageFlag = 0;
}
}