123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- mui.init();
- var count = 0
- mui.back = function() {
- if(count % 2 == 0) {
- mui.toast('再按一次退出应用')
- } else {
- plus.runtime.quit();
- }
- count++;
- }
- window.addEventListener('resize', function() {
- var he = window.innerHeight <= 400 ? true : false;
- var html = '';
- if(he) {
- html += '<input style="border:1px solid red" id="val" type="text" placeholder="请输入评论的内容..."/><button class="btns">评论</button>';
- // mui('#tabbar')[0].innerHTML = html;
- document.getElementById('val').focus();
- } else {
- html += '<a id="defaultTab" class="mui-tab-item" href="home-index.html">'
- html += '<span class="mui-icon show"></span>'
- html += '<span class="mui-tab-label">工作</span>'
- html += '</a>'
- html += '<a class="mui-tab-item mui-active" href="communicate.html">'
- html += '<span class="mui-icon chat">'
- html += '<!--有新消息时显示,添加数字-->'
- html += '<!--<span class="mui-badge">9</span>-->'
- html += '</span>'
- html += '<span class="mui-tab-label">社交</span>'
- html += '</a>'
- html += '<a class="mui-tab-item" href="appliance.html">'
- html += '<span class="mui-icon app"></span>'
- html += '<span class="mui-tab-label">资讯</span>'
- html += '</a>'
- html += '<a class="mui-tab-item" href="my.html">'
- html += '<span class="mui-icon me"></span>'
- html += '<span class="mui-tab-label">我的</span>'
- html += '</a>'
- mui('#tabbar')[0].innerHTML = html;
- }
-
- }, false);
- mui(document.body).on('tap', '.btns', function() {
- var detailPage = plus.webview.getWebviewById('communicate.html');
- var val = mui('#tabbar input')[0].value;
- mui.fire(detailPage, 'sendValue', {
- val: val
- });
- mui('#tabbar input')[0].blur();
- });
- var subpages = [ 'home-index.html', 'communicate.html','appliance.html', 'my.html'];
- var aniShow = {}; //创建子页面,首个选项卡页面显示,其它均隐藏;
- mui.plusReady(function() {
- var subpage_style = {
- top: '46px',
- bottom: '50px'
- };
- var self = plus.webview.currentWebview();
- for(var i = 0; i < 4; i++) {
- var temp = {};
- var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
- if(i > 0) {
- sub.hide();
- } else {
- temp[subpages[i]] = "true";
- mui.extend(aniShow, temp);
- }
- self.append(sub);
- }
- });
- //当前激活选项
- var activeTab = subpages[0];
- var title = document.getElementById("title");
- var titleImg = mui(".title-img")[0]
- mui.plusReady(function() {
- var str = plus.storage.getItem('user');
- var user = JSON.parse(str)
- titleImg.innerHTML = '<img src="http://www.bosshand.cn/' + user.Data.Picture + '"/>'
- })
- //滑动
- //选项卡点击事件
- mui('.mui-bar-tab').on('tap', 'a', function(e) {
- var targetTab = this.getAttribute('href');
- if(targetTab == activeTab) {
- return;
- }
- //更换标题
- if(this.querySelector('.mui-tab-label').innerHTML == '工作') {
- title.innerHTML = 'BOSSHAND';
- titleImg.style.display = 'inline-block';
- } else {
- title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
- titleImg.style.display = 'none';
- }
- //显示目标选项卡
- //若为iOS平台或非首次显示,则直接显示
- if(mui.os.ios || aniShow[targetTab]) {
- plus.webview.show(targetTab);
- } else {
- //否则,使用fade-in动画,且保存变量
- var temp = {};
- temp[targetTab] = "true";
- mui.extend(aniShow, temp);
- plus.webview.show(targetTab, "fade-in", 400);
- }
- //隐藏当前;
- plus.webview.hide(activeTab);
- //更改当前活跃的选项卡
- activeTab = targetTab;
- });
- //自定义事件,模拟点击“首页选项卡”
- document.addEventListener('gohome', function() {
- var defaultTab = document.getElementById("defaultTab");
- //模拟首页点击
- mui.trigger(defaultTab, 'tap');
- //切换选项卡高亮
- var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
- if(defaultTab !== current) {
- current.classList.remove('mui-active');
- defaultTab.classList.add('mui-active');
- }
- });
|