review-section.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Hello MUI</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. <link rel="stylesheet" href="../css/mui.min.css">
  10. <script src="../js/mui.min.js"></script>
  11. <script src="../js/app.js"></script>
  12. <script src="../js/service.js"></script>
  13. <style>
  14. html,
  15. body {
  16. background-color: #efeff4;
  17. }
  18. </style>
  19. <script>
  20. mui.init();
  21. </script>
  22. </head>
  23. <body>
  24. <header class="mui-bar mui-bar-nav">
  25. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  26. <h1 id="title" class="mui-title">错题本</h1>
  27. </header>
  28. <div class="mui-content">
  29. <div class="mui-card">
  30. <ul class="mui-table-view" id="list">
  31. <li class="mui-table-view-cell mui-media">
  32. <div class="mui-media-body" style="text-align: center;">
  33. <p class='mui-ellipsis' style="">没有数据</p>
  34. </div>
  35. </li>
  36. </ul>
  37. </div>
  38. </div>
  39. <script type="text/html" id="template-chapter-id">
  40. <li class="mui-table-view-cell mui-media">
  41. <a data-href="review-resolution.html" data-section-id="{sectionId}" data-type="{type}" style="height: 60px;padding-top: 20px;">
  42. <span class="mui-pull-right"><span style="color: gray;font-size: 14px;">{count}道</span><span class="mui-icon mui-icon-forward "></span></span>
  43. <div class="mui-media-body">
  44. <p class='mui-ellipsis' style="">{name}</p>
  45. </div>
  46. </a>
  47. </li>
  48. </script>
  49. <script type="text/javascript">
  50. //
  51. function sectionATapEvent() {
  52. mui('#list').on('tap', 'a', function() {
  53. var sectionId = this.getAttribute('data-section-id');
  54. var href = this.getAttribute('data-href');
  55. var type = this.getAttribute("data-type");
  56. mui.openWindow({
  57. id: 'bar-' + sectionId,
  58. url: href,
  59. waiting: {
  60. autoShow: false
  61. },
  62. extras: {
  63. sectionId: sectionId,
  64. type: type
  65. }
  66. })
  67. });
  68. }
  69. function updateTitle() {
  70. var self = plus.webview.currentWebview();
  71. var barTitle = self.barTitle;
  72. if (barTitle) {
  73. var titleDom = document.getElementById('title');
  74. titleDom.innerHTML = barTitle;
  75. }
  76. }
  77. function initDom() {
  78. var chapterId = window.chapterId;
  79. var type = window.type;
  80. var scriptCourse = document.getElementById('template-chapter-id');
  81. var template = scriptCourse.innerHTML;
  82. var ct = document.getElementById('list');
  83. ct.innerHTML = '<li class="mui-table-view-cell mui-media">' +
  84. '<div class="mui-media-body" style="text-align: center;">' +
  85. '<p class="mui-ellipsis" style="">没有数据</p>' +
  86. '</div>' +
  87. '</li>';
  88. queryChapterCount(chapterId, type, function(rows) {
  89. if (rows.length < 1) {
  90. return;
  91. }
  92. ct.innerHTML = "";
  93. var htmlStr = '';
  94. for (var i = 0; i < rows.length; i++) {
  95. var row = rows[i];
  96. row.sectionId = row.code;
  97. row.type = type;
  98. htmlStr += render(template, row);
  99. }
  100. ct.innerHTML = htmlStr;
  101. });
  102. }
  103. mui.init();
  104. mui.plusReady(function() {
  105. updateTitle();
  106. var self = plus.webview.currentWebview();
  107. window.chapterId = self.chapterId;
  108. window.type = self.type;
  109. initDom();
  110. sectionATapEvent();
  111. });
  112. var old_back = mui.back;
  113. mui.back = function() {
  114. var self = plus.webview.currentWebview();
  115. self.opener().evalJS('initDom();');
  116. //执行mui封装好的窗口关闭逻辑;
  117. old_back();
  118. }
  119. </script>
  120. </body>
  121. </html>