1.图片base64.
使用file upload上传图片,可直接转换为64位编码,且在浏览器窗口直接输入该编码可直接打开此文件。但是在开发中遇到直接新开页面打开base64编码结果无法访问的问题。因为浏览器的安全设置,无法直接获取到上传的文件的真实地址。
2.移动端支持和自适应。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
在网页的<head>中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
其中:
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
页头横幅等的图片的宽度都设置成style="width:100%",整个页面在设备上看起来就是全屏的了。
最主要是前3个属性。实际开发中遇到的问题:判断是移动端的时候给head appendChild上边的meta,然后不是移动端的时候或者切换到不需要自适应的页面的时候,就removeChild掉。但是实际设置仍然生效,没有消失。后实在找不到办法,就采用直接改其content中的值的办法。
3.layui--page
- $(function(){
- laypage({
- cont: 'hui-page',
- pages: 18, //总页数
- totalData:630,//总数据量
- everyPage:function(){//每页数据量
- var everyPage = location.search.match(/everyPage=(\d+)/);
- return everyPage ? everyPage[1] : 10;
- }(),
- curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取
- var page = location.search.match(/page=(\d+)/);
- return page ? page[1] : 1;
- }(),
- skin: 'molv', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
- groups: 7 ,//连续显示分页数
- skip: true, //是否开启跳页
- prev: '<', //若不显示,设置false即可
- next: '>', //若不显示,设置false即可
- jump: function(e, first){ //触发分页后的回调
- if(!first){ //一定要加此判断,否则初始时会无限刷新
- location.href = '?page='+e.curr+"&everyPage="+e.everyPage;
- }
- }
- });
- });
4.layui--弹窗。
layer.open({
type: 1,
content: $(
'#id'
)
//这里content是一个DOM,这个元素要放在body根节点下
……
});
id对于的是页面中的隐藏html片段,类似angular的ng-if