getDuty.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <meta name="format-detection"content="telephone=no">
  8. <title>index</title>
  9. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  10. <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
  11. <link rel="stylesheet" href="../../css/projeck.css">
  12. <style media="screen">
  13. body,html{
  14. margin: 0;
  15. background: #fff;
  16. }
  17. .header-nav-items li{
  18. color: #BDC3C7;
  19. }
  20. .header-nav-items .active{
  21. color: #009FE8;
  22. }
  23. .header-nav-items .active::after {
  24. height: 3px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="api_layout">
  30. <header class="header-login">
  31. <img class="backBtn" src="../../image/btn_back.png" alt="" tapmode onclick="backIndex()">
  32. <p class="api_text">值班</p>
  33. </header>
  34. <div class="api_nav">
  35. <div class="header-nav scroller nav-haohuo" id="navScroll">
  36. <ul class="header-nav-items flex-wrap">
  37. <li class="active flex-con" tapmode="active" onclick="randomSwitchBtn(this)">
  38. 我的值班
  39. </li>
  40. <li class="flex-con" tapmode="active" onclick="randomSwitchBtn(this)">
  41. 值班表
  42. </li>
  43. </ul>
  44. </div>
  45. </div>
  46. </div>
  47. </body>
  48. </html>
  49. <script type="text/javascript" src="../../script/api.js"></script>
  50. <script type="text/javascript">
  51. apiready = function () {
  52. $api.fixStatusBar($api.dom('header') );
  53. api.parseTapmode()
  54. funIniGroup();
  55. keybackFun();
  56. }
  57. var eHeaderLis;
  58. function funIniGroup(){
  59. eHeaderLis = $api.domAll('.header-nav-items li'),
  60. frames = [];
  61. for (var i = 0,len = eHeaderLis.length; i < len; i++) {
  62. frames.push( {
  63. name: 'getDuty'+i,
  64. url: 'getDuty'+i+'.html',
  65. bgColor : '#F0F0F0',
  66. bounces:false
  67. } )
  68. }
  69. api.openFrameGroup({
  70. name: 'group',
  71. scrollEnabled: false,
  72. rect: {
  73. x: 0,
  74. y: $api.dom('header').offsetHeight+$api.dom('.api_nav').offsetHeight,
  75. w: api.winWidth,
  76. h: $api.winHeight
  77. },
  78. preload:0,
  79. index: 0,
  80. frames: frames
  81. }, function (ret, err) {
  82. menuSelected(ret.index);
  83. });
  84. };
  85. function menuSelected(index) {
  86. for (var i = 0; i < eHeaderLis.length; i++) {
  87. if(index == i ){
  88. $api.addCls(eHeaderLis[i], 'active');
  89. }else {
  90. $api.removeCls(eHeaderLis[i], 'active');
  91. }
  92. }
  93. }
  94. function randomSwitchBtn( tag ) {
  95. if( tag == $api.dom('.header-nav-items li.active') )return;
  96. var eFootLis = $api.domAll('.header-nav-items li');
  97. index = 0;
  98. for (var i = 0,len = eFootLis.length; i < len; i++) {
  99. if( tag == eFootLis[i] ){
  100. index = i;
  101. }else{
  102. $api.removeCls(eFootLis[i], 'active');
  103. }
  104. }
  105. $api.addCls( eFootLis[index], 'active');
  106. api.setFrameGroupIndex({
  107. name: 'group',
  108. index: index
  109. });
  110. }
  111. function backIndex() {
  112. api.sendEvent({
  113. name: 'userInfo'
  114. });
  115. api.closeWin();
  116. }
  117. // 监听物理返回键
  118. function keybackFun() {
  119. api.addEventListener({
  120. name: 'keyback'
  121. }, function(ret, err){
  122. api.sendEvent({
  123. name: 'userInfo'
  124. });
  125. api.closeWin();
  126. });
  127. }
  128. </script>