这个东西还真是浪费了不少时间,网上一些文章写的吧 不知道是原来版本那么做 还是以讹传讹 反正都不太好用
只能大致参考下 好了 进入整体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!--  注意这里 lay-filter 是监听时 或者其他操作时用的 选取用的字段 类似jq的 $('#id')-->
<!--  注意这里 lay-verify 是你自定义的验证规则名称 这个是必须 如果是简单验证 就写上预设值 就好了 -->
<select name="city" lay-filter="city" lay-verify="city-verify">
  <option value="010">北京</option>
  <option value="021" disabled>上海（禁用效果）</option>
  <option value="0571" selected>杭州</option>
</select>    

<!-- 可以是submit提交按钮 也可以是普通按钮 但是呢 必须加上 lay-submit lay-filter="*" 其中 lay-submit 也是不可少的  要不就检测不到提交事件-->
<input type="submit" name="submit" lay-submit lay-filter="*" value="提交">

<script>
//第一步 写自定义规则
form.verify({
    cateid: function (value) {
        if (value == "") {
            return "必须选择一级栏目";
        }
    },
    contact: function (value) {
        if (value.length < 4) {
            return '内容请输入至少4个字符';
        }
    },
    phone: [/^1[3|4|5|7|8]\d{9}$/, '手机必须11位，只能是数字！'],
    email: [/^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/, '邮箱格式不对']
});

//第二部 提交监听事件
//只有这样 验证才会执行  submit(*) 就是提交按钮的 lay-filter="*" 这个可以自行更改
//其实回调函数 只是有其他操作要做的时候用的 如果只是验证的话 第二个参数可以不写
form.on('submit(*)', function (data) {
    params = data.field;
    //alert(JSON.stringify(params))
    submit($, params);  //这个是提交按钮 当验证通过后就提交
    return false;
})
//其实可以直接这么用
//form.on('submit(*)');
</script>

需要做一个滚动后,头部固定的页面
这个用到 css 里的 fixed 就可以实现了

1
2
3
4
5
6
7
8
9
10
11

.headDiv {
  position: fixed;
  /*固定定位*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border: 1px solid blue;
}

简介

在使用mui时,遇到 ul li 就会有下边框,可是又跟 border 没有关系, 只要去掉 position: relative 就可以了. 刚开始图省事就这么做了,可后面的问题多多.最后不得已翻看源码才知道,这个东西是拿伪类弄出来的.其实以前也见过,就是没仔细研究,这次遇到了,所以弄明白点了.

讲解

先讲这两个,比较常见的.

“:before” 伪元素可以在元素的内容前面插入新内容。
“:after” 伪元素可以在元素的内容后面插入新内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

/*
下面就是困扰我的那行代码,通过变形拉伸,露出页面底色,看上去就是绘制出一个横线.
*/
.mui-table-view
{
    position: relative;

    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;

    list-style: none;

    background-color: #fff;
}
.mui-table-view:after
{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 1px;

    content: '';
    -webkit-transform: scaleY(.5);
            transform: scaleY(.5);

    background-color: #c8c7cc;
}
.mui-table-view:before
{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    content: '';
    -webkit-transform: scaleY(.5);
            transform: scaleY(.5);

    background-color: #c8c7cc;
}

前言

这里只总结了一些只针对APP页面开发的框架.像妹子UI,ZUI,semantic-ui等一些既能开发pc端页面,也能开发APP页面的框架,就不在这里记录了. 可以看这里 不错的前台框架 总结 Semantic UI,slicy,Amaze ui 等等

总结介绍

MUI: 这是个新的UI,应该是国产的.而且还有一整套解决方案.而且有个不错的IDE,所以这个以后可以试试.后台用的是自己的 HTML5+替代手机浏览器内核也就是增强版,Native.js为调用手机硬件的js插件

参考文档
MUI网站
官方主网站

Ionic: 这个不光是个UI库 他和 AngularJS 结合特别深.所以可以算是一套APP解决方案.其他的 UI框架都必须用jquery,Zepto.js,React 等js框架才能使用.

参考文档
官方网站
Ionic开发实战
ionic 安装 | 菜鸟教程

framework7: 这个刚开是因为类似IOS原生页面受到瞩目,而且速度很快.现在也支持安卓,不过貌似不是那么特别好.

参考文档
官方网站

Mint UI: 基于 Vue.js 的移动端组件库 这个可以快速开发不过就是太简单了 不够好看
官方网站

前言

今天遇到个很bug的问题.在chrome里当窗口很小的时候,一个div就会偏移,但是当用鼠标调正窗口,又会变好.而且只有在chrome下有这个问题,最后确认原来是margin-top失效的原因.再次说明: 上面那个问题,并没有因使用overflow:hiden而解决.只是放在火狐里这个bug不存在了.后来是通过删除了子容器的 float:left 解决的.但到底是哪里冲突还是不明白.但下面这些方法解决一些浮动漂移是有用的.

问题的解决

正统说法:

1：“在CSS2.1中，水平的margin不会被折叠；垂直margin可能在一些盒模型中被折叠…”
2： 当第一个层浮动，而第二个没浮动层的margin会被压缩，详见–浮动元素后非浮动元素的margin的处理。

一 如果是两个容器并列,一般出现问题,是因为第一个容器加了浮动,第二个没有加 所以造成第二个margin出问题.解决办法是在第二个容器前增加一个<divstyle="clear:both;"></div>.像下面这样,或者给box2也增加float;