Index頁面-使用選項卡實現(xiàn)header2

Index頁面第一步：新建index頁面利用自定義模板建立空白頁面第二步：將該頁底部欄等所需圖片放入images文件夾。第三步：在對應(yīng)文件中加入自定義類1、在ui-color.css文件中加入以下代碼.bc-red1{background-color:#c92440;}.bc-text-gra2{color:#cdcdcd!important;}.bc-gra1{background-color:#eeeeee;}2、在ui-base.css文件中加入以下代碼：.uinn6-d{margin:0.45em0;}.foot-umh{height:2.75em;}3、在appcan.icon.css文件中加入以下代碼：.res12{background-image:url('images/search.png');height:1.3em;}.res11{background-image:url('images/saomiao.png');}4、在my_style.css文件中加入以下代碼：.b-gra-f{border-top:1pxsolid#c92440;}.uh3{ height:3em;}.uw2{ width:1.25em;}.uh2{ height:1.25em;}第四步：引入相關(guān)文件在head中引入：<linkrel="stylesheet"href="css/aboutform.css"><linkrel="stylesheet"href="css/my-style.css"><linkrel="stylesheet"href="css/new-file.css">將main.js和common.js引入到j(luò)s文件夾下，并在頁面script中加入以下代碼：<scriptsrc="js/main.js"></script><scriptsrc="js/common.js"></script><scriptsrc="js/appcan.tab.js"></script><scriptsrc="js/appcan.mbaas.js"></script>第五步：HTML代碼1、頁面布局框架<divid="page_0"class="upuofubub-ver"tabindex="0"><divid="header"class="uofuhbc-red1bc-text-headubub-acub-pc"><!--Header部分--></div><!--Header2選項卡--><divid="content"class="ub-f1tx-lbc-textsc-bg"></div><divid="footer"class="b-gra-fbc-gra1foot-umh"> <divclass="ubuh3bc-text-head"style="height:2.8em;"> <!--Footer部分--> </div></div></div>2、header部分<divclass="ubumw3uinn6-dumar-l"style="margin-left:.6em"><divclass="uinn"id="ret">返回</div></div><divclass="ubub-verub-pcub-f1"><divstyle="height:.8em;"></div></div><divclass="umw1"></div><divonclick="weima(event)"><divclass="res11ub-img"style="margin:01em00;width:1.2em;height:1.3em"></div></div>效果如圖：3、header2插入選項卡<divid="tabview"class="ufsc-bg"></div>修改選項卡選項卡名稱參數(shù)：vartabview=appcan.tab({selector:"#tabview",hasIcon:false,hasAnim:true,hasLabel:true,hasBadge:false,data:[{label:"距離","icon":"fa-qq"},{label:"好評","icon":"fa-windows"},{label:"人氣","icon":"fa-weixin",},{label:"人均","icon":"fa-weixin",}]});修改ready中頭部高度，否則查看時選項卡會一閃而過，被浮動窗口覆蓋：vartop=$('#header').offset().height+$('#tabview').offset().height;效果如圖：4、footer部分 <inputclass="uhide"type="radio"name="tabSwitch"checked="true"> <divclass="ubub-acub-pcub-f1b-red-fc-bg-d"> <divclass="ub-imgim-shanghuuh2uw2"></div> <divclass="umar-l07ulev-1ubub-acub-pct-gra-f"style="padding:.5em0.5em0;">商戶</div> </div> <inputclass="uhide"type="radio"name="tabSwitch"> <divonclick="openwin('salesPromotion','salesPromotion.html')"class="ubub-acub-pcub-f1c-bg-db-red-f"> <divclass="ub-imgim-cuxiaouh2uw2"></div> <divclass="umar-l07ulev-1ubub-acub-pct-gra-f"style="padding:.5em0.5em0">優(yōu)惠</div> </div> <inputclass="uhide"type="radio"name="tabSwitch"> <divonclick="openwin('comment','comment.html')"class="ubub-acub-pcub-f1c-bg-db-red-f"> <divclass="ub-imgim-pinglunuh2uw2"></div> <divclass="umar-l07ulev-1ubub-acub-pct-gra-f"style="padding:.5em0.5em0;">評論</div> </div> <inputclass="uhide"type="radio"name="tabSwitch"> <divonclick="openwin('my','my.html')"class="ubub-acub-pcub-f1c-bg-db-red-f"> <divclass="ub-imgim-myuh2uw2"></div> <divclass="umar-l07ulev-1ubub-acub-pct-gra-f">我的</div> </div>效果如圖：說明：openwin在main.js里面定義im-shanghu等樣式在about-form.css里面定義第六步：JS代碼掃二維碼功能：在二維碼html區(qū)域添加onclick事件functionweima(e){e.stopPropagation();e.preventDefault();uexScanner.open("ZXing","掃餐桌二維碼完成下單");}functionScannerSuccessCallBack(opCode,dataType,data){vardata1=JSON.parse(data);varww=data1.code.replace(/\\"/g,"'");varst=JSON.parse(ww);appcan.setLocVal("shopId",st.shop_id);//商鋪idappcan.setLocVal("shopName",st.shop_name);//商鋪名稱appcan.setLocVal("caidan_id",st.caidan_id);//菜單idappcan.setLocVal("caidan_num",st.caidan_num);//菜單份數(shù)appcan.setLocVal("per_count",st.per_count);//到店人數(shù)appcan.setLocVal("openmenu",0);//菜單頁顯示本店所有菜單appcan.setLocVal("erweima",0);//從首頁掃碼進入菜單頁vardate=newDate;varnowtime=date.getTime()/1000;appcan.setLocVal('yuyueitme',nowtime);appcan.window.open('menu','menu.html','10','4');}返回按鈕appcan.button("#ret","btn-act",function(){appcan.window.close(-1);})3、ready方法appcan.ready(function(){vartop=$('#header').offset().height+$('#tabview').offset().height;appcan.frame.open({id:"content",url:"index_content.html",//窗口1路徑top:top,left:0,index:0,change:function(err,res){tabview.moveTo(res.multiPopSelectedIndex);//移動到所選中的索引窗口}});});4、選項卡切換tabview.on("click",function(obj,index){appcan.window.selectMultiPopover('content',index);switch(parseInt(index)){case0:appcan.window.publish('s0',0);break;case1:appcan.window.publish('s0',1);break;case2: