tab-webview-subpage-second.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>书架</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <!--标准mui.css-->
  10. <link rel="stylesheet" href="css/mui.min.css">
  11. <style>
  12. body {
  13. background-color: #efeff4;
  14. }
  15. h5 {
  16. padding-top: 8px;
  17. padding-bottom: 8px;
  18. text-indent: 12px;
  19. }
  20. .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
  21. font-size: 15px;
  22. margin-top: 8px;
  23. color: #333;
  24. }
  25. .my-mui-media-body {
  26. height: 30px !important;
  27. font-size: 18px !important;
  28. line-height: 30px !important;
  29. }
  30. .mui-media-object {
  31. width: 80% !important;
  32. }
  33. .mui-table-view-cell {
  34. height: 160px !important;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="mui-content">
  40. <ul id="book-list-id" class="mui-table-view mui-grid-view mui-grid-9">
  41. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  42. <a href="javascript:void(0)" data-title='铁人精神' data-id='1'>
  43. <img class="mui-media-object" src="images/index/tierenjingshen.png">
  44. <div class="mui-media-body my-mui-media-body">铁人精神</div>
  45. </a>
  46. </li>
  47. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  48. <a href="javascript:void(0)" data-title='国学' data-id='2'>
  49. <img class="mui-media-object" src="images/index/guoxue.png">
  50. <div class="mui-media-body my-mui-media-body">国学</div>
  51. </a>
  52. </li>
  53. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  54. <a href="javascript:void(0)" data-title='励志' data-id='3'>
  55. <img class="mui-media-object" src="images/index/lizhi.png">
  56. <div class="mui-media-body my-mui-media-body">励志</div>
  57. </a>
  58. </li>
  59. <li class="mui-table-view-cell mui-media mui-col-xs-6">
  60. <a href="javascript:void(0)" data-title='企业管理' data-id='4'>
  61. <img class="mui-media-object" src="images/index/qiyeguanli.png">
  62. <div class="mui-media-body my-mui-media-body">企业管理</div>
  63. </a>
  64. </li>
  65. </ul>
  66. <!--<ul class="mui-table-view mui-grid-view mui-grid-9">
  67. <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
  68. <a href="#">
  69. <span class="mui-icon mui-icon-home"></span>
  70. <div class="mui-media-body">铁人精神</div>
  71. </a>
  72. </li>
  73. <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
  74. <a href="#">
  75. <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
  76. <div class="mui-media-body">国学</div>
  77. </a>
  78. </li>
  79. <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
  80. <a href="#">
  81. <span class="mui-icon mui-icon-chatbubble"></span>
  82. <div class="mui-media-body">励志</div>
  83. </a>
  84. </li>
  85. <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
  86. <a href="#">
  87. <span class="mui-icon mui-icon-location"></span>
  88. <div class="mui-media-body">企业管理</div>
  89. </a>
  90. </li>
  91. </ul>-->
  92. </div>
  93. <!--
  94. 作者:HZC
  95. 时间:2015-08-26
  96. 描述:主页(图书分类)
  97. -->
  98. <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
  99. <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  100. <script type="text/javascript">
  101. mui.init();
  102. mui.plusReady(function() {
  103. plus.screen.lockOrientation("portrait");
  104. openList();
  105. });
  106. /**
  107. * 打开图书列表
  108. */
  109. function openList() {
  110. mui('#book-list-id').on('tap', 'a', function() {
  111. var title = this.getAttribute('data-title');
  112. var categoryId = this.getAttribute('data-id');
  113. if (toastNetworkInfo('当前网络不可用')) {
  114. var oldWin = plus.webview.getWebviewById('book-list-id-' + categoryId);
  115. if (oldWin) {
  116. oldWin.show();
  117. // plus.webview.getWebviewById('tab-webview-main-id').reload();
  118. return;
  119. }
  120. mui.openWindow({
  121. id: 'book-list-id-' + categoryId,
  122. url: 'app/book-list.html',
  123. extras: {
  124. title: title,
  125. categoryId: categoryId
  126. },
  127. show: {
  128. duration: 350
  129. }
  130. });
  131. // plus.webview.getWebviewById('tab-webview-main-id').reload();
  132. }
  133. });
  134. }
  135. </script>
  136. </body>
  137. </html>