1
0

index.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890
  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. <style type="text/css">
  11. #list {
  12. /*避免导航边框和列表背景边框重叠,看起来像两条边框似得;*/
  13. margin-top: -1px;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div class="mui-content">
  19. <ul id="list" class="mui-table-view mui-table-view-chevron">
  20. <li class="mui-table-view-cell">
  21. <a class="mui-navigate-right" href="examples/accordion.html">
  22. accordion(折叠面板)
  23. </a>
  24. </li>
  25. <li class="mui-table-view-cell mui-collapse">
  26. <a class="mui-navigate-right" href="#">
  27. actionsheet(操作表)
  28. </a>
  29. <ul class="mui-table-view mui-table-view-chevron">
  30. <li class="mui-table-view-cell">
  31. <a class="mui-navigate-right" href="examples/actionsheet.html">
  32. H5模式
  33. </a>
  34. </li>
  35. <li class="mui-table-view-cell mui-plus-visible">
  36. <a class="mui-navigate-right" href="examples/actionsheet-plus.html">
  37. native模式
  38. </a>
  39. </li>
  40. </ul>
  41. </li>
  42. <li class="mui-table-view-cell mui-plus-visible">
  43. <a class="mui-navigate-right" href="examples/ajax.html">
  44. ajax(网络请求)
  45. </a>
  46. </li>
  47. <li class="mui-table-view-cell">
  48. <a class="mui-navigate-right" href="examples/badges.html">
  49. badge(数字角标)
  50. </a>
  51. </li>
  52. <li class="mui-table-view-cell mui-collapse">
  53. <a class="mui-navigate-right" href="#">
  54. button(按钮)
  55. </a>
  56. <ul class="mui-table-view mui-table-view-chevron">
  57. <li class="mui-table-view-cell">
  58. <a class="mui-navigate-right" href="examples/buttons.html">
  59. 普通按钮
  60. </a>
  61. </li>
  62. <li class="mui-table-view-cell">
  63. <a class="mui-navigate-right" href="examples/buttons-with-icons.html">
  64. 带图标的按钮
  65. </a>
  66. </li>
  67. <li class="mui-table-view-cell">
  68. <a class="mui-navigate-right" href="examples/buttons-with-badges.html">
  69. 带数字的按钮
  70. </a>
  71. </li>
  72. <li class="mui-table-view-cell">
  73. <a class="mui-navigate-right" data-title-type="native" href="examples/buttons-with-block.html">
  74. 块级按钮
  75. </a>
  76. </li>
  77. <li class="mui-table-view-cell">
  78. <a class="mui-navigate-right" data-title-type="native" href="examples/buttons-with-loading.html">
  79. 加载中按钮
  80. </a>
  81. </li>
  82. </ul>
  83. </li>
  84. <li class="mui-table-view-cell">
  85. <a class="mui-navigate-right" data-title-type="native" href="examples/card.html">
  86. cardview(卡片视图)
  87. </a>
  88. </li>
  89. <li class="mui-table-view-cell">
  90. <a class="mui-navigate-right" href="examples/checkbox.html">
  91. checkbox(复选框)
  92. </a>
  93. </li>
  94. <li class="mui-table-view-cell mui-collapse">
  95. <a class="mui-navigate-right" href="#">
  96. date time(日期时间)
  97. </a>
  98. <ul class="mui-table-view mui-table-view-chevron">
  99. <li class="mui-table-view-cell">
  100. <a class="mui-navigate-right" data-title-type="native" href="examples/dtpicker.html">
  101. H5模式
  102. </a>
  103. </li>
  104. <li class="mui-table-view-cell mui-plus-visible">
  105. <a class="mui-navigate-right" href="examples/date.html">
  106. native模式
  107. </a>
  108. </li>
  109. </ul>
  110. </li>
  111. <li class="mui-table-view-cell">
  112. <a class="mui-navigate-right" href="examples/dialog.html">
  113. dialog(消息框)
  114. </a>
  115. </li>
  116. <li class="mui-table-view-cell mui-collapse">
  117. <a class="mui-navigate-right" href="#">
  118. gallery slider(图片轮播)
  119. </a>
  120. <ul class="mui-table-view mui-table-view-chevron">
  121. <li class="mui-table-view-cell">
  122. <a class="mui-navigate-right" href="examples/slider-default.html">
  123. 默认样式(H5模式)
  124. </a>
  125. </li>
  126. <li class="mui-table-view-cell mui-plus-visible">
  127. <a class="mui-navigate-right" data-title-type="native" href="examples/slider-native.html">
  128. 默认样式(native模式)
  129. </a>
  130. </li>
  131. <li class="mui-table-view-cell">
  132. <a class="mui-navigate-right" href="examples/slider-with-title.html">
  133. 下方悬浮标题
  134. </a>
  135. </li>
  136. </ul>
  137. </li>
  138. <li class="mui-table-view-cell mui-collapse">
  139. <a class="mui-navigate-right" href="#">
  140. gallery table(图文表格)
  141. </a>
  142. <ul class="mui-table-view mui-table-view-chevron">
  143. <li class="mui-table-view-cell">
  144. <a class="mui-navigate-right" href="examples/slider-table-default.html">
  145. 默认样式
  146. </a>
  147. </li>
  148. <li class="mui-table-view-cell">
  149. <a class="mui-navigate-right" href="examples/slider-table-pagination.html">
  150. 左右滑动分页样式
  151. </a>
  152. </li>
  153. </ul>
  154. </li>
  155. <li class="mui-table-view-cell mui-collapse">
  156. <a class="mui-navigate-right" href="#">
  157. grid(9宫格)
  158. </a>
  159. <ul class="mui-table-view mui-table-view-chevron">
  160. <li class="mui-table-view-cell">
  161. <a class="mui-navigate-right" href="examples/grid-default.html">
  162. 默认样式
  163. </a>
  164. </li>
  165. <li class="mui-table-view-cell">
  166. <a class="mui-navigate-right" href="examples/grid-pagination.html">
  167. 可左右滑动的9宫导航
  168. </a>
  169. </li>
  170. </ul>
  171. </li>
  172. <li class="mui-table-view-cell mui-collapse">
  173. <a href="#" class="mui-navigate-right">icon(图标)</a>
  174. <ul class="mui-table-view mui-table-view-chevron">
  175. <li class="mui-table-view-cell">
  176. <a class="mui-navigate-right" data-title-type="native" href="examples/icons.html">
  177. 内置图标
  178. </a>
  179. </li>
  180. <li class="mui-table-view-cell">
  181. <a class="mui-navigate-right" data-title-type="native" href="examples/icons-extra.html">
  182. 扩展图标
  183. </a>
  184. </li>
  185. </ul>
  186. </li>
  187. <li class="mui-table-view-cell">
  188. <a class="mui-navigate-right" href="examples/input.html">
  189. input(输入框)
  190. </a>
  191. </li>
  192. <li class="mui-table-view-cell mui-collapse">
  193. <a class="mui-navigate-right" href="#">
  194. list(列表)
  195. </a>
  196. <ul class="mui-table-view mui-table-view-chevron">
  197. <li class="mui-table-view-cell">
  198. <a class="mui-navigate-right" data-title-type="native" href="examples/tableviews.html">
  199. 普通列表
  200. </a>
  201. </li>
  202. <li class="mui-table-view-cell">
  203. <a class="mui-navigate-right" data-title-type="native" href="examples/tableviews-with-badges.html">
  204. 右侧带数字角标
  205. </a>
  206. </li>
  207. <li class="mui-table-view-cell">
  208. <a class="mui-navigate-right" data-title-type="native" href="examples/list-with-input.html">
  209. 列表带input类控件
  210. </a>
  211. </li>
  212. <li class="mui-table-view-cell">
  213. <a class="mui-navigate-right" data-title-type="native" href="examples/list-triplex-row.html">
  214. 三行列表
  215. </a>
  216. </li>
  217. <li class="mui-table-view-cell">
  218. <a class="mui-navigate-right" href="examples/tableviews-with-collapses.html">
  219. 二级列表
  220. </a>
  221. </li>
  222. <li class="mui-table-view-cell">
  223. <a class="mui-navigate-right" data-title-type="native" href="examples/tableviews-with-swipe.html">
  224. 滑动触发列表项菜单
  225. </a>
  226. </li>
  227. </ul>
  228. </li>
  229. <li class="mui-table-view-cell">
  230. <a class="mui-navigate-right" data-title-type="native" href="examples/media-list.html">
  231. media list(图文列表)
  232. </a>
  233. </li>
  234. <li class="mui-table-view-cell mui-collapse">
  235. <a href="#" class="mui-navigate-right">nav bar(导航栏)</a>
  236. <ul class="mui-table-view mui-table-view-chevron">
  237. <li class="mui-table-view-cell">
  238. <a class="mui-navigate-right" href="examples/nav.html">
  239. 默认标题(div模式)
  240. </a>
  241. </li>
  242. <li class="mui-table-view-cell mui-plus-visible">
  243. <a class="mui-navigate-right" data-title-type="native" href="examples/nav-nativeObj.html">
  244. 默认标题(native模式)
  245. </a>
  246. </li>
  247. <li class="mui-table-view-cell">
  248. <a class="mui-navigate-right" href="examples/nav_transparent.html">
  249. 透明渐变(div模式)
  250. </a>
  251. </li>
  252. <li class="mui-table-view-cell mui-plus-visible">
  253. <a class="mui-navigate-right" data-title-type="transparent_native" href="examples/nav_transparent_native.html">
  254. 透明渐变(native模式)
  255. </a>
  256. </li>
  257. </ul>
  258. </li>
  259. <li class="mui-table-view-cell">
  260. <a class="mui-navigate-right" data-title-type="native" href="examples/numbox.html">
  261. number box(数字输入框)
  262. </a>
  263. </li>
  264. <li class="mui-table-view-cell mui-collapse">
  265. <a class="mui-navigate-right" href="#">
  266. off canvas(侧滑导航)
  267. </a>
  268. <ul class="mui-table-view mui-table-view-chevron">
  269. <li class="mui-table-view-cell mui-plus-visible">
  270. <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right-plus-main.html">
  271. webview模式右滑菜单
  272. </a>
  273. </li>
  274. <li class="mui-table-view-cell mui-plus-visible">
  275. <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left-plus-main.html">
  276. webview模式左滑菜单
  277. </a>
  278. </li>
  279. <li class="mui-table-view-cell">
  280. <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-right.html">
  281. div模式右滑菜单
  282. </a>
  283. </li>
  284. <li class="mui-table-view-cell">
  285. <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-left.html">
  286. div模式左滑菜单
  287. </a>
  288. </li>
  289. <li class="mui-table-view-cell">
  290. <a class="mui-navigate-right" open-type="common" href="examples/offcanvas-drag-down.html">
  291. div模式下拉菜单
  292. </a>
  293. </li>
  294. </ul>
  295. </li>
  296. <li class="mui-table-view-cell">
  297. <a class="mui-navigate-right" data-title-type="native" href="examples/pagination.html">
  298. pagination(分页)
  299. </a>
  300. </li>
  301. <li class="mui-table-view-cell">
  302. <a class="mui-navigate-right" data-title-type="native" href="examples/picker.html">
  303. picker(选择器)
  304. </a>
  305. </li>
  306. <li class="mui-table-view-cell">
  307. <a class="mui-navigate-right" href="examples/popovers.html">
  308. popover(弹出菜单)
  309. </a>
  310. </li>
  311. <li class="mui-table-view-cell">
  312. <a class="mui-navigate-right" href="examples/progressbar.html">
  313. progress bar(进度条)
  314. </a>
  315. </li>
  316. <li class="mui-table-view-cell mui-collapse">
  317. <a href="#" class="mui-navigate-right">pull to refresh(下拉刷新和上拉加载更多)</a>
  318. <ul class="mui-table-view mui-table-view-chevron">
  319. <li class="mui-table-view-cell">
  320. <a class="mui-navigate-right" href="examples/pullrefresh_main.html">
  321. 双webview模式
  322. </a>
  323. </li>
  324. <li class="mui-table-view-cell">
  325. <a class="mui-navigate-right" data-title-type="native" href="examples/pullrefresh.html">
  326. 单webview模式
  327. </a>
  328. </li>
  329. <li class="mui-table-view-cell">
  330. <a class="mui-navigate-right" href="examples/pullrefresh_with_tab.html">
  331. 选项卡切换+下拉刷新(div模式)
  332. </a>
  333. </li>
  334. </ul>
  335. </li>
  336. <li class="mui-table-view-cell">
  337. <a class="mui-navigate-right" data-title-type="native" href="examples/radio.html">
  338. radio(单选框)
  339. </a>
  340. </li>
  341. <li class="mui-table-view-cell">
  342. <a class="mui-navigate-right" href="examples/range.html">
  343. range(滑块)
  344. </a>
  345. </li>
  346. <li class="mui-table-view-cell">
  347. <a class="mui-navigate-right" data-title-type="native" href="examples/switches.html">
  348. switch(开关)
  349. </a>
  350. </li>
  351. <li class="mui-table-view-cell mui-collapse">
  352. <a class="mui-navigate-right" href="#">
  353. tab bar(选项卡)
  354. </a>
  355. <ul class="mui-table-view mui-table-view-chevron">
  356. <li class="mui-table-view-cell">
  357. <a class="mui-navigate-right" data-title-type="native" href="examples/tabbar.html">
  358. 底部选项卡-div模式
  359. </a>
  360. </li>
  361. <li class="mui-table-view-cell mui-plus-visible">
  362. <a class="mui-navigate-right" href="examples/tab-webview-main.html">
  363. 底部选项卡-webview模式
  364. </a>
  365. </li>
  366. <li class="mui-table-view-cell">
  367. <a class="mui-navigate-right" href="examples/tabbar-with-submenus.html">
  368. 底部选项卡-二级菜单(div)
  369. </a>
  370. </li>
  371. <li class="mui-table-view-cell">
  372. <a class="mui-navigate-right" href="examples/tab-with-segmented-control.html">
  373. 顶部选项卡-div模式
  374. </a>
  375. </li>
  376. <li class="mui-table-view-cell">
  377. <a class="mui-navigate-right" href="examples/tab-with-viewpagerindicator.html">
  378. 顶部选项卡-可左右拖动(div)
  379. </a>
  380. </li>
  381. <li class="mui-table-view-cell mui-plus-visible">
  382. <a class="mui-navigate-right" data-wid="viewgroup" href="examples/tab-top-webview-main.html">
  383. 顶部选项卡-可左右拖动(webview)
  384. </a>
  385. </li>
  386. <li class="mui-table-view-cell">
  387. <a class="mui-navigate-right" data-title-type="native" href="examples/tab-with-segmented-control-vertical.html">
  388. 左侧选项卡-div模式
  389. </a>
  390. </li>
  391. <li class="mui-table-view-cell">
  392. <a class="mui-navigate-right" data-title-type="native" href="examples/tab-vertical-scroll.html">
  393. 左侧选项卡-div模式-联动高亮
  394. </a>
  395. </li>
  396. </ul>
  397. </li>
  398. <li class="mui-table-view-cell">
  399. <a class="mui-navigate-right" href="examples/typography.html">
  400. typography(文字)
  401. </a>
  402. </li>
  403. <li class="mui-table-view-divider">模板</li>
  404. <li class="mui-table-view-cell mui-plus-visible">
  405. <a class="mui-navigate-right" href="examples/ad.html">
  406. advertisement(广告演示)
  407. </a>
  408. </li>
  409. <li class="mui-table-view-cell">
  410. <a class="mui-navigate-right" href="examples/echarts.html">
  411. chart(EChart图表)
  412. </a>
  413. </li>
  414. <li class="mui-table-view-cell mui-plus-visible">
  415. <a class="mui-navigate-right" data-title-type="native" href="examples/im-chat.html">
  416. chat(聊天窗口)
  417. </a>
  418. </li>
  419. <li class="mui-table-view-cell mui-plus-visible">
  420. <a class="mui-navigate-right" href="examples/clouddb_wilddog.html">
  421. cloud DB(云端数据库)
  422. </a>
  423. </li>
  424. <li class="mui-table-view-cell mui-plus-visible">
  425. <a class="mui-navigate-right" href="examples/beecloud.html">
  426. cloud Pay(云端支付)
  427. </a>
  428. </li>
  429. <li class="mui-table-view-cell mui-plus-visible">
  430. <a class="mui-navigate-right" href="examples/feedback.html">
  431. feedback(问题反馈)
  432. </a>
  433. </li>
  434. <li class="mui-table-view-cell mui-collapse">
  435. <a href="javascript:;" class="mui-navigate-right">image viewer(图片预览)</a>
  436. <ul class="mui-table-view mui-table-view-chevron">
  437. <li class="mui-table-view-cell">
  438. <a class="mui-navigate-right" href="examples/imageviewer.html">H5模式</a>
  439. </li>
  440. <li class="mui-table-view-cell mui-plus-visible" id="preview_image_native">
  441. <a class="mui-navigate-right" data-title-type="native" href="examples/imageviewer-native.html">native模式</a>
  442. </li>
  443. </ul>
  444. </li>
  445. <li class="mui-table-view-cell mui-collapse">
  446. <a class="mui-navigate-right" href="#">
  447. indexed list(索引列表)
  448. </a>
  449. <ul class="mui-table-view mui-table-view-chevron">
  450. <li class="mui-table-view-cell">
  451. <a class="mui-navigate-right" href="examples/indexed-list.html">
  452. 展示模式
  453. </a>
  454. </li>
  455. <li class="mui-table-view-cell">
  456. <a class="mui-navigate-right" href="examples/indexed-list-select.html">
  457. 选择模式
  458. </a>
  459. </li>
  460. </ul>
  461. </li>
  462. <li class="mui-table-view-cell">
  463. <a class="mui-navigate-right" data-title-type="native" href="examples/lazyload-image.html">
  464. lazyload(懒加载)
  465. </a>
  466. </li>
  467. <li class="mui-table-view-cell">
  468. <a class="mui-navigate-right" href="examples/locker-dom.html">
  469. locker(手势图案锁屏)
  470. </a>
  471. </li>
  472. <li class="mui-table-view-cell">
  473. <a class="mui-navigate-right" data-title-type="native" href="examples/login.html">
  474. login(登录)
  475. </a>
  476. </li>
  477. <li class="mui-table-view-cell">
  478. <a class="mui-navigate-right" open-type="common" href="examples/setting.html">
  479. setting(设置)- div窗体切换示例
  480. </a>
  481. </li>
  482. <li class="mui-table-view-cell">
  483. <a class="mui-navigate-right" data-title-type="native" href="examples/best-practices/list-to-detail/listview.html">
  484. 列表到详情最佳实践
  485. </a>
  486. </li>
  487. </ul>
  488. </div>
  489. <script src="js/mui.min.js"></script>
  490. <script src="js/update.js" type="text/javascript" charset="utf-8"></script>
  491. <script>
  492. mui.init({
  493. statusBarBackground: '#f7f7f7'
  494. });
  495. var aniShow = "pop-in";
  496. var menu = null,
  497. showMenu = false;
  498. var isInTransition = false;
  499. var _self;
  500. //只有ios支持的功能需要在Android平台隐藏;
  501. if(mui.os.android) {
  502. var list = document.querySelectorAll('.ios-only');
  503. if(list) {
  504. for(var i = 0; i < list.length; i++) {
  505. list[i].style.display = 'none';
  506. }
  507. }
  508. //Android平台暂时使用slide-in-right动画
  509. if(parseFloat(mui.os.version) < 4.4) {
  510. aniShow = "slide-in-right";
  511. }
  512. }
  513. //初始化,并预加载webview模式的选项卡
  514. function preload() {
  515. var menu_style = {
  516. left: "-70%",
  517. width: '70%',
  518. popGesture: "none",
  519. render:"always"
  520. };
  521. if(mui.os.ios) {
  522. menu_style.zindex = -1;
  523. }
  524. //处理侧滑导航,为了避免和子页面初始化等竞争资源,延迟加载侧滑页面;
  525. menu = mui.openWindow({
  526. id: 'index-menu',
  527. url: 'index-menu.html',
  528. styles: menu_style,
  529. show: {
  530. aniShow: 'none'
  531. },
  532. waiting: {
  533. autoShow: false
  534. }
  535. });
  536. }
  537. mui.plusReady(function() {
  538. //读取本地存储,检查是否为首次启动
  539. var showGuide = plus.storage.getItem("lauchFlag");
  540. //仅支持竖屏显示
  541. plus.screen.lockOrientation("portrait-primary");
  542. if(showGuide) {
  543. //有值,说明已经显示过了,无需显示;
  544. //关闭splash页面;
  545. plus.navigator.closeSplashscreen();
  546. plus.navigator.setFullscreen(false);
  547. //预加载
  548. preload();
  549. } else {
  550. //显示启动导航
  551. mui.openWindow({
  552. id: 'guide',
  553. url: 'examples/guide.html',
  554. styles: {
  555. popGesture: "none"
  556. },
  557. show: {
  558. aniShow: 'none'
  559. },
  560. waiting: {
  561. autoShow: false
  562. }
  563. });
  564. //延迟的原因:优先打开启动导航页面,避免资源争夺
  565. setTimeout(function() {
  566. //预加载
  567. preload();
  568. }, 200);
  569. }
  570. //绘制顶部图标
  571. _self = plus.webview.currentWebview();
  572. var titleView = _self.getNavigationbar();
  573. if(!titleView) {
  574. titleView = plus.webview.getLaunchWebview().getNavigationbar();
  575. }
  576. titleView.drawRect("#cccccc", {
  577. top: "43px",
  578. height:"1px",
  579. left: "0px"
  580. }); //绘制底部边线
  581. //开启回弹
  582. _self.setStyle({
  583. bounce: "vertical",
  584. bounceBackground:"#efeff4",
  585. popGesture:'none'//首页有侧滑菜单,因此屏蔽首页的侧滑关闭功能
  586. });
  587. //绘制左上角menu图标
  588. var bitmap_menu = new plus.nativeObj.Bitmap("menu");
  589. bitmap_menu.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAKlBMVEUAAAAAev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8Aev8AAABINtoqAAAADHRSTlMA/fPQ0M/e3tzs7OjgY5g4AAAAAWJLR0QAiAUdSAAAAAd0SU1FB+EBFwEbOGGUPSIAAAA2SURBVDjLY2AY9oDxDBZwCJ8EswsW4DrQ/hicgPTQZSvHAioG2h+DE5AeupyrsIDVA+0PqgEAu36BkQX5nBQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTctMDEtMjNUMDE6Mjc6NTYrMDg6MDC8FK1uAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE3LTAxLTIzVDAxOjI3OjU2KzA4OjAwzUkV0gAAAABJRU5ErkJggg==");
  590. titleView.drawBitmap(bitmap_menu, {}, {
  591. top: "10px",
  592. left: "10px",
  593. width: "24px",
  594. height: "24px"
  595. });
  596. var about_left = window.innerWidth - 34;
  597. var bitmap = new plus.nativeObj.Bitmap("about");
  598. bitmap.loadBase64Data("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QAAKqNIzIAAAAHdElNRQfhARcBEina5qaZAAAB10lEQVRYw+2XP0vDQBiHf7Wlq63gLAgV/QpOBnEpZHJycBL6Lq2LuFq6Kn6AK2RxKQhu2aS0XQT7DbTgLqVGR4OlDtL8uUu8S3Lape/Wy93z5L1r7t4DlrHoyCXrznZRhEsPWgUsj0PUsC886KKNO5pmErAKWjj6tUsHTRqlErBVXONEaR4snNFHQgHbQ08JPg+D+lHNKzH4ekI80GP1qOZ8JP4ClwnxAFA1Z/ZAQcDqqfAAYJgTexhuEtYg8dwLkvBacAJWxlsmPACskeP/4Bf5KjOeY4QyYBU8SwZv4x2P2JD02vI/vXAGLcnAFj3RK06lOQQ4gQwU5v8FO3Bxg2OpwluHQqDxQDpsE5/SPnPWrThFNcXBKuGxvClieXxpFACFn43cz6CsNMygHAylnmV+ita1vr/HS5qBeggZFDULirzA1SxweYGTEhQXDi8YaxaM/zsDmqKrEd+d10vBraKtUeCxgoJ7jQKPFRCQg44mfMc/NJOeaGoRd6LRCJYGvBWsVflD/1yDIMTgBOQobsbxYVDoixJqU+qjkQHf4EvgiNLRHpqzlHk0SairIotfe2BOUE3x9hFl26LuBwD1UVL+01ooReMXe0fzJH95yxRkie/Jy5DGN/4FegI2+YzMAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTAxLTIzVDAxOjE4OjQxKzA4OjAw3fCu8gAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0wMS0yM1QwMToxODo0MSswODowMKytFk4AAAAASUVORK5CYII=");
  599. titleView.drawBitmap(bitmap, {}, {
  600. top: "10px",
  601. left: about_left + "px",
  602. width: "24px",
  603. height: "24px"
  604. });
  605. titleView.interceptTouchEvent(true);
  606. titleView.addEventListener("click", function(e) {
  607. var x = e.clientX;
  608. if(x < 44) { //触发menu菜单
  609. var _left = parseInt(_self.getStyle().left);
  610. if(_left > 0) { //处于显示状态
  611. closeMenu();
  612. } else {
  613. openMenu();
  614. }
  615. } else if(x > about_left) { //触发关于页面
  616. var aniShow = mui.os.plus ? "slide-in-right" : "zoom-fade-out";
  617. mui.openWindow({
  618. url: "examples/info.html",
  619. id: "info",
  620. styles: {
  621. popGesture: "close",
  622. statusbar: {
  623. background: "#f7f7f7"
  624. }
  625. },
  626. show: {
  627. aniShow: aniShow,
  628. duration: 300
  629. }
  630. });
  631. }
  632. }, false);
  633. //启用侧滑拖拽操作,延时的原因是menu页是延时创建的,所以这里需要相应延时
  634. setTimeout(function() {
  635. _self.drag({
  636. direction: "right",
  637. moveMode: "followFinger"
  638. }, {
  639. view: menu,
  640. moveMode: "follow"
  641. }, function(e) {
  642. //console.log(JSON.stringify(e));
  643. });
  644. }, 350);
  645. // 原生图片预览仅新版本runtime支持,若引擎不支持,则隐藏;
  646. if(!plus.nativeUI.previewImage) {
  647. var previewImageNativeElem = document.getElementById('preview_image_native');
  648. previewImageNativeElem.className = previewImageNativeElem.className.replace('mui-plus-visible', 'mui-hidden');
  649. }
  650. });
  651. //主列表点击事件
  652. mui('#list').on('tap', 'a', function() {
  653. var href = this.getAttribute('href');
  654. //非plus环境,直接走href跳转
  655. if(!mui.os.plus) {
  656. location.href = href;
  657. return;
  658. }
  659. var id = this.getAttribute("data-wid");
  660. if(!id) {
  661. id = href;
  662. }
  663. if(href && ~href.indexOf('.html')) {
  664. //打开窗口的相关参数
  665. var options = {
  666. styles:{
  667. popGesture: "close"
  668. },
  669. extras:{}
  670. };
  671. //如下场景不适用下拉回弹:
  672. //1、单webview下拉刷新;2、底部有fixed定位的div的页面
  673. if(!~id.indexOf('pullrefresh.html') && !~href.indexOf("examples/tabbar.html") && !~href.indexOf("list-to-detail/listview.html")) {
  674. options.styles.bounce = "vertical";
  675. }
  676. //图标页面需要启动硬件加速
  677. if(~id.indexOf('icons.html') || ~id.indexOf("echarts.html")) {
  678. options.styles.hardwareAccelerated = true;
  679. }
  680. if(~id.indexOf('im-chat.html')) {
  681. options.extras.acceleration = "none";
  682. }
  683. var titleType = this.getAttribute("data-title-type");
  684. if(titleType && titleType.indexOf("native") > -1) {//原生导航
  685. options.styles.titleNView = {
  686. autoBackButton:true,
  687. backgroundColor:'#f7f7f7',
  688. titleText:this.innerHTML.trim(),
  689. splitLine: {
  690. color: '#cccccc'
  691. }
  692. };
  693. options.show = {
  694. event:'loaded'
  695. }
  696. //有原生标题的情况下,就不需要waiting框了
  697. options.waiting = {
  698. autoShow:false
  699. }
  700. //透明渐变导航,增加类型设置
  701. if(titleType == "transparent_native") {
  702. options.styles.titleNView.type = "transparent";
  703. }
  704. //处理原生图片轮播
  705. if(~id.indexOf("slider-native.html")) {
  706. options.styles.subNViews = [{ //配置图片轮播
  707. id: 'slider-native',
  708. type: 'ImageSlider',
  709. styles: {
  710. left: 0,
  711. right: 0,
  712. top: 0,
  713. height: '200px',
  714. position: 'static',
  715. loop: true,
  716. images: [{
  717. src: '_www/images/yuantiao.jpg',
  718. width: '100%'
  719. }, {
  720. src: '_www/images/shuijiao.jpg',
  721. width: '100%',
  722. }, {
  723. src: '_www/images/muwu.jpg',
  724. width: '100%',
  725. }, {
  726. src: '_www/images/cbd.jpg',
  727. width: '100%',
  728. }]
  729. }
  730. }];
  731. }
  732. }else{
  733. //非原生导航,需要设置顶部状态栏占位
  734. options.styles.statusbar = {
  735. background: "#f7f7f7"
  736. }
  737. }
  738. //侧滑菜单需动态控制一下zindex值;
  739. if(~id.indexOf('offcanvas-')) {
  740. options.styles.zindex = 9998;
  741. options.styles.popGesture = ~id.indexOf('offcanvas-with-right') ? "close" : "none";
  742. }
  743. if(id && id == "viewgroup") { //强制启用截屏
  744. options.extras.acceleration = "capture";
  745. }
  746. //打开新窗口
  747. mui.openWindow(href,id,options);
  748. }
  749. });
  750. /**
  751. * 显示侧滑菜单
  752. */
  753. function openMenu() {
  754. plus.webview.startAnimation({
  755. 'view': _self,
  756. 'styles': {
  757. 'fromLeft': '0',
  758. 'toLeft': "70%"
  759. },
  760. 'action': 'show'
  761. }, {
  762. 'view': menu,
  763. 'styles': {
  764. 'fromLeft': "-70%",
  765. 'toLeft': '0'
  766. },
  767. 'action': 'show'
  768. },
  769. function(e) {
  770. //console.log(JSON.stringify(e));
  771. if(e.id == menu.id) { //侧滑菜单打开
  772. }
  773. }.bind(this)
  774. )
  775. };
  776. /**
  777. * 关闭菜单
  778. */
  779. function closeMenu() {
  780. plus.webview.startAnimation({
  781. 'view': _self,
  782. 'styles': {
  783. 'fromLeft': '70%',
  784. 'toLeft': "0"
  785. },
  786. 'action': 'show'
  787. }, {
  788. 'view': menu,
  789. 'styles': {
  790. 'fromLeft': "0",
  791. 'toLeft': '-70%'
  792. },
  793. 'action': 'show'
  794. },
  795. function(e) {
  796. console.log(JSON.stringify(e));
  797. if(e.id == _self.id) {}
  798. }.bind(this)
  799. )
  800. };
  801. window.addEventListener("menu:close", closeMenu);
  802. var _toast = false;
  803. mui.back = function() {
  804. if(parseInt(_self.getStyle().left) > 0) {
  805. closeMenu();
  806. return;
  807. }
  808. if(!_toast || !_toast.isVisible()) {
  809. _toast = mui.toast('再按一次返回键退出<br>点此可&nbsp;<span style="border-bottom:1px solid #fff" onclick="openFeedback();">反馈意见</span>', {
  810. duration: 'long',
  811. type: 'div'
  812. });
  813. } else {
  814. plus.runtime.quit();
  815. }
  816. }
  817. //重写mui.menu方法,Android版本menu按键按下可自动打开、关闭侧滑菜单;
  818. mui.menu = function() {
  819. if(parseInt(_self.getStyle().left) > 0) {
  820. closeMenu();
  821. } else {
  822. openMenu();
  823. }
  824. }
  825. /**
  826. * 退出时提醒用户参加问题反馈
  827. */
  828. function openFeedback() {
  829. plus.nativeUI.showWaiting();
  830. var _p = plus.os.name === 'Android' ? 'a' : plus.os.name === 'iOS' ? 'i' : '';
  831. //TODO:这里使用的是FeedBack云地址,开发者也可以替换为本地页面地址
  832. var url = 'http://stream.dcloud.net.cn/wap2app/feedback?p=' + _p;
  833. url += "&plus_version=" + plus.runtime.innerVersion;
  834. url += "&vendor=" + plus.device.vendor;
  835. url += "&md=" + plus.device.model;
  836. /*****开发者需修改的部分 开始*****/
  837. url += "&app_name=HelloMUI&app_vendor=DCloud";
  838. //如有本地关于页面,则填写关于页面的路径
  839. //注意:需要_www/前缀
  840. url += "&about=_www/examples/info.html";
  841. /*****开发者需修改的部分 结束*****/
  842. var feedbackWebview = plus.webview.create(url, "__W2A_FEEDBACK");
  843. feedbackWebview.addEventListener('titleUpdate', function() {
  844. plus.nativeUI.closeWaiting();
  845. feedbackWebview.show('slide-in-right', 300);
  846. });
  847. }
  848. </script>
  849. </body>
  850. </html>