mui模仿一个简单的app tab界面效果代码
代码语言:html
所属分类:选项卡
代码描述:mui模仿一个简单的app tab界面效果代码,实现了首页、消息页面、我的页面、通讯录页面,采用单一dom模式
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--标准mui.css--> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mui.min.css"> <style> .title { margin: 20px 15px 10px; color: #6d6d72; font-size: 15px; } .oa-contact-cell.mui-table .mui-table-cell { padding: 11px 0; vertical-align: middle; } .oa-contact-cell { position: relative; margin: -11px 0; } .oa-contact-avatar { width: 75px; } .oa-contact-avatar img { border-radius: 50%; } .oa-contact-content { width: 100%; } .oa-contact-name { margin-right: 20px; } .oa-contact-name, oa-contact-position { float: left; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">XXX</h1> </header> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="#tabbar"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="#tabbar-with-chat"> <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" href="#tabbar-with-contact"> <span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通讯录</span> </a> <a class="mui-tab-item" href="#tabbar-with-map"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">设置</span> </a> </nav> <div class="mui-content"> <div id="tabbar" class="mui-control-content mui-active"> <div id="slider" class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <p class="mui-slider-title"> 静静看这世界 </p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <p class="mui-slider-title"> 幸福就是可以一起睡觉 </p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="//repo.bfw.wiki/bfwrepo/image/5fbedf8f5349c.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <p class="mui-slider-title"> 想要一间这样的木屋,静静的喝咖啡 </p> </a> </div> </div> <div class="mui-slider-indicator mui-text-right"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> <div class="mui-content"> <ul class="mui-table-view mui-grid-view mui-grid-9"> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-home"></span> <div class="mui-media-body"> Home </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span> <div class="mui-media-body"> Email </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"> <span class="mui-icon mui-icon-chatbubble"></span> <div class="mui-media-body"> Chat </div> </a></li> </ul> </div> <div class="mui-content" style="background-color:#fff"> <ul class="mui-table-view mui-grid-view"> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> 幸福就是可以一起睡觉 </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> 想要一间这样的木屋,静静的喝咖啡 </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"><img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> Color of SIP CBD </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> 静静看这世界 </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"><img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> Color of SIP CBD </div> </a></li> <li class="mui-table-view-cell mui-media mui-col-xs-6"> <a href="#"> <img class="mui-media-object" src="//repo.bfw.wiki/bfwrepo/image/5fbaf301bfeaa.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_500,h_400,/quality,q_90"> <div class="mui-media-body"> 静静看这世界 </div> </a></li> </ul> </div> </div> <div id="tabbar-with-chat" class="mui-control-content"> <div class="title"> 消息列表 </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 1</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 2</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 3</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 4</a></li> <li class="mui-table-view-cell"><a href="" class="mui-navigate-right">Item 5</a></li> <li cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0