此处的TabBar使用Javascript,未曾使用mui等,如果不是需要的请绕道
先上图
1.在HTML页面上准备一个容器
<div id="bottom"></div>
2.在之后引入最下面的js文件比如:
<script type="text/javascript" src="../scripts/tabTool.js"></script>
3.配置参数
var tab=[
{
text:"首页",
url:"http://www.baidu.com",
iconPath:'https://bpic.588ku.com/original_pic/18/05/31/4d6c8a3e35df6126cfe93829b7391b52.jpg!/fw/248/unsharp/true/compress/true',
clickCallBack:function(obj){
alert(obj.url);
}
},
{
text:"个人",
iconPath:'https://bpic.588ku.com/original_pic/18/06/24/716efedac500cd50bc66e590635300bd.jpg!/fw/248/unsharp/true/compress/true',
url:"http://www.taobao.com",
},
{
text:"设置",
iconPath:'https://bpic.588ku.com/original_pic/18/04/18/ae31e4d46b023da15356f2009201af39.jpg!/fw/248/unsharp/true/compress/true',
url:"http://www.csdn.com",
}
];
4.调用方法
createTab(tab,"bottom");
最后 具体的插件代码
/**
*
* 生成guid的方法
*/
function guid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
}
/**
*合并数据
*/
Object.extends= function(destination, source) {
for (var property in source) {
destination[property] = source[property];
if(typeof source[property]=="object"){
destination[property]["guid"]=guid();
}else{
destination["guid"]=guid();
}
}
console.log(destination);
return destination;
}
/**
* 处理数据 块
* @param {} json 后台json数据
* @param {} trName 前台模板tr cacheHtmls
* @param {} isClear 是否替换多余符号
* @returns {} object
*/
function stringFormat(json, cacheHtmls,isClear,isSplite) {
isSplite||false;
isClear||true;
var tbodyHtml = "";
for (var i = 0; i < json.length; i++) {
var innerHtmls = cacheHtmls;
for (var _json in json[i]) {
var value = eval("(json[i]." + _json + ")");//==>json[i].ID
var regex = new RegExp("[{]" + _json + "[}]", "g");
innerHtmls = innerHtmls.replace(regex, value);
}
tbodyHtml +=isClear==true? innerHtmls.replace(/[{][a-zA-Z0-9]*[}]/g,""):innerHtmls;
isSplite==true&&(tbodyHtml+=i>= json.length-1?"":",");
}
return tbodyHtml;
}
/**
* tab item 的装饰HTML
* @param {Object} json
* @param {Object} id
*/
function itemHtml(){
return '<div style="width:50px;height: 50px;float: left;margin-left: {margin};margin-right: {margin};">'+
'<a href="#" οnclick="itemClick(\'{guid}\',\'{url}\')" style="text-decoration: none;">'+
'<div style="width: 30px;height: 30px;padding-left:10px;padding-right:10px;">'+
'<img src="{iconPath}" style="width:100%;height:100%"></div>'+
'<div style="text-align:center"><div style="color: #848484;font-size: 8px;padding-top: 4px;">{text}</div></div>'+
'</a>'+
'</div>';
}
function tabStyle() {
return {
top_div:"position: fixed;margin-bottom: 0px;height: 50px;bottom: 0px;margin-left: 0px;width: 100%;margin-right: 0px;left: 0px;background-color:#f9f9f9;border-top: 1px solid #e6e3e3;",
};
}
/**
*
* 具体创建方法
* @param {Object} json
* @param {Object} id
*/
function createTab(json, id) {
var _json=[{text:"未知",url:"",iconPath:"",clickCallBack:null}];
json=Object.extends(_json,json);
var divs = document.getElementById(id);
var styles=tabStyle();
divs.setAttribute("style",styles["top_div"]+";"+divs.getAttribute("style"));
var cache=itemHtml();
var itemJson=json;
var val=stringFormat(itemJson,cache,false);
//计算margin的左右宽度
var widths=parseInt(((screen.availWidth||screen.width)-(itemJson.length * 50))/(itemJson.length*2));
val=val.replace(/[{]margin[}]/g,widths+"px");
divs.innerHTML=val;
this.itemClick=function(guid,url){
itemJson.filter(function(obj){
if(obj["guid"]==guid){
if(typeof obj["clickCallBack"]=="function"){
obj["clickCallBack"](obj);
}else{
window.location.href=url;
}
}
});
}
}
有兴趣的朋友可以看一下