前端插件flavr的简单使用
2018-11-27 本文已影响29人
___大鱼___
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="./static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="./static/css/style.css" />
<link rel="stylesheet" type="text/css" href="./static/css/animate.css" />
<link rel="stylesheet" type="text/css" href="./static/css/flavr.css" />
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js/flavr.min.js"></script>
</head>
<body>
<div class="demo-block" id="demo-confirm">
<div class="demo-title">Confirm Dialog</div>
<p class="demo-desc">
A confirm dialog with two preset buttons
</p>
<div class="demo-actions">
<a href="#" class="btn btn-default btn-code">Code</a>
<a href="#" class="btn btn-default btn-demo">Demo</a>
</div>
<div class="demo-code">
</div>
</div>
</body>
<script>
new $.flavr({ content : '确定要打印 <h1 style="color:red">大鱼</h1>吗？',
dialog : 'confirm',
buttons: {
danger: {
text: '确定',
style: 'danger',
action: function() {
// 调用layer加载框
var layer_index = parent.layer.load(2, {
shade: [0.01,'#fff'] //0.1透明度的白色背景
});
$.ajax({
url: '{% url '' %}',
type: 'GET',
data:{
BarCode: selectRow.BarCode
},
success: function (e) {
parent.layer.close(layer_index);
console.log(e);
if(e.status == 0){
new $.flavr('打印成功！');
}else{
new $.flavr(e.message);
}
},
error: function () {
parent.layer.close(layer_index);
new $.flavr('请求失败！');
}
})
}
},
cancel: {
text: '取消',
style: 'default'
}
},
onConfirm : function(){
}
});
</script>
</html>
