sort：前端实用记录1

H5原生的元素选择器使用

document.querySelector(".class1"); //返回选中的第一个元素
document.querySelectorAll(".class1"); //返回选中的所有元素

jQuery未来DOM事件绑定

//普通事件绑定是监听不到未来动态DOM的
$('li a.class1').click(function(){
    console.log($(this).attr('href'))
    return false
});

//改用 on方法 绑定 
$("li a.class1").on('click', function(){
    console.log($(this).attr('href'))
    return false
})

//测试发现上面的on写法也只能普通监听
//需要换个写法
$('li').on('click', 'a.class1', function(){
    console.log($(this).attr('href'))
    return false
})

layui按钮禁用的正确姿势

// layui-btn-disabled类只是改变了样式，需要再加上原始disabled属性
<button class="layui-btn layui-btn-xs layui-btn-disabled" disabled lay-event="edit">edit</button>

layui弹窗iframe传值

• 父页面->子页面

layer.open({
     type:2 
    ,content:'<%=path%>/xxx/xxx.jsp'
    ,area: ['700px','350px']
    ,title:'xxx'
    ,success:function (layero,index) { 
        //1 隐藏域传值
    	//var body = layer.getChildFrame('body', index);
        //body.contents().find("#userId").val(data.userId);	
        //body.contents().find("#orgUserId").val(data.orgUserId);
        //2 直接调用子页面方法
    	var child = window[layero.find('iframe')[0]['name']];
    	child.saveParentData(data); 
    }
})

• 新问题
  使用方式2，子页面layui.use中使用传过来的初始就需要使用时会获取不到传的值，因为执行顺序问题？
  • 原因
    child.xxx() 时，layui.use块是已经执行完毕的，所以在子页面初始layui.use块中就使用传递的值是没有的（比如后台加载数据，操作需要依赖layui）
• 解决办法1
  直接把xxx方法定义给layui对象，在layui.use块中直接完成所需要的操作。

父页面：
,success:function (layero,index) { //子页面ifram传值
	var iframeWin = window[layero.find('iframe')[0]['name']];
	//console.log(iframeWin)
	iframeWin.layui.initFormData(data.orgUserId, data.userId); //调用子页面方法
}
子页面：
layui.use([ 'layer', 'form', 'element' ], function() {
	var layer = layui.layer, form = layui.form, element = layui.element ;
	
	//加载表单所需信息
	layui.initFormData = function(orgUserId, userId){
		console.log('parentData:', orgUserId, userId)
		ajaxPost('/xxxInfo.do'
			, {
				'orgUserId': orgUserId,
				'userId': userId
			}
	  		, function(resp){
	  			if(resp.success){
	  				//获取4个表单数据
	  				console.log(resp)
	  			}else{
			  		layer.msg('code: '+resp.errorCode+'<br/>msg: '+resp.errorDescription, {icon: 5});
	  			}
	  		}
	  	);
	};
});

• 解决办法2
  也是一样，在xxx()中完成需要的操作。
  只是如果需要进行的操作不依赖layui模块的话，可以直接定义在layui.use外。

layui修改表单label长度

width和margin-left按需调整

• 正常表单

.layui-form{
	margin-top: 10px
}
.layui-form-label {
	width: 100px;
}
.layui-input-block {
	margin-left: 110px;
}

• pane风格表单

.layui-form{
	margin-top: 10px
}
.layui-form-pane .layui-form-label{
	width:120px
}
.layui-form-pane .layui-input-block {
	margin-left: 120px;
}