vip_comm.js 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. /**
  2. * @name: vip-admin 后台模板主入口
  3. * @author: 随丶
  4. */
  5. // 配置
  6. layui.config({
  7. base: 'admin/frame/static/js/' // 模块目录
  8. }).extend({ // 模块别名
  9. vip_nav: 'vip_nav'
  10. , vip_tab: 'vip_tab'
  11. , vip_table: 'vip_table'
  12. });
  13. // 主入口方法
  14. layui.use(['layer', 'element', 'util'], function () {
  15. // 操作对象
  16. var device = layui.device()
  17. , element = layui.element
  18. , layer = layui.layer
  19. , util = layui.util
  20. , $ = layui.jquery
  21. , cardIdx = 0
  22. , cardLayId = 0
  23. , side = $('.my-side')
  24. , body = $('.my-body')
  25. , footer = $('.my-footer');
  26. //阻止IE7以下访问
  27. if (device.ie && device.ie < 8) {
  28. layer.alert('如果您非得使用ie浏览vip-admin 后台模板,那么请使用ie8+');
  29. }
  30. // 导航栏收缩
  31. function navHide(t, st) {
  32. var time = t ? t : 50;
  33. st ? localStorage.log = 1 : localStorage.log = 0;
  34. side.animate({'left': -200}, time);
  35. body.animate({'left': 0}, time);
  36. footer.animate({'left': 0}, time);
  37. }
  38. // 导航栏展开
  39. function navShow(t, st) {
  40. var time = t ? t : 50;
  41. st ? localStorage.log = 0 : localStorage.log = 1;
  42. side.animate({'left': 0}, time);
  43. body.animate({'left': 200}, time);
  44. footer.animate({'left': 200}, time);
  45. }
  46. // 监听导航栏收缩
  47. $('.btn-nav').on('click', function () {
  48. if (localStorage.log == 0) {
  49. navShow(50);
  50. } else {
  51. navHide(50);
  52. }
  53. });
  54. // 根据导航栏text获取lay-id
  55. function getTitleId(card, title) {
  56. var id = -1;
  57. $(document).find(".layui-tab[lay-filter=" + card + "] ul li").each(function () {
  58. if (title === $(this).find('span').html()) {
  59. id = $(this).attr('lay-id');
  60. }
  61. });
  62. return id;
  63. }
  64. // 添加TAB选项卡
  65. window.addTab = function (elem, tit, url) {
  66. var card = 'card'; // 选项卡对象
  67. var title = tit ? tit : elem.children('a').html(); // 导航栏text
  68. var src = url ? url : elem.children('a').attr('href-url'); // 导航栏跳转URL
  69. var id = new Date().getTime(); // ID
  70. var flag = getTitleId(card, title); // 是否有该选项卡存在
  71. // 大于0就是有该选项卡了
  72. if (flag > 0) {
  73. id = flag;
  74. } else {
  75. if (src) {
  76. //新增
  77. element.tabAdd(card, {
  78. title: '<span>' + title + '</span>'
  79. , content: '<iframe src="' + src + '" frameborder="0"></iframe>'
  80. , id: id
  81. });
  82. // 关闭弹窗
  83. layer.closeAll();
  84. }
  85. }
  86. // 切换相应的ID tab
  87. element.tabChange(card, id);
  88. // 提示信息
  89. // layer.msg(title);
  90. };
  91. // 监听顶部左侧导航
  92. element.on('nav(side-top-left)', function (elem) {
  93. // 添加tab方法
  94. window.addTab(elem);
  95. });
  96. // 监听顶部右侧导航
  97. element.on('nav(side-top-right)', function (elem) {
  98. // 修改skin
  99. if ($(this).attr('data-skin')) {
  100. localStorage.skin = $(this).attr('data-skin');
  101. skin();
  102. } else {
  103. // 添加tab方法
  104. window.addTab(elem);
  105. }
  106. });
  107. // 监听导航(side-main)点击切换页面
  108. element.on('nav(side-main)', function (elem) {
  109. // 添加tab方法
  110. window.addTab(elem);
  111. });
  112. // 删除选项卡
  113. window.delTab = function (layId) {
  114. // 删除
  115. element.tabDelete('card', layId);
  116. };
  117. // 删除所有选项卡
  118. window.delAllTab = function () {
  119. // 选项卡对象
  120. layui.each($('.my-body .layui-tab-title > li'), function (k, v) {
  121. var layId = $(v).attr('lay-id');
  122. if (layId > 1) {
  123. // 删除
  124. element.tabDelete('card', layId);
  125. }
  126. });
  127. };
  128. // 获取当前选中选项卡lay-id
  129. window.getThisTabID = function () {
  130. // 当前选中的选项卡id
  131. return $(document).find('body .my-body .layui-tab-card > .layui-tab-title .layui-this').attr('lay-id');
  132. };
  133. // 双击关闭相应选项卡
  134. $(document).on('dblclick', '.my-body .layui-tab-card > .layui-tab-title li', function () {
  135. // 欢迎页面以外,删除选项卡
  136. if ($(this).index() > 0) {
  137. element.tabDelete('card', $(this).attr('lay-id'));
  138. } else {
  139. layer.msg('欢迎页面不能关闭')
  140. }
  141. });
  142. // 选项卡右键事件阻止
  143. $(document).on("contextmenu", '.my-body .layui-tab-card > .layui-tab-title li', function () {
  144. return false;
  145. });
  146. // 选项卡右键事件
  147. $(document).on("mousedown", '.my-body .layui-tab-card > .layui-tab-title li', function (e) {
  148. // 判断是右键点击事件并且不是欢迎页面选项卡
  149. if (3 == e.which && $(this).index() > 0) {
  150. // 赋值
  151. cardIdx = $(this).index();
  152. cardLayId = $(this).attr('lay-id');
  153. // 选择框
  154. layer.tips($('.my-dblclick-box').html(), $(this), {
  155. skin: 'dblclick-tips-box',
  156. tips: 3,
  157. time: false
  158. });
  159. }
  160. });
  161. // 点击body关闭tips
  162. $(document).on('click', 'html', function () {
  163. layer.closeAll('tips');
  164. });
  165. // 右键提示框菜单操作-刷新页面
  166. $(document).on('click', '.card-refresh', function () {
  167. // 窗体对象
  168. var ifr = $(document).find('.my-body .layui-tab-content .layui-tab-item iframe').eq(cardIdx);
  169. // 刷新当前页
  170. ifr.attr('src', ifr.attr('src'));
  171. // 切换到当前选项卡
  172. element.tabChange('card', cardLayId);
  173. });
  174. // 右键提示框菜单操作-关闭页面
  175. $(document).on('click', '.card-close', function () {
  176. // 删除
  177. window.delTab(cardLayId);
  178. });
  179. // 右键提示框菜单操作-关闭所有页面
  180. $(document).on('click', '.card-close-all', function () {
  181. // 删除
  182. window.delAllTab();
  183. });
  184. // 打赏
  185. $('.pay').on('click', function () {
  186. layer.open({
  187. type: 1,
  188. title: false, // 标题不显示
  189. closeBtn: false, // 关闭按钮不显示
  190. shadeClose: true, // 点击遮罩关闭
  191. area: ['auto', 'auto'], // 宽高
  192. content: $('.my-pay-box') // 弹出内容
  193. });
  194. });
  195. // 皮肤
  196. function skin() {
  197. var skin = localStorage.skin ? localStorage.skin : 0;
  198. var body = $('body');
  199. body.removeClass('skin-0');
  200. body.removeClass('skin-1');
  201. body.removeClass('skin-2');
  202. body.addClass('skin-' + skin);
  203. }
  204. // 工具
  205. function _util() {
  206. var bar = $('.layui-fixbar');
  207. // 分辨率小于1023 使用内部工具组件
  208. if ($(window).width() < 1023) {
  209. util.fixbar({
  210. bar1: '&#xe602;'
  211. , css: {left: 10, bottom: 54}
  212. , click: function (type) {
  213. if (type === 'bar1') {
  214. //iframe层
  215. layer.open({
  216. type: 1, // 类型
  217. title: false, // 标题
  218. offset: 'l', // 定位 左边
  219. closeBtn: 0, // 关闭按钮
  220. anim: 0, // 动画
  221. shadeClose: true, // 点击遮罩关闭
  222. shade: 0.8, // 半透明
  223. area: ['150px', '100%'], // 区域
  224. skin: 'my-mobile', // 样式
  225. content: $('body .my-side').html() // 内容
  226. });
  227. }
  228. element.init();
  229. }
  230. });
  231. bar.removeClass('layui-hide');
  232. bar.addClass('layui-show');
  233. } else {
  234. bar.removeClass('layui-show');
  235. bar.addClass('layui-hide');
  236. }
  237. };
  238. // 自适应
  239. $(window).on('resize', function () {
  240. if ($(window).width() > 1023) {
  241. navShow(10);
  242. } else {
  243. navHide(10);
  244. }
  245. _util();
  246. });
  247. // 监听控制content高度
  248. function init() {
  249. // 起始判断-收缩/展开
  250. if (!localStorage.log) {
  251. if ($(window).width() > 1023) {
  252. if (localStorage.log == 0) {
  253. navHide(10);
  254. } else {
  255. navShow(10);
  256. }
  257. } else {
  258. navHide(10);
  259. }
  260. } else {
  261. if (localStorage.log == 0) {
  262. navHide(10);
  263. } else {
  264. navShow(10);
  265. }
  266. }
  267. // 工具
  268. _util();
  269. // skin
  270. skin();
  271. // 选项卡高度
  272. cardTitleHeight = $(document).find(".layui-tab[lay-filter='card'] ul.layui-tab-title").height();
  273. // 需要减去的高度
  274. height = $(window).height() - $('.layui-header').height() - cardTitleHeight - $('.layui-footer').height();
  275. // 设置高度
  276. $(document).find(".layui-tab[lay-filter='card'] div.layui-tab-content").height(height - 2);
  277. }
  278. // 初始化
  279. init();
  280. });