github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/index.html (about) 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 <title>有你有我</title> 7 <link rel="stylesheet" type="text/css" href="./css/api.css" /> 8 <link rel="stylesheet" type="text/css" href="./css/common.css" /> 9 10 <style> 11 12 /* 头部样式 */ 13 #nearHeader {background-color: #D43C33;} 14 #youniHeader {background-color: #D43C33;} 15 #messageHeader {background-color: #D43C33;} 16 #contactsHeader {background-color: #D43C33;} 17 #fortheader {background-color: #D43C33;} 18 19 .topbar {background: #D43C33; height:50px; border-bottom: 1px solid #DDDFE3;position: relative;} 20 .topbar_title {display: inline-block;font-size: 20px; line-height: 50px;padding-left: 12px;} 21 .hr01, .hr02 {height: 28px;} 22 .headerico {padding: 11px 15px 11px 15px;} 23 .headericohover {background: #DADDE0;} 24 .fr{float: right;} 25 .fl{float: left;} 26 .pa {position: absolute;} 27 img {vertical-align: top;} 28 29 /*第一头部*/ 30 .egret-header-box {height: 50px;} 31 .egret-img img {height: 30px;padding: 10px;} 32 .egret-header-search {background-color: #fff; position: absolute; left: 60px; right: 20px; height: 34px; margin-top: 8px;border-radius: 4px;} 33 .egret-header-search img {margin-left: 30px; height: 20px; margin-top: 7px;} 34 .egret-header-search input {line-height: 24px;font-size: 14px;padding-top: 5px;} 35 .egret-header-search input:focus {/*border:0;*/ outline:none;} 36 37 /* 第二头部 */ 38 .egret-header-text {line-height: 50px;color: #fff;font-size: 16px;padding: 0 10px;} 39 .egret-header-title {position: absolute;width: 100%;text-align: center;line-height: 50px;color: #fff;font-size: 20px;} 40 41 42 /* 第三头部 */ 43 .egret-switchframe {position: absolute; left: 90px; right: 90px;background-color: #fcfcfc;text-align: center;height: 30px;line-height: 30px;bottom: 10px;border-radius: 4px;color: #fff;border: 1px solid #fff;} 44 .egret-switchframe div {width: 50%;display: inline-block;color: #fff;background-color: #D43C33;} 45 .egret-switchframe div:first-child {border-radius: 4px 0 0 4px;} 46 .egret-switchframe div:last-child {border-radius: 0px 4px 4px 0px;} 47 .egret-switchframe-selectswitch {background-color: #fff !important;color: #D43C33 !important;} 48 49 /* 头部切换样式 */ 50 .titlebar {display: none;} 51 .activebar {display: block;} 52 53 /* 底部切换按钮样式 */ 54 ul {display: -webkit-box; display: -webkit-flex; display: flex; } 55 #footer {height: 51px; /*line-height: 50px;*/ background-color: #413A36;border-top: 1px solid #332E2A; } 56 #footer li{-webkit-box-flex: 1; -webkit-flex: 1; flex:1; /*height: 40px;*/} 57 58 /* 选项卡样式 */ 59 .scrollbar {display: -webkit-box;display: -webkit-flex; text-align: center; height: 40px; line-height: 40px;background: #EBECF0;font-size: 12px;position: relative;} 60 .col1 {-webkit-box-flex:1;-webkit-flex: 1;flex:1;color: #909090;} 61 .indexbar {position: absolute;/*background: #0fc;*/width: 50%;height: 5px;left: 0px;bottom: 0px;-webkit-transition: 300ms;} 62 .redbox {background: #DB4646;width: 40px;height: 5px;position: relative;left: auto;right: auto; margin-left: auto; margin-right: auto;} 63 64 /********************/ 65 /* 底部按钮原始样式 */ 66 /********************/ 67 .bbtn01 {background: url(./image/main_index01.png) no-repeat center 4px; } 68 .bbtnyouni {background: url(./image/main_index02.png) no-repeat center 4px; } 69 .bbtn02 {background: url(./image/main_index02.png) no-repeat center 4px; } 70 .bbtn03 {background: url(./image/main_index03.png) no-repeat center 4px; } 71 .bbtn04 {background: url(./image/main_index04.png) no-repeat center 4px; } 72 .bottom_btn {width: 99%; /*height: 43px;*/padding-top: 21px;background-position-y: 4px; background-size: 24px; font-size: 10px; color: #A5A5A5;} 73 74 /* 底部按钮激活样式 */ 75 .activebtn0 {/*background: url(./image/main_index01pressed.png) no-repeat center 4px; */} 76 .activebtn1 {/*background: url(./image/main_index02pressed.png) no-repeat center 4px; */} 77 .activebtn_good {/*background: url(./image/main_index02pressed.png) no-repeat center 4px; */} 78 .activebtn2 {/*background: url(./image/main_index03pressed.png) no-repeat center 4px; */} 79 .activebtn3 {/*background: url(./image/main_index04pressed.png) no-repeat center 4px; */} 80 .activebtn {color:#fff; background-size: 24px; background-color: #D33A31;} 81 .bottomhover {background-color: #46494B;} 82 83 /* 本地刷新图标 */ 84 #localrefresh {display:none;float: right; width: 40px; padding: 5px 10px;} 85 86 87 .navbar {display: -webkit-box; -webkit-box-orient: horizontal; position: relative; height: 40px; box-sizing: border-box; background: #fff; border-bottom: 1px solid #e0e0e0; } 88 .navbar-item {display: block; -webkit-box-flex: 1; width: 100%; line-height: 40px; font-size: 16px; text-align: center;color: #000; } 89 .navbar-item-hov {background-color: rgba(254,242,228,0.7); } 90 .navbar-item-active {color: #D43C33; } 91 #navmark {position: absolute; left: 0px; bottom: 0px; -webkit-transition: 300ms; text-align: center; height: 2px;background-color: #D43C33;} 92 93 94 95 </style> 96 </head> 97 <body> 98 <div id="wrap"> 99 <!-- 附近头部 --> 100 <div id="nearHeader" class="titlebar activebar"> 101 <!-- <h2>有你</h2> --> 102 <div class="egret-header topbar normalHeader"> 103 <div class="egret-header-box egret-img fr" onclick="openactivity('near')"><img src="./image/scan.png" alt=""></div> 104 </div> 105 106 <nav class="navbar" id="firstHeaderIndex"> 107 <a id="navbar-near-1" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',0);">动态</a> 108 <a id="navbar-near-2" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',1);">好人</a> 109 <a id="navbar-near-3" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',2);">群组</a> 110 <a id="navbar-near-4" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',3);">置换</a> 111 <a id="navbar-near-5" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',4);">活动</a> 112 <a id="navbar-near-6" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('near_framegroup',5);">求助</a> 113 <mark id="navmark"></mark> 114 </nav> 115 </div> 116 117 <!-- youni头部 --> 118 <div id="youniHeader" class="titlebar"> 119 <div class="egret-header topbar normalHeader"> 120 <div class="egret-header-box egret-img fr" onclick="openactivity('youni')"><img src="./image/add.jpg" alt=""></div> 121 <!--<div class="egret-header-box fr"> 122 <div class="egret-header-title">有你</div> 123 </div>--> 124 </div> 125 126 <nav class="navbar" id="youniHeaderIndex"> 127 <a id="navbar-youni-1" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',0);">走失</a> 128 <a id="navbar-youni-2" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',1);">内推</a> 129 <a id="navbar-youni-3" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',2);">内购</a> 130 <a id="navbar-youni-4" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',3);">众筹</a> 131 <a id="navbar-youni-5" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',4);">教育</a> 132 <a id="navbar-youni-6" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('youni_framegroup',5);">折扣</a> 133 <mark id="navmark"></mark> 134 </nav> 135 </div> 136 137 <!-- 消息头部 --> 138 <div id="messageHeader" class="titlebar"> 139 <div class="egret-header topbar normalHeader"> 140 <!--<div class="egret-header-box"> 141 <div class="egret-header-title">有你</div> 142 </div>--> 143 <div class="egret-header-box egret-img fr" onclick="openactivity('message')"><img src="./image/add.jpg" alt=""></div> 144 </div> 145 <nav class="navbar" id="messageHeaderIndex"> 146 <a id="navbar-message-1" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('message_framegroup',0);">好友</a> 147 <a id="navbar-message-2" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('message_framegroup',1);">群消息</a> 148 <a id="navbar-message-3" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('message_framegroup',2);">平台消息</a> 149 <a id="navbar-message-4" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('message_framegroup',3);">动态通知</a> 150 <mark id="navmark"></mark> 151 </nav> 152 </div> 153 154 <!-- 通讯录头部 --> 155 <div id="contactsHeader" class="titlebar"> 156 <div class="egret-header topbar normalHeader"> 157 <!--<div class="egret-header-box"> 158 <div class="egret-header-title">有你有我</div> 159 </div>--> 160 <div class="egret-header-box egret-img fr" onclick="openactivity('contacts')"><img src="./image/add.jpg" alt=""></div> 161 </div> 162 <nav class="navbar" id="contactsHeaderIndex"> 163 <a id="navbar-contacts-1" class="navbar-item navbar-item-active" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('contact_framegroup',0);">好友</a> 164 <a id="navbar-contacts-2" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('contact_framegroup',1);">群组</a> 165 <a id="navbar-contacts-3" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('contact_framegroup',2);">粉丝</a> 166 <a id="navbar-contacts-4" class="navbar-item" tapmode="navbar-item-hov" onclick="setFrameGroupIndex('contact_framegroup',3);">关注</a> 167 <mark id="navmark"></mark> 168 </nav> 169 </div> 170 171 <!-- 我头部 --> 172 <div id="fortheader" class="titlebar"> 173 <div class="egret-header topbar"> 174 <div class="egret-header-title">账号</div> 175 </div> 176 </div> 177 178 <div id="main"> 179 180 </div> 181 182 <div id="footer"> 183 <ul> 184 <li tapmode="activebtn0 activebtn" onclick="switchframe('near_framegroup')"> 185 <a class="bottom_btn bbtn01 weixin activebtn activebtn0">附近</a> 186 </li> 187 188 <li tapmode="activebtn_good activebtn" onclick="switchframe('youni_framegroup')"> 189 <a class="bottom_btn bbtnyouni communicate">有你</a> 190 </li> 191 192 <li tapmode="activebtn1 activebtn" onclick="switchframe('message_framegroup')"> 193 <a class="bottom_btn bbtn02 communicate">消息</a> 194 </li> 195 196 <li tapmode="activebtn2 activebtn" onclick="switchframe('contact_framegroup')"> 197 <a class="bottom_btn bbtn03 discover">通讯录</a> 198 </li> 199 200 <li tapmode="activebtn3 activebtn" onclick="switchframe('myself')"> 201 <a class="bottom_btn bbtn04 home">我</a> 202 </li> 203 </ul> 204 </div> 205 </div> 206 </body> 207 <script type="text/javascript" src="./script/api.js"></script> 208 <script type="text/javascript"> 209 var firstHeader = $api.byId('nearHeader'); 210 var youniHeader = $api.byId('youniHeader'); 211 var messageHeader = $api.byId('messageHeader'); 212 var contactsHeader = $api.byId('contactsHeader'); 213 var fortheader = $api.byId('fortheader'); 214 var firstHeaderOffset; 215 var firstHeaderIndexHeight; 216 var youniHeaderIndexHeight; 217 218 var main = $api.byId('main'); 219 var mainPos = $api.offset(main); 220 221 var footer = $api.byId('footer'); 222 var footerPos = $api.offset(footer); 223 224 var isFirstOpen = false; 225 var isyouniOpen = false; 226 var isMessageOpen = false; 227 var isContactsOpen = false; 228 var isMyselfOpen = false; 229 230 function emptyopt() {} 231 232 // 打开frame 233 function openframe02more () { 234 api.openFrame({ 235 name: 'frame02more', 236 url: './html/second_frame/frame02_more.html', 237 rect: { 238 x: 0, 239 y: firstHeaderOffset.h, 240 w: 'auto', 241 h: 'auto' 242 }, 243 bounces:false, 244 delay: 200 245 }); 246 } 247 248 function openSearch() { 249 api.openWin({ 250 name: 'search', 251 url: './html/search.html', 252 bounces: false, 253 delay: 200 254 }); 255 } 256 257 function openactivity(win_name) { 258 //win_name = api.frameName + "_win" 259 //win_url = "./html/youni/" + win_name + ".html" 260 frame_name = $api.getStorage(win_name); 261 262 //console.log("win is " + win_name + "url is " + win_url); 263 264 //win_name = "lost_win" 265 win_url = "./html/youni/lost_win.html" 266 win_url = "./html/" + win_name + "/add_" + frame_name + "_win.html" 267 console.log("winName is " + win_name + " frameName is " + frame_name + "url is " + win_url); 268 269 api.openWin({ 270 name: win_name, 271 url: win_url, 272 bounces: false, 273 vScrollBarEnabled : false, 274 hScrollBarEnabled : false 275 }); 276 } 277 278 // 随意切换按钮 279 function randomSwitchBtn(name, index) { 280 var lis = $api.domAll('.bottom_btn'); 281 var i = 0, 282 len = lis.length; 283 var curLi = lis[index]; 284 285 for (i; i < len; i++) { 286 var thisLi = lis[i]; 287 if (thisLi === curLi) { 288 $api.addCls(thisLi, 'activebtn'); 289 $api.addCls(thisLi, 'activebtn' + index); 290 continue; 291 } else { 292 if ($api.hasCls(thisLi, 'activebtn')) { 293 $api.removeCls(thisLi, 'activebtn'); 294 $api.removeCls(thisLi, 'activebtn' + i); 295 } 296 } 297 } 298 299 // 切换头部 300 var lis = $api.domAll('.titlebar'); 301 var i = 0, 302 len = lis.length; 303 var curLi = lis[index]; 304 305 for (i; i < len; i++) { 306 var thisLi = lis[i]; 307 if (thisLi === curLi) { 308 $api.addCls(thisLi, 'activebar'); 309 $api.addCls(thisLi, 'activebar' + index); 310 continue; 311 } else { 312 if ($api.hasCls(thisLi, 'activebar')) { 313 $api.removeCls(thisLi, 'activebar'); 314 $api.removeCls(thisLi, 'activebar' + i); 315 } 316 } 317 } 318 } 319 320 // 隐藏所有的一级frame 321 function hideAllFrame() { 322 api.setFrameGroupAttr({ 323 name: 'near_framegroup', 324 hidden: true 325 }); 326 327 api.setFrameGroupAttr({ 328 name: 'youni_framegroup', 329 hidden: true 330 }); 331 332 api.setFrameGroupAttr({ 333 name: 'message_framegroup', 334 hidden: true 335 }); 336 337 api.setFrameGroupAttr({ 338 name: 'contact_framegroup', 339 hidden: true 340 }); 341 api.setFrameAttr({ 342 name: 'myself', 343 hidden: true 344 }); 345 } 346 347 // 自己修复ios显示frame的时候bug 348 // ios自己主动隐藏后，再open就不显示了 349 function showgroup(type) { 350 api.setFrameGroupAttr({ 351 name: type , 352 hidden: false 353 }); 354 } 355 356 // 展示指定的frame 357 function showframe(type) { 358 api.setFrameAttr({ 359 name: type, 360 hidden: false 361 }); 362 } 363 364 function setFrameGroupIndex(framegroup_name,frameIndex) { 365 //console.log("setFrameGroupIndex frame_name is " + framegroup_name + " " + frameIndex); 366 367 api.setFrameGroupIndex({ 368 name: framegroup_name, 369 index: frameIndex, 370 scroll: true 371 }); 372 } 373 374 function setFrameGroupStatus(framegroup_name_index,navigatenum,frameIndex) { 375 //navigatenum = 6; 376 377 navbar1 = "navbar-" + framegroup_name_index + "-1" 378 navbar2 = "navbar-" + framegroup_name_index + "-2" 379 navbar3 = "navbar-" + framegroup_name_index + "-3" 380 navbar4 = "navbar-" + framegroup_name_index + "-4" 381 navbar5 = "navbar-" + framegroup_name_index + "-5" 382 navbar6 = "navbar-" + framegroup_name_index + "-6" 383 384 var allframes = {"near": ["update","goodman","group","exchange","activity","help"], 385 "youni": ["lost","neitui","neigou","zhongchou","jiaoyu","zhekou"], 386 "message": ["friends","groups","platform","activiy_notify"], 387 "contacts": ["friends","groups","followers","followees"]}; 388 cur_win = allframes[framegroup_name_index]; 389 if(cur_win){ 390 $api.setStorage(framegroup_name_index,cur_win[frameIndex]); 391 console.log(framegroup_name_index + "frame " + cur_win[frameIndex]); 392 } 393 394 switch (frameIndex) { 395 case 0: 396 { 397 $api.byId(navbar1).className = "navbar-item navbar-item-active"; 398 $api.byId(navbar2).className = "navbar-item"; 399 $api.byId(navbar3).className = "navbar-item"; 400 $api.byId(navbar4).className = "navbar-item"; 401 402 if(navigatenum > 4) 403 { 404 $api.byId(navbar5).className = "navbar-item"; 405 $api.byId(navbar6).className = "navbar-item"; 406 } 407 var num = (api.winWidth / navigatenum) * frameIndex; 408 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 409 break; 410 } 411 case 1: 412 { 413 $api.byId(navbar1).className = "navbar-item"; 414 $api.byId(navbar2).className = "navbar-item navbar-item-active"; 415 $api.byId(navbar3).className = "navbar-item"; 416 $api.byId(navbar4).className = "navbar-item"; 417 418 if(navigatenum > 4) 419 { 420 $api.byId(navbar5).className = "navbar-item"; 421 $api.byId(navbar6).className = "navbar-item"; 422 } 423 var num = (api.winWidth / navigatenum) * frameIndex; 424 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 425 426 //jincm add log 427 console.log("winName is " + api.winName + " frameName is " + api.frameName); 428 break; 429 } 430 case 2: 431 { 432 $api.byId(navbar1).className = "navbar-item"; 433 $api.byId(navbar2).className = "navbar-item"; 434 $api.byId(navbar3).className = "navbar-item navbar-item-active"; 435 $api.byId(navbar4).className = "navbar-item"; 436 if(navigatenum > 4) 437 { 438 $api.byId(navbar5).className = "navbar-item"; 439 $api.byId(navbar6).className = "navbar-item"; 440 } 441 var num = (api.winWidth / navigatenum) * frameIndex; 442 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 443 break; 444 } 445 case 3: 446 { 447 $api.byId(navbar1).className = "navbar-item"; 448 $api.byId(navbar2).className = "navbar-item"; 449 $api.byId(navbar3).className = "navbar-item"; 450 $api.byId(navbar4).className = "navbar-item navbar-item-active"; 451 452 if(navigatenum > 4) 453 { 454 $api.byId(navbar5).className = "navbar-item"; 455 $api.byId(navbar6).className = "navbar-item"; 456 } 457 var num = (api.winWidth / navigatenum) * frameIndex; 458 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 459 break; 460 } 461 case 4: 462 { 463 $api.byId(navbar1).className = "navbar-item"; 464 $api.byId(navbar2).className = "navbar-item"; 465 $api.byId(navbar3).className = "navbar-item"; 466 $api.byId(navbar4).className = "navbar-item"; 467 468 if(navigatenum > 4) 469 { 470 $api.byId(navbar5).className = "navbar-item navbar-item-active"; 471 $api.byId(navbar6).className = "navbar-item"; 472 } 473 var num = (api.winWidth / navigatenum) * frameIndex; 474 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 475 break; 476 } 477 case 5: 478 { 479 $api.byId(navbar1).className = "navbar-item"; 480 $api.byId(navbar2).className = "navbar-item"; 481 $api.byId(navbar3).className = "navbar-item"; 482 $api.byId(navbar4).className = "navbar-item"; 483 if(navigatenum > 4) 484 { 485 $api.byId(navbar5).className = "navbar-item"; 486 $api.byId(navbar6).className = "navbar-item navbar-item-active"; 487 } 488 489 var num = (api.winWidth / navigatenum) * frameIndex; 490 $api.css($api.byId('navmark'), "-webkit-transform:translate(" + num + "px,0)"); 491 break; 492 } 493 default: 494 break; 495 } 496 } 497 498 // 打开第一个framegroup 499 function openNearFramegroup() { 500 api.openFrameGroup({ 501 name: 'near_framegroup', 502 background: '#FFF', 503 scrollEnabled: true, 504 rect: { 505 x: 0, 506 y: firstHeaderOffset.h + firstHeaderIndexHeight, 507 w: "auto", 508 h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight - footerPos.h 509 }, 510 index: 0, 511 frames: [{ 512 name: 'near_update', 513 url: './html/near/near_update.html', 514 bounces: false, 515 }, { 516 name: 'near_goodman', 517 url: './html/near/near_goodman.html', 518 bounces: false, 519 }, { 520 name: 'near_group', 521 url: './html/near/near_group.html', 522 bounces: false, 523 }, { 524 name: 'near_exchange', 525 url: './html/near/near_exchange.html', 526 bounces: false, 527 }, { 528 name: 'near_activity', 529 url: './html/near/near_activity.html', 530 bounces: false, 531 }, { 532 name: 'near_help', 533 url: './html/near/near_help.html', 534 bounces: false, 535 }] 536 }, function(ret) { 537 setFrameGroupStatus("near",6,ret.index); 538 //$api.setStorage(framegroup_name_index, "); 539 540 }); 541 } 542 543 544 // 打开 youniframegroup 545 function openyouniFramegroup() { 546 api.openFrameGroup({ 547 name: 'youni_framegroup', 548 background: '#FFF', 549 scrollEnabled: true, 550 rect: { 551 x: 0, 552 y: firstHeaderOffset.h + firstHeaderIndexHeight, 553 w: "auto", 554 h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight - footerPos.h 555 }, 556 index: 0, 557 frames: [{ 558 name: 'youni_lost', 559 url: './html/youni/youni_lost.html', 560 bounces: false, 561 }, { 562 name: 'youni_neitui', 563 url: './html/youni/youni_neitui.html', 564 bounces: false, 565 }, { 566 name: 'youni_neigou', 567 url: './html/youni/youni_neigou.html', 568 bounces: false, 569 }, { 570 name: 'youni_zhongchou', 571 url: './html/youni/youni_zhongchou.html', 572 bounces: false, 573 }, { 574 name: 'youni_jiaoyu', 575 url: './html/youni/youni_jiaoyu.html', 576 bounces: false, 577 }, { 578 name: 'youni_zhekou', 579 url: './html/youni/youni_zhekou.html', 580 bounces: false, 581 }] 582 }, function(ret) { 583 setFrameGroupStatus('youni',6,ret.index); 584 }); 585 } 586 587 // 打开messageframegroup 588 function openMessageFramegroup() { 589 api.openFrameGroup({ 590 name: 'message_framegroup', 591 background: '#FFF', 592 scrollEnabled: true, 593 rect: { 594 x: 0, 595 y: firstHeaderOffset.h + firstHeaderIndexHeight, 596 w: "auto", 597 h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight - footerPos.h 598 }, 599 index: 0, 600 frames: [{ 601 name: 'message_friends', 602 url: './html/message/message_friends.html', 603 bounces: false, 604 }, { 605 name: 'message_groups', 606 url: './html/message/message_groups.html', 607 bounces: false, 608 }, { 609 name: 'message_platform', 610 url: './html/message/message_platform.html', 611 bounces: false, 612 }, { 613 name: 'message_activity_notify', 614 url: './html/message/message_activity_notify.html', 615 bounces: false, 616 }] 617 }, function(ret) { 618 setFrameGroupStatus('message',4,ret.index); 619 }); 620 } 621 622 // 打开contactsframegroup 623 function openContactsFramegroup() { 624 api.openFrameGroup({ 625 name: 'contact_framegroup', 626 background: '#FFF', 627 scrollEnabled: true, 628 rect: { 629 x: 0, 630 y: firstHeaderOffset.h + firstHeaderIndexHeight, 631 w: "auto", 632 h: api.frameHeight - firstHeaderOffset.h - firstHeaderIndexHeight - footerPos.h 633 }, 634 index: 0, 635 frames: [{ 636 name: 'contact_friends', 637 url: './html/contacts/contact_friends.html', 638 bounces: false, 639 }, { 640 name: 'contact_groups', 641 url: './html/contacts/contact_groups.html', 642 bounces: false, 643 }, { 644 name: 'contact_followers', 645 url: './html/contacts/contact_followers.html', 646 bounces: false, 647 }, { 648 name: 'contact_followees', 649 url: './html/contacts/contact_followees.html', 650 bounces: false, 651 }] 652 }, function(ret) { 653 setFrameGroupStatus('contacts',4,ret.index); 654 }); 655 } 656 657 // 打开frame 658 function openframeinstance(frame, marginTop, isBounce) { 659 api.openFrame({ 660 name: frame, 661 url: './html/' + frame + '/' + frame + '_body.html', 662 rect: { 663 x: 0, 664 y: marginTop, 665 w: 'auto', 666 h: api.frameHeight - marginTop - footerPos.h 667 }, 668 // pageParam: {name: marginTop + footerPos.h}, 669 bounces: false, 670 vScrollBarEnabled: false, 671 hScrollBarEnabled: false, 672 delay: 200 673 }); 674 } 675 676 // 移动滑动块 677 function sliderbarCallback(id, num) { 678 // 得到背景元素的宽度 679 // var width=parseInt(window.getComputedStyle($api.byId('matchwidth'),null).width); 680 var width = parseInt(api.frameWidth / 2); 681 // api.alert({msg:width}); 682 if (num != 0) { 683 num = width; 684 } 685 console.log("id = " + id + "num = " + num + "width = " + width); 686 // 移动背景元素的宽度 在index.html不能获得 forth_frame.html上面的dom，虽然是在同一个手机屏幕上 687 $api.css($api.byId(id), "-webkit-transform:translate(" + num + "px,0)"); 688 } 689 690 // =================================== 691 // 响应底部按钮的切换frame 692 // =================================== 693 function switchframe(type) { 694 //alert(firstHeaderOffset.h); 695 console.log("type is " + type); 696 697 switch (type) { 698 case 'near_framegroup': 699 randomSwitchBtn('near_framegroup', 0); 700 hideAllFrame(); 701 if (isFirstOpen) { 702 showgroup('near_framegroup'); 703 } 704 else { 705 openNearFramegroup(); 706 isFirstOpen = true; 707 } 708 console.log("winName is " + api.winName + " frameName is " + api.frameName); 709 710 break; 711 case 'youni_framegroup': 712 randomSwitchBtn('youni_framegroup', 1); 713 hideAllFrame(); 714 if (isyouniOpen) { 715 //console.log("youni_framegroup show"); 716 showgroup('youni_framegroup'); 717 } 718 else { 719 openyouniFramegroup(); 720 isyouniOpen = true; 721 } 722 723 // openframeinstance('third_frame', firstHeaderOffset.h, false); 724 // openLeftgroup(); 725 // showframe('third_frame'); 726 break; 727 728 case 'message_framegroup': 729 randomSwitchBtn('message_framegroup', 2); 730 hideAllFrame(); 731 if (isMessageOpen) { 732 //console.log("message_framegroup show"); 733 showgroup('message_framegroup'); 734 } 735 else { 736 openMessageFramegroup(); 737 isMessageOpen = true; 738 } 739 // showgroup('hot'); 740 break; 741 742 743 case 'contact_framegroup': 744 randomSwitchBtn('contact_framegroup', 3); 745 hideAllFrame(); 746 if (isContactsOpen) { 747 //console.log("contact_framegroup show"); 748 showgroup('contact_framegroup'); 749 } 750 else { 751 openContactsFramegroup(); 752 isContactsOpen = true; 753 } 754 755 // openframeinstance('third_frame', firstHeaderOffset.h, false); 756 // openLeftgroup(); 757 // showframe('third_frame'); 758 break; 759 case 'myself': 760 randomSwitchBtn('myself', 4); 761 hideAllFrame(); 762 if (isMyselfOpen) { 763 showframe('myself'); 764 } 765 else { 766 openframeinstance('myself', firstHeaderOffset.h, false); 767 isMyselfOpen = true; 768 } 769 770 break; 771 default: 772 break; 773 } 774 775 } 776 777 // 完成首页初始化 778 apiready = function() { 779 // 设置ios7的标题栏字体变亮，全局用一个就行了 780 api.setStatusBarStyle({ 781 style: 'dark' 782 }); 783 784 firstHeader = $api.byId('nearHeader'); 785 youniHeader = $api.byId('youniHeader'); 786 messageHeader = $api.byId('messageHeader'); 787 contactsHeader = $api.byId('contactsHeader'); 788 fortheader = $api.byId('fortheader'); 789 790 var fortheader = $api.byId('fortheader'); 791 var firstHeaderIndex = $api.byId('firstHeaderIndex'); 792 793 $api.fixIos7Bar(firstHeader); 794 $api.fixIos7Bar(youniHeader); 795 $api.fixIos7Bar(messageHeader); 796 $api.fixIos7Bar(contactsHeader); 797 $api.fixIos7Bar(fortheader); 798 799 // TODO 一定记得修改 800 firstHeaderOffset = $api.offset(firstHeader); 801 firstHeaderIndexHeight = $api.offset(firstHeaderIndex).h; 802 803 firstHeaderOffset.h -= firstHeaderIndexHeight; 804 805 var main = $api.byId('main'); 806 var mainPos = $api.offset(main); 807 808 var footer = $api.byId('footer'); 809 var footerPos = $api.offset(footer); 810 811 var scrollHeight = $api.dom('.navbar').offsetHeight; 812 $api.byId('navmark').style.width = api.winWidth / 5 + 'px'; 813 isFirstOpen = true; 814 openNearFramegroup(); 815 816 //jincm test 817 key = "key1" 818 data = "data1" 819 $api.setStorage(key, data); 820 console.log("key=" + key + " data=" + data) 821 822 }; 823 </script> 824 </html>