layui open传参_layui 打开新页面,并传入参数
layui 打开新页面,并传入参数
使用的 wangEditor 富文本编辑器不带预览的功能，
所以自己实现了下功能；
思路是：
点击打开一个弹窗 or 新页面，
然后页面展示提交后前端页面看到的大概的样子。
涉及到需要把内容传递到打开的 iframe 页面内，
刚好可以利用 layui 携带传参的一个特点。
效果预览：
具体代码实现为：
创建一个 preview.html 预览页面，css 样式来自 wangEditor 官方文档给出的
预览内容/* table 样式 */
table {
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
table td,
table th {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 3px 5px;
}
table th {
border-bottom: 2px solid #ccc;
text-align: center;
}
/* blockquote 样式 */
blockquote {
display: block;
border-left: 8px solid #d0e5f2;
padding: 5px 10px;
margin: 10px 0;
line-height: 1.4;
font-size: 100%;
background-color: #f1f1f1;
}
/* code 样式 */
code {
display: inline-block;
*display: inline;
*zoom: 1;
background-color: #f1f1f1;
border-radius: 3px;
padding: 3px 5px;
margin: 0 3px;
}
pre code {
display: block;
}
/* ul ol 样式 */
ul, ol {
margin: 10px 0 10px 20px;
}
点击事件代码：
layui.use([jquery,form,layer], function(){
var $ = layui.jquery,
layer = layui.layer,
form = layui.form;
///预览
$(#preview).on(click,function() {
var w = ($(window).width() * 0.7);
var h = ($(window).height() - 50);
layer.open({
resize: false,
title: 预览,
shadeClose: true,
area: [w + px, h + px],
type: 2,
content: /common/html/preview.html,
success: function (layero, index) {
var body = layer.getChildFrame(body, index);
body.find(#content).append(editor.txt.html());
}
});
});
});
标签：layer,预览,传入,solid,layui,新页面,table,border
layui 打开新页面,并传入参数 使用的 wangEditor 富文本编辑器不带预览的功能， 所以自己实现了下功能； 思路是： 点击打开一个弹窗 or 新页面， 然后页面展示提交后前端页面看到的大概的样子。 涉及到需要把内容传递到打开的 iframe 页面内， 刚好可以利用 layui 携带传参的一个特点。 效果预览： 具体代码实现为： 创建一个 preview.html 预览页面，css 样式来自 wangEditor 官方文档给出的预览内容 /* table 样式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; } /* blockquote 样式 */ blockquote { display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; } /* code 样式 */ code { display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px; } pre code { display: block; } /* ul ol 样式 */ ul, ol { margin: 10px 0 10px 20px; } 点击事件代码： layui.use([jquery,form,layer], function(){ var $ = layui.jquery, layer = layui.layer, form = layui.form; ///预览 $(#preview).on(click,function() { var w = ($(window).width() * 0.7); var h = ($(window).height() - 50); layer.open({ resize: false, title: 预览, shadeClose: true, area: [w + px, h + px], type: 2, content: /common/html/preview.html, success: function (layero, index) { var body = layer.getChildFrame(body, index); body.find(#content).append(editor.txt.html()); } }); }); }); 标签：layer,预览,传入,solid,layui,新页面,table,border