Index页面-使用选项卡实现header2

Index页面第一步：新建index页面利用自定义模板建立空白页面第二步：将该页底部栏等所需图片放入images文件夹。第三步：在对应文件中加入自定义类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;}第四步：引入相关文件在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引入到js文件夹下，并在页面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>修改选项卡选项卡名称参数：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">优惠</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区域添加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);//菜单份数appcan.setLocVal("per_count",st.per_count);//到店人数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: