frame.js 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. layui.define(['table', 'jquery', 'element'], function (exports) {
  2. "use strict";
  3. var MOD_NAME = 'frame',
  4. $ = layui.jquery,
  5. element = layui.element;
  6. var pearFrame = function (opt) {
  7. this.option = opt;
  8. };
  9. pearFrame.prototype.render = function (opt) {
  10. var option = {
  11. elem:opt.elem,
  12. url:opt.url,
  13. title:opt.title,
  14. width:opt.width,
  15. height:opt.height,
  16. done:opt.done ? opt.done: function(){ console.log("菜单渲染成功");}
  17. }
  18. createFrameHTML(option);
  19. $("#"+option.elem).width(option.width);
  20. $("#"+option.elem).height(option.height);
  21. return new pearFrame(option);
  22. }
  23. pearFrame.prototype.changePage = function(url,loading){
  24. if(loading){
  25. var loading = $("#"+this.option.elem).find(".pear-frame-loading");
  26. loading.css({display:'block'});
  27. }
  28. $("#"+this.option.elem+" iframe").attr("src",url);
  29. if(loading){
  30. var loading = $("#"+this.option.elem).find(".pear-frame-loading");
  31. setTimeout(function(){
  32. loading.fadeOut(500);
  33. },800)
  34. }
  35. }
  36. pearFrame.prototype.changePageByElement = function(elem,url,title,loading){
  37. if(loading){
  38. var loading = $("#"+elem).find(".pear-frame-loading");
  39. loading.css({display:'block'});
  40. }
  41. $("#"+elem+" iframe").attr("src",url);
  42. $("#"+elem+" .title").html(title);
  43. if(loading){
  44. var loading = $("#"+elem).find(".pear-frame-loading");
  45. setTimeout(function(){
  46. loading.css({display:'none'});
  47. },400)
  48. }
  49. }
  50. pearFrame.prototype.refresh = function (time) {
  51. if(time!=false){
  52. var loading = $("#"+this.option.elem).find(".pear-frame-loading");
  53. loading.css({display:'block'});
  54. if(time!=0){
  55. setTimeout(function(){
  56. loading.fadeOut(500);
  57. },time)
  58. }
  59. }
  60. $("#"+this.option.elem).find("iframe")[0].contentWindow.location.reload(true);
  61. }
  62. function createFrameHTML(option){
  63. var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='"+option.url+"' ></iframe>";
  64. var loading = '<div class="pear-frame-loading">'+
  65. '<div class="ball-loader">'+
  66. '<span></span><span></span><span></span><span></span>'+
  67. '</div>'+
  68. '</div></div>';
  69. $("#"+option.elem).html("<div class='pear-frame'>"+ iframe + loading +"</div>");
  70. }
  71. exports(MOD_NAME,new pearFrame());
  72. })