*** 【Layer】 ****************************************************************************************************************************
Layer彈窗：
layer.alert('彈框顯示的內容',{icon:2});
【警告感嘆號:0，打鉤icon:1，叉叉icon:2，問號icon:3，已鎖定icon:4，苦臉icon:5，笑臉icon:6，警告感嘆號icon:7】
layer.alert('墨綠風格，點擊確認看深藍', {
skin: 'layui-layer-molv' //樣式類名 自定義樣式
,closeBtn: 1 // 是否顯示關閉按鈕
,anim: 1 //影片型別
,btn: ['重要','奇葩'] //按鈕
,icon: 6 // icon
,yes:function(){
layer.msg('按鈕1')
}
,btn2:function(){
layer.msg('按鈕2')
}});
layer.confirm（param1,param12,param13,param14）
layer.msg("")
layer.msg("you are the best!",{icon:""});
layer.msg('大部分引數都是可以公用的<br>合理搭配，展示不一樣的風格', {
time: 2000, //2s后自動關閉
btn: ['明白了', '知道了', '哦']
});
layer.tips('Hi，我是tips', '#mybtn');//當成一個function用
layer.load(1);
layer.load(0);
var index = layer.load(0, {shade: false}); //顯示加載圖示
var index = layer.load(1, {shade: [0.1,'#fff'] //0.1透明度的白色背景}); //顯示加載圖示
layer.open();彈出層
【type：0（資訊框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）】
layer.open(){
type: 1,//1為頁面層
title："標題",// - 標題
content: "html代碼或頁面路徑",//- 內容
area: ['500px', '300px'],//寬高
maxmin:true,//最大化最小化
cancel:function(){ //右上角關閉按鈕觸發的回呼
return false;//false表示不關閉
}
}
*** layui ****************************************************************************************************************************
table行列中插入圖片：
{field: 'template_image', title: '模版圖(點擊預覽)', templet:'<div><a href="javascript:enlarge("{{d.template_image}}")"><img src="https://www.cnblogs.com/lqq7456/p/{{d.template_image}}"></a></div>'}
增加點擊圖片預覽功能：
function enlarge(imgSrc){
if(imgSrc){
var width = pageWidth*0.5+"px";
var height = pageHeight*0.8+"px";
var imgWidth = pageWidth*0.5*0.9+"px";
layer.open({
type:1,
title:'查看大圖',
area:[width,height],
shadeClose: true, //開啟遮罩關閉
content:'<img src="'+imgSrc+'" style="width:'+imgWidth+';height:auto;position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;">'
})
}
}
-------------------------
table中根據后臺傳回來的資料決定資料渲染方式：
【done - 資料渲染完的回呼】
例如：用戶的‘啟用’和‘禁用’按鈕
done: function(res, curr, count){
//如果是異步請求資料方式，res即為你介面回傳的資訊，
//如果是直接賦值的方式，res即為：{data: [], count: 99} data為當前頁資料、count為資料總長度
console.log(res);
//得到當前頁碼
console.log(curr);
//得到資料總量
console.log(count);
for(var ind in res.data){
if(res.data[ind].status == "2"){
$("#tableContainer").find('a[name="ban"]').eq(ind).text("啟用");
$("#tableContainer").find('a[name="ban"]').eq(ind).attr("lay-event","enable");
$("#tableContainer").find('a[name="ban"]').eq(ind).removeClass("layui-btn-danger");
}
}
}
});
-------------------------
table中的行列要顯示自定義的操作性按鈕：
【既要顯示后臺獲取的資料，也要顯示按鈕】
<script type="text/html" id="vipcustomerlist">
{{d.customer_count}} <a lay-event="check">查看</a>
</script>
{field: 'customer_count', title: '推廣成功人次', sort: true, toolbar: '#vipcustomerlist'}
-------------------------
layui下select選項動態加載方案：
【html】
<div >
<div >
<select id="vipcard" lay-verify="required"></select>
</div>
</div>
【js】
$(function (){
$.ajax({
url: origin + "/manager/VipRetail/listVipCard",
type: "get",
dataType:"json",
async: false,
success: function (data) {
if(data && data.res){
layui.use(['layer', 'form'], function () {
var form = layui.form;
var html1 = '<dd lay-value="" >請選擇卡型別</dd>';
var html2 = '<option value="" >請選擇卡型別</option>';
for (var i = 0; i < data.res.length; i++) {
html1 += '<dd lay-value="' + data.res[i].id + '">' + data.res[i].card_type + '</dd>';
html2 += '<option value="' + data.res[i].id + '">' + data.res[i].card_type + '</option>';
}
$("#vipcard").next().children().eq(1).html(html1);
$("#vipcard").html(html2);
form.render();//沒有寫這個，操作后沒有效果
});
}
}
});
})
-------------------------
select/checkbox/radio沒顯示問題：
layui.use('form', function(){
var form = layui.form; //只有執行了這一步，部分表單元素才會自動修飾成功
//……
//但是，如果你的HTML是動態生成的，自動渲染就會失效
//因此你需要在相應的地方，執行下述方法來手動渲染，跟這類似的還有 element.init();
form.render();
});
-------------------------
頁面中用layui插件造成select的onchange事件不起作用的問題：
解決：
【html】
<select lay-filter="retailLevel">
<option value="" selected>請設定級別</option>
<option value="https://www.cnblogs.com/lqq7456/p/1">一級</option>
<option value="https://www.cnblogs.com/lqq7456/p/2">二級</option>
</select>
【js】
layui.use('form', function(){
var form = layui.form; //只有執行了這一步，部分表單元素才會自動修飾成功
form.on('select(retailLevel)', function(data){
//console.log(data.elem); //得到select原始DOM物件
//console.log(data.value); //得到被選中的值
//console.log(data.othis); //得到美化后的DOM物件
if(data.value =https://www.cnblogs.com/lqq7456/p/= 2){
$("#superior").css("display","block");
}else{
$("#superior").css("display","none");
}
});
//但是，如果你的HTML是動態生成的，自動渲染就會失效
//因此你需要在相應的地方，執行下述方法來手動渲染，跟這類似的還有 element.init();
//form.render();
});
-------------------------
關閉當前頁面：
$('#CloseIframe').click(function () {
//注意：parent 是 JS 自帶的全域物件，可用于操作父頁面
var index = parent.layer.getFrameIndex(window.name); //獲取視窗索引
parent.layer.close(index);
});
-------------------------
請求介面成功后的提示：
【方案一】彈出成功提示框，1.5秒后關閉本頁面，重繪父頁面的table的資料（table再請求一次）
layer.msg("新增成功！",{icon:1,time: 1500},function(){
var index = parent.layer.getFrameIndex(window.name);
parent.table.reload("alltable",{
page: {
curr: 1 //重新從第 1 頁開始
}
}, 'data'); //只多載資料
parent.layer.close(index);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/34135.html
標籤：jQuery
上一篇：jQuery基礎事件處理