弹层之美
layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中,layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能,且格外注重性能的提升、易用和实用性,正因如此,越来越多的开发者将媚眼投上了layer(已被7502828人次关注)。layer 甚至兼容了包括 IE6 在内的所有主流浏览器。她数量可观的接口,使得您可以自定义太多您需要的风格,每一种弹层模式各具特色,广受欢迎。当然,这种“王婆卖瓜”的陈述听起来总是有点难受,因此你需要进一步了解她是否真的如你所愿。
layer 采用 MIT 开源许可证,将会永久性提供无偿服务。因着数年的坚持维护,截至到2017年9月13日,已运用在超过 30万 家 Web 平台,其中不乏众多知名大型网站。目前 layer 已经成为国内乃至全世界最多人使用的 Web 弹层解决方案,并且她仍在与 Layui 一并高速发展。
想了解更多请访问layer官网 https://layer.layui.com/
我们开始使用吧,下面是layer应用实例
功能说明:通过点击button按钮,出现弹框,获取select选中的内容并处于编缉状态,然后提交给后台处理
Html code
<div>
<button class="btn btn-default" onclick="Edit_script_lib()>编辑</button>
</div>
<div>
<select class="btn btn-default" id="lib_Id">
<option>-----------</option>
{% for lib in libs %}
<option class={{ lib.remark }} value="{{ lib.libname }}" id="{{ lib.id }}>{{ lib.libname }}</option>
{% endfor %}
</select>
</div>
JScript code
首先引用layer.js
<script src="/static/js/layer/layer.js"></script>
function Edit_script_lib() {
edit_lib_name = $("#lib_Id").val();
edit_lib_remark = $("#lib_Id").find("option:selected").attr("class");
lib_id = $("#scriptlibId").find("option:selected").attr("id");
layer.open({
type: 1,
area: ['550px', '360px'],
shadeClose: true, //点击遮罩关闭
content: '<div>\n' +
' <div class="form-group" style="margin-top: 20px;margin-left: 130px">\n' +
' <label style="float: left;margin-top: 7px">脚本库名称 :</label>\n' +
' <input type="text" maxlength="128" style="width: 200px;" class="form-control" id="lib_name" value='+edit_lib_name+'>\n' +
' </div>\n' +
' <div class="form-group" style="margin-top: 20px">\n' +
' <label style="float: left;margin-left: 130px">脚本库说明 :</label>\n' +
' <input maxlength="256" style="width: 200px;" class="form-control" id="lib_remark" value='+edit_lib_remark+'></input>\n' +
' </div>\n' +
' <div class="form-group">\n' +
' <button type="button" class="btn btn-success" onclick="Sumbit_script_lib()" style="width: 200px;margin-top: 50px;margin-left: 210px">创建</button>\n' +
' </div>\n' +
'</div>'
})
}
function Submit_edit_script_lib() {
var name = $("#lib_name").val();
var remark = $("#lib_remark").val();
$.ajax({
type: "post",
url: "/ops/edit_script_lib/",
dataType: 'json',
data: {
"lib_id": lib_id,
"lib_name": name,
"lib_remark": remark
}
});
layer.closeAll();
}