mui 底部导航菜单功能(原创)[通俗易懂]
功能 通俗易懂 菜单 导航 原创 底部 mui
2023-06-13 09:12:46 时间
大家好,又见面了,我是你们的朋友全栈君。
简单版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>底部导航菜单切换</title>
<link href="../../../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<nav class="mui-bar mui-bar-tab " id="nav">
<a class="mui-tab-item mui-active" id="a1">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item " id="a2">
<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 " id="a3">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">消息</span>
</a>
</nav>
<script src="../../../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
subpages:[//先加载首页
{
url:'1.html',
id:'a1',
styles:{
top:'0px',
bottom:'60px'
}
}
],
preloadPages:[//缓存其他页面
{
url:'2.html',
id:'a2',
styles:{
top:'0px',
bottom:'60px'
}
},
{
url:'3.html',
id:'a3',
styles:{
top:'0px',
bottom:'60px'
}
}
]
});
mui.plusReady(function(){
// 获取所有Webview窗口
var winAll=plus.webview.all();//获取所有窗体
//console.log(JSON.stringify(winAll))
var a1,a2,a3
mui("#nav").on("tap","#a1",function(){//点击触发
a1=plus.webview.getWebviewById("a1");
console.log(JSON.stringify(a1))
a1.show()
a2.hide()//这一步必须有
a3.hide()//这一步必须有
})
mui("#nav").on("tap","#a2",function(){//点击触发
a2=plus.webview.getWebviewById("a2");
a2.show()
})
mui("#nav").on("tap","#a3",function(){//点击触发
a3=plus.webview.getWebviewById("a3");
a3.show()
})
});
</script>
</body>
</html>
专业版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>底部导航菜单切换(专业写法)</title>
<link href="../../../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<nav class="mui-bar mui-bar-tab " id="nav">
</nav>
<script src="../../../js/jquery.js"></script>
<script src="../../../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
var hrefArr=[
{"title":"首页","id":"a1","href":"1.html","icon":"mui-icon-home"},
{"title":"消息也","id":"a2","href":"2.html","icon":"mui-icon-email"},
{"title":"个人中心","id":"a3","href":"3.html","icon":"mui-icon-contact"}
]//要跳转的 页面跟他的ID要先写好
var navFirst=[],navOther=[],viewObj=[]//第一个页面数据 其他页面数据 窗体对象
mui.plusReady(function(){
navInit()
clickFun(navFirst[0].id,plus.webview.getWebviewById(navFirst[0].id))
mui("#nav").on("tap","a",function(e){
var id=$(this).attr("id")
var obj=plus.webview.getWebviewById(id)
clickFun(id,obj)
})
});
function clickFun(id,obj){
if(id==navFirst[0].id){
$.each(navOther,function(i,v){
var otherObj=plus.webview.getWebviewById(v.id)
otherObj.hide()
})
}
obj.show()
}
//初始化html
function navInit(){
var html=""
$.each(hrefArr,function(i,v){
if(i==0){
}
html+='<a class="mui-tab-item'+((i==0)?" mui-active":"")+' " id="'+v.id+'">'+
'<span class="mui-icon '+v.icon+'"></span>'+
'<span class="mui-tab-label">'+v.title+'</span>'+
'</a>'
})
$("#nav").html(html)
$.each(hrefArr,function(i,v){
var arrI={"url":v.href,"id":v.id,styles:{top:'0px',bottom:'60px' }}
if(i==0){//第一个页面
navFirst.push(arrI)
}else{//缓存住的页面
navOther.push(arrI)
}
})
mui.init({
subpages:navFirst,//先加载首页
preloadPages:navOther//缓存其他页面
});
}
//点击事件初始化
</script>
</body>
</html>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/159430.html原文链接:https://javaforall.cn
相关文章
- 微软为SkyDrive加入OCR光学字符识别功能
- 电商项目基本业务概述||电商后台管理系统的功能|| 电商后台管理系统的开发模式(前后端分离)|| 电商后台管理系统的技术选型[通俗易懂]
- Hadoop生态系统功能组件,主要包括哪些?[通俗易懂]
- 主板开启网络唤醒_WOL网络唤醒远程开机功能设置方法图文教程[通俗易懂]
- Portraiture 3.5.6磨皮滤镜插件适用于Photoshop磨皮美化功能[通俗易懂]
- Clipboard.js实现复制文本到剪贴板功能[通俗易懂]
- 浅谈BSC链智能合约DAPP系统开发功能逻辑
- oracle普通索引改唯一索引,Oracle唯一索引功能替代[通俗易懂]
- 网络功能虚拟化NFV[通俗易懂]
- 极域电子书包全新windows-android功能介绍[通俗易懂]
- 手机端禁止默认长按复制功能[通俗易懂]
- Qt中自定义QTreeWidget实现节点拖拽复制功能[通俗易懂]
- Elasticsearch 8集群搭建、安全功能配置详述
- sqlite之增删改查实例 – 实现简单的iOS收藏夹功能详解手机开发
- 功能Linux 打造个性化主题之旅(linux主题)
- 探究Linux下IO测试工具的功能(io测试工具linux)
- 命令Linux中i命令的作用了解Linux中i命令的强大功能(linux-i)
- 重装MySQL服务:恢复系统功能(重启mysql服务)
- MySQL EF6:使用新功能提高效率(mysqlef6)
- Shotwell 0.15发布了!添加了更多新功能及修复!
- 功能深入理解SQL Server中的预登录功能(sqlserver预登录)
- MySQL实现虚拟主机上传功能(mysql上传虚拟主机)
- Redis通过Lua脚本实现强大功能(redis运行lua脚本)
- PHPMailer的主要功能特点和简单使用说明