整理源码
就眠仪式
parent
de35f8afb2
commit
6342dd0fa8
|
|
@ -10,7 +10,6 @@ layui.define(['table', 'jquery', 'element'], function (exports) {
|
|||
};
|
||||
|
||||
pearFrame.prototype.render = function (opt) {
|
||||
//默认配置值
|
||||
var option = {
|
||||
elem:opt.elem,
|
||||
url:opt.url,
|
||||
|
|
@ -19,74 +18,48 @@ layui.define(['table', 'jquery', 'element'], function (exports) {
|
|||
height:opt.height,
|
||||
done:opt.done ? opt.done: function(){ console.log("菜单渲染成功");}
|
||||
}
|
||||
|
||||
createFrameHTML(option);
|
||||
|
||||
$("#"+option.elem).width(option.width);
|
||||
$("#"+option.elem).height(option.height);
|
||||
|
||||
return new pearFrame(option);
|
||||
}
|
||||
|
||||
pearFrame.prototype.changePage = function(url,title,loading){
|
||||
|
||||
if(loading){
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
loading.css({display:'block'});
|
||||
}
|
||||
|
||||
$("#"+this.option.elem+" iframe").attr("src",url);
|
||||
|
||||
$("#"+this.option.elem+" .title").html(title);
|
||||
|
||||
if(loading){
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
loading.css({display:'none'});
|
||||
|
||||
},800)
|
||||
|
||||
},800)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pearFrame.prototype.refresh = function (time) {
|
||||
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
if(time!=false){
|
||||
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
loading.css({display:'block'});
|
||||
|
||||
if(time!=0){
|
||||
|
||||
setTimeout(function(){
|
||||
loading.css({display:'none'});
|
||||
},time)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#"+this.option.elem).find("iframe")[0].contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
function createFrameHTML(option){
|
||||
|
||||
var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='"+option.url+"' ></iframe>"
|
||||
|
||||
var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='"+option.url+"' ></iframe>";
|
||||
var loading = '<div class="pear-frame-loading">'+
|
||||
'<div class="ball-loader">'+
|
||||
'<span></span><span></span><span></span><span></span>'+
|
||||
'</div>'+
|
||||
'</div></div>'
|
||||
|
||||
'</div></div>';
|
||||
$("#"+option.elem).html(iframe+loading);
|
||||
}
|
||||
|
||||
exports(MOD_NAME,new pearFrame());
|
||||
})
|
||||
|
|
@ -3,12 +3,10 @@ layui.define(['layer', 'carousel'], function (exports) {
|
|||
var layer = layui.layer;
|
||||
var carousel = layui.carousel;
|
||||
|
||||
// 添加步骤条dom节点
|
||||
var renderDom = function (elem, stepItems, postion) {
|
||||
var stepDiv = '<div class="lay-step">';
|
||||
for (var i = 0; i < stepItems.length; i++) {
|
||||
stepDiv += '<div class="step-item">';
|
||||
// 线
|
||||
if (i < (stepItems.length - 1)) {
|
||||
if (i < postion) {
|
||||
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
|
||||
|
|
@ -16,8 +14,6 @@ layui.define(['layer', 'carousel'], function (exports) {
|
|||
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 数字
|
||||
var number = stepItems[i].number;
|
||||
if (!number) {
|
||||
number = i + 1;
|
||||
|
|
@ -29,8 +25,6 @@ layui.define(['layer', 'carousel'], function (exports) {
|
|||
} else {
|
||||
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
|
||||
}
|
||||
|
||||
// 标题和描述
|
||||
var title = stepItems[i].title;
|
||||
var desc = stepItems[i].desc;
|
||||
var time = stepItems[i].time;
|
||||
|
|
@ -50,16 +44,12 @@ layui.define(['layer', 'carousel'], function (exports) {
|
|||
stepDiv += '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
|
||||
$(elem).prepend(stepDiv);
|
||||
|
||||
// 计算每一个条目的宽度
|
||||
var bfb = 100 / stepItems.length;
|
||||
$('.step-item').css('width', bfb + '%');
|
||||
};
|
||||
|
||||
var pearStep = {
|
||||
// 渲染步骤条
|
||||
render: function (param) {
|
||||
param.indicator = 'none'; // 不显示指示器
|
||||
param.arrow = 'always'; // 始终显示箭头
|
||||
|
|
@ -67,33 +57,21 @@ layui.define(['layer', 'carousel'], function (exports) {
|
|||
if (!param.stepWidth) {
|
||||
param.stepWidth = '400px';
|
||||
}
|
||||
|
||||
// 渲染轮播图
|
||||
carousel.render(param);
|
||||
|
||||
// 渲染步骤条
|
||||
var stepItems = param.stepItems;
|
||||
renderDom(param.elem, stepItems, 0);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
|
||||
//监听轮播切换事件
|
||||
carousel.on('change(' + param.filter + ')', function (obj) {
|
||||
$(param.elem).find('.lay-step').remove();
|
||||
renderDom(param.elem, stepItems, obj.index);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
});
|
||||
|
||||
// 隐藏左右箭头按钮
|
||||
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
|
||||
|
||||
// 去掉轮播图的背景颜色
|
||||
$(param.elem).css('background-color', 'transparent');
|
||||
},
|
||||
// 下一步
|
||||
next: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
|
||||
},
|
||||
// 上一步
|
||||
pre: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
|
||||
}
|
||||
|
|
|
|||
|
|
@ -88,13 +88,9 @@
|
|||
image.onload = function(){
|
||||
$(".layui-nav-img").attr("src", convert.imageToBase64(image));
|
||||
}
|
||||
|
||||
// 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置
|
||||
|
||||
// 你可以通过 admin.setConfigPath 方法修改配置文件位置
|
||||
|
||||
admin.setConfigPath("config/pear.config.yml");
|
||||
|
||||
admin.render();
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue