基于boostrap icon 动态显示导航栏样式

最新推荐文章于 2022-12-08 22:58:56 发布

飞奔的大土豆

最新推荐文章于 2022-12-08 22:58:56 发布

阅读量477

点赞数

分类专栏：前端技术文章标签： Bootstrap Icon图标选择组件导航 Activity

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_32447321/article/details/57080635

版权

前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

--------------------------------------------------------------------------HTML---------------------------------------------------------------------------------------------------

<body>
<div class="container" style="min-width:953px;">
<div class="row"style="margin-top:10px;">
<form class="form-horizontal" id="editForm1">
<fieldset>
<div class="form-group">
<div id="register_div" class="col-xs-1 circle_status_1 circle_status_12 border-radius-default">
<span id="register_span" class="glyphicon glyphicon-ok text_status_1 text_status_12 span-default">注册申请</span>
</div>
<div id="veh_col" class="col-xs-1 line_status_2 line_status_13 div-col-default"></div>
<div id="veh_div" class="col-xs-1 circle_status_2 circle_status_13 border-radius-default">
<span id="veh_span" class="glyphicon glyphicon-ok text_status_2 text_status_13 span-default">车辆数据</span>
</div>
<div id="plat_col" class="col-xs-1 line_status_3 line_status_14 div-col-default"></div>
<div id="plat_div" class="col-xs-1 circle_status_3 circle_status_14 border-radius-default">
<span id="plat_span" class="glyphicon glyphicon-ok text_status_3 text_status_14 span-default">平台测试</span>
</div>
<div id="real_col" class="col-xs-1 line_status_4 line_status_15 div-col-default"></div>
<div id="real_div" class="col-xs-1 circle_status_4 circle_status_15 border-radius-default">
<span id="real_span" class="glyphicon glyphicon-ok text_status_4 text_status_15 span-default">实时信息</span>
</div>
<div id="joint_col" class="col-xs-1 line_status_5 line_status_16 div-col-default"></div>
<div id="joint_div" class="col-xs-1 circle_status_5 circle_status_16 border-radius-default">
<span id="joint_span" class="glyphicon glyphicon-ok text_status_5 text_status_16 span-default">联调成功</span>
</div>
<div class="col-xs-1"></div>
</div>
</fieldset>
</form>
</div>
</div>
</body>

-------------------------------------------------------------------------------------JS----------------------------------------------------------------------------------------------

1 2 3 4 5 通过审核

12 13 14 15 不通过

var bindGotoPageEvent= function(i){
switch(i){
case 1:
case 12:
$("#register_div").bind("click",function(){
window.parent.$("#mainFrame").attr("src","operation/msgRegisterApply.jsp?reviewId="+reviewId +"&vehicleModelId="+vehicleModelId+"&from="+from+"&reviewStatus="+reviewStatus);
});
break;
case 2:
case 13:
$("#veh_div").bind("click",function(){
window.parent.$("#mainFrame").attr("src","operation/vehDataInfo.jsp?reviewId="+reviewId +"&vehicleModelId="+vehicleModelId+"&from="+from+"&reviewStatus="+reviewStatus);
});
break;
case 3:
case 14:
$("#plat_div").bind("click",function(){
window.parent.$("#mainFrame").attr("src","operation/platformTest.jsp?reviewId="+reviewId +"&vehicleModelId="+vehicleModelId+"&from="+from+"&reviewStatus="+reviewStatus);
});
break;
case 4:
case 15:
$("#real_div").bind("click",function(){
window.parent.$("#mainFrame").attr("src","operation/realInfo.jsp?reviewId="+reviewId +"&vehicleModelId="+vehicleModelId+"&from="+from+"&reviewStatus="+reviewStatus);
});
break;
case 5:
$("#joint_div").bind("click",function(){
window.parent.$("#mainFrame").attr("src","operation/jointSuccess.jsp?reviewId="+reviewId +"&vehicleModelId="+vehicleModelId+"&from="+from+"&reviewStatus="+reviewStatus);
});
break;
default:
break;
}
}

