实习第四天

layer口号是:由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案。
可以看出layer是一个用户界面设计框架,弹出层是他的一大特点,我们公司现在的项目对于弹框,弹出层的设计都是使用layer。使用方法也是非常的简单好理解。

layer.open({
  type: 2,
  title: '聊天室',
  area: ['500px', '600px'],
  fix: false,
  shadeClose: true,
  border: [0],
  shade : [0.9, '#000'],
  content: 'index.html'
});

这段代码是一个类似qq聊天窗口:
实习第四天_第1张图片
这边拿出两个参数介绍一下:
1、type: type - 基本层类型

类型:Number,默认:0

layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

2、 area: area - 宽高

类型:String/Array,默认:'auto'

在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: '500px',高度仍然是自适应的。当你宽高都要定义时,你可以area: ['500px', '300px']

3、content: content - 内容

类型:String/DOM/Array,默认:''

content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。

这是layer API帮助文档:http://layer.layui.com/api.html

在布局的时候最好使用百分比的形式,不固定宽高,外框设计时:

html,body{
    width:100%;
    height:100%;
}
#container{
    width:100%;
    height:100% 
}

jQuery中拿到某个元素的高度:

$('').height();

**
input中改变placeholder(占位符)文字颜色的方法:

/*修改placeholder的颜色*/
        input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
               color: #28A1DE;  
        }

        input::-moz-placeholder { /* Mozilla Firefox 19+ */
               color: #28A1DE;
        }

        input:-ms-input-placeholder,
            textarea:-ms-input-placeholder {
                color: #28A1DE;
        }

        input::-webkit-input-placeholder,
            textarea::-webkit-input-placeholder {
                color: #28A1DE;
        }

你可能感兴趣的:(实习第四天)