Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
3.7k views
in Technique[技术] by (71.8m points)

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

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

$('#lingqu').bind('click',function (e) {
        var div = '<div style="margin:10px;border:0;padding:0;" >
' +
            '                        <p>领取数据类型</p>
' +
            '                        <select style="text-align:center;vertical-align:middle;width:300px;height:30px" id="dataType">' +
            '<option value="">请选择</option>' +
            '<option value="1">一</option>' +
            '<option value="2">二</option>' +
            '<option value="3">三</option>' +
            '</select>
' +
            '                    </div>
' +
            '                    <div  style="margin:10px;border:0;padding:0;" >
' +
            '                        <p>领取数据数量</p>
' +
            '                        <input style="text-align:center;vertical-align:middle;width:300px;height:30px" id = "receiveNum" placeholder="领取数据数量">
' +
            '                    </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);

            }
        });
    })

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

你也可以把 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();

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...