$(function() {
// head area begin
//unbind event
$("#register_div").unbind("click");//取消所以的点击标识
$("#veh_div").unbind("click");
$("#plat_div").unbind("click");
$("#real_div").unbind("click");
$("#joint_div").unbind("click");

$(".circle_status_" + sy.currentPageStatus).addClass("border-radius-active");//sy.currentPageStatus当前页《model》
$(".text_status_" + sy.currentPageStatus).addClass("span-active");

var dbReviewStautus=parseInt(reviewStatus);//初始化的审核页面 reviewStatus为DB中页面标识，入口处接收到
if(dbReviewStautus<10){//通过状态下
for(i=1;i<=dbReviewStautus;i++){
bindGotoPageEvent(i);
}

for (i=dbReviewStautus+1; i<=5;i++) {
$(".line_status_" + i).addClass("div-col-todo");
$(".circle_status_" + i).addClass("border-radius-todo");
$(".text_status_" + i).removeClass("glyphicon glyphicon-ok").addClass("span-todo glyphicon.todo");
}
}else{
for(i=11;i<=dbReviewStautus;i++){
bindGotoPageEvent(i);
}

for (i=dbReviewStautus+1; i<=16;i++) {
$(".line_status_" + i).addClass("div-col-todo");
$(".circle_status_" + i).addClass("border-radius-todo");
$(".text_status_" + i).addClass("span-todo");
}
}

// head area end

// 动态添加审核与返回btn
if(from ==1 && dbReviewStautus == sy.currentPageStatus){
//$("#operateBtn").css("visibility","visible");
$("#divButtons").empty();
var content ='<div class="col-sm-4"></div>';
content =content + '<div class="col-sm-2" id="operateBtn">';
content =content + '<button type="button" id="checkStatus" class="btn btn-primary btn-block btn-flat baseInfoButton btn-register-next">审核</button></div>';
content =content + '<div class="col-sm-2" style="text-align: left;padding-left: 2rem;">';
content =content + '<button type="button" id="back" class="btn btn-primary btn-block btn-flat baseInfoButton btn-register-next">返回</button></div>';
$("#divButtons").append(content);
} else{
$("#divButtons").empty();
var content ='<div class="col-sm-4"></div>';
content =content + '<div class="col-sm-1" id="operateBtn" style="visibility:hidden">';
content =content + '<button type="button" id="checkStatus" class="btn btn-primary btn-block btn-flat baseInfoButton btn-register-next">审核</button></div>';
content =content + '<div class="col-sm-2" style="text-align: left;padding-left: 2rem;">';
content =content + '<button type="button" id="back" class="btn btn-primary btn-block btn-flat baseInfoButton btn-register-next">返回</button></div>';
content =content + '<div class="col-sm-1" id="operateBtn" style="visibility:hidden"></div>';
$("#divButtons").append(content);
}

})

-------------------------------------------------------------CSS---------------------------------------------------------------------------------------------------

/* 导航栏已完成bg */
.border-radius-default{
text-align:center;
border: 1px solid #007EE5;
border-radius: 30px;
padding:12px 12px;
background:#fff;
width:130px;
-moz-border-radius:25px;
color:#C0CCDA;
font-size:16px;
}
/* 导航栏当前操作bg */
.border-radius-active{
text-align:center;
border: 1px solid #007EE5;
border-radius: 30px;
font-family:PingFangSC-Regular;
padding:12px 12px;
width:130px;
-moz-border-radius:25px;
color:#fff;
font-size:16px;
background: #007EE5;
letter-spacing: 0;
}
/* 导航栏未操作bg */
.border-radius-todo{
text-align:center;
border: 1px solid #C0CCDA;
border-radius: 30px;
font-family:PingFangSC-Regular;
font-size: 16px;
color: #C0CCDA;
letter-spacing: 0;
padding:12px 12px;
background:#fff;
width:130px;
-moz-border-radius:25px;
}

/* 导航栏字体已操作 */
.span-default{
color:#007EE5;
}
/* 导航栏字体当前操作 */
.span-active{
color:#fff;
}

.span-todo{
color:#C0CCDA;
}
.glyphicon.todo:before{content:""}
/*导航栏连接线已操作bg*/
.div-col-default{
height:3px;
margin-top: 25px;
padding:0px;
background-color:#007EE5;
overflow:hidden;
}
/*导航栏连接线未操作bg*/
.div-col-todo{
height:3px;
margin-top: 25px;
padding:0px;
background-color:#C0CCDA;
overflow:hidden;
}

飞奔的大土豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于boostrap icon 动态显示导航栏样式

平台需求：正常流程-审核通过 Y：自动进行下一步审核，不能手动点击未审核流程进行下一步； N : 保持本页面并刷新审核状态及理由；审核进行到下一步：可以返回查看上一步流程审核，并可再次返回审核操作！车企需求：只能查看已审核流程不能审核操作；
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。