H5W3
当前位置:H5W3 > 问答 > 正文

layer在自定义html弹窗只能以字符串的形式吗

layer在自定义html弹窗只能以字符串的形式吗?

$('#lingqu').bind('click',function (e) {
var div = '<div >\n' +
'                        <p>领取数据类型</p>\n' +
'                        <select id="dataType">' +
'<option value="">请选择</option>' +
'<option value="1">一</option>' +
'<option value="2">二</option>' +
'<option value="3">三</option>' +
'</select>\n' +
'                    </div>\n' +
'                    <div  >\n' +
'                        <p>领取数据数量</p>\n' +
'                        <input id = "receiveNum" placeholder="领取数据数量">\n' +
'                    </div>'
layer.open({
title: '领取选择', //头显示名称
type: 1, //Page层类型
skin: 'layui-layer-rim', //加上边框
area: ['400px', '300px'], //宽高
content: div, //弹窗内的html
btn: ['确定'] //按钮,可以给多个,按钮还有种类以及排列方式,可在layer官方文档中找到
,yes: function(index, layero){ //第一个按钮的回调函数
var txtReason = top.$('#receiveNum').val(); //可以获取到id为receiveNum的input框内输入的内容
var sel = top.$("#dataType option:selected").val(); //可以获取到弹出层中id为dataType的select框的选中option的value
var sel = top.$("#dataType option:selected").text(); //可以获取到弹出层中id为dataType的select框的选中option的文本
alert(sel);
}
});
})

回答

你也可以把 DOM 放在文档流中,使用 script 或者 template 标签,然后在 jQuery 中使用 $(selector).html() ,取得字符串。或者你也可以使用一些模板引擎,像 layui、art-template 这些轻量引擎。
举个🌰:

<script tyle="text/html" id="js-dialog-template">
    <div>
        弹窗内容
    </div>
</script>
var div = $('#js-dialog-template').html();

未经允许不得转载:H5W3 » layer在自定义html弹窗只能以字符串的形式吗

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址