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

本是古典何须时尚 2022-07-10 04:23 178阅读 0赞

![Center][]

\--------------------------------------------------------------------------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;  
\}

[Center]: /images/20220709/f195a60745684c9cba166d756c252e48.png

发表评论取消回复

表情：

评论列表（有 0 条评论，178人围观）

还没有评论，来说两句吧...

相关阅读

相关使用boostrap制作导航栏

使用boostrap制作导航栏效果展示我们常常看见这样的导航栏的结构，基本上都是一个模板里面做出来的，现在就教大家怎么制作这样的模板。 ![在这里插入图片描述

小咪咪/ 2024年03月30日 13:30/ 0 赞/ 81 阅读

相关钉钉导航栏显示/隐藏

在common目录下新建 ddhide.js ![在这里插入图片描述][2021012811381351.png] ddhide.js import as

Love The Way You Lie/ 2023年02月22日 08:26/ 0 赞/ 26 阅读

相关 uni-app导航栏动态设置

uni-app导航栏动态设置 uni-app导航栏标题，自定义按钮动态设置，只限于app和h5端 -------------------- 导航栏动态设置

落日映苍穹つ/ 2022年12月06日 01:10/ 0 赞/ 1997 阅读

相关 uni-app 动态设置导航栏

动态设置当前页面的标题 uni.setNavigationBarTitle({ title: '新的标题' }); 设置页面导航条颜色。如

川长思鸟来/ 2022年11月07日 13:11/ 0 赞/ 239 阅读

相关 boostrap里面的表格样式

<html> <head> <title>Bootstrap 实例</title> <meta name="viewport"

我不是女神ヾ/ 2022年07月15日 12:17/ 0 赞/ 185 阅读

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

![Center][] \--------------------------------------------------------------------------

本是古典何须时尚/ 2022年07月10日 04:23/ 0 赞/ 179 阅读

相关显示和隐藏导航栏

S700平台关于显示NavigationBar:到framework/base/core/res/res/values/config.xml文件中修改config\_showN

ゞ浴缸里的玫瑰/ 2022年05月28日 08:27/ 0 赞/ 258 阅读

相关 jquery水平导航栏动态菜单

附上结果如下: ![这里写图片描述][70] 代码如下: <!DOCTYPE html> <html lang="en"> <head

桃扇骨/ 2022年05月21日 02:40/ 0 赞/ 313 阅读

相关给导航栏加入停留样式

浅谈下给类似导航栏的东东，加入停留样式的三种方法：实例： HTML代码： <div class="side_layout"> <!--Sid

一时失言乱红尘/ 2022年03月31日 13:46/ 0 赞/ 217 阅读

相关 rn 导航栏动态跳转

若报错undefined is not an object (evaluating 'this.props.navigation.navigate') (1

Love The Way You Lie/ 2021年07月25日 02:58/ 0 赞/ 539 阅读