bootstrap切换标签页：一款基于BootStrap及fontawesome的tabs标签消息列表-爱玩科技

小君 2023-02-20 08:03:02 72

bootstrap切换标签页：一款基于BootStrap及fontawesome的tabs标签消息列表<link type="text/css" rel="stylesheet" href="resource/bootstrap-3.3.5/css/font-awesome.min.css"><link rel="stylesheet" type="text/css" href="resource/bootstrap-3.3.5/css/bootstrap.css" />首先是引用，需要把BootStrap和fontawesome引用进来，说明一下：BootStrap主要是tabs的插件；Fontawesome他是一个图标库，主要用于系统中使用的图标

背景

最近在做系统的UI优化，美工设计了一版系统主页的消息Tabs标签，我感觉直接使用BootStrap的原装控件就好了，但是做出来后领导们审查没通过，说要和美工效果一致，好吧，那就按领导的意思做吧，先和大家看一下效果：

bootstrap切换标签页：一款基于BootStrap及fontawesome的tabs标签消息列表(1)

这个是我做的效果，但是领导们不满意；

bootstrap切换标签页：一款基于BootStrap及fontawesome的tabs标签消息列表(2)

这个是美工给的效果图，咱们最终也按照这个效果图为准；

好了说干就干，仔细想了一下如果重新去写一个Tabs的插件也挺麻烦，还不如在原来的基础上进行修改，只需要把样式改掉就可以了，把样式重新放在一个新的文件中就可以了，好了，直接上代码：

源码引用

首先是引用，需要把BootStrap和fontawesome引用进来，说明一下：

BootStrap主要是tabs的插件；

Fontawesome他是一个图标库，主要用于系统中使用的图标

HTML

收件箱

</a>

</li>

<li>

发件箱

</a>

</li>

<li>

通讯组

</a>

</li>

</ul>

</div>

</div>

</div>

</div>

<p>这是通讯组</p>

</div>

样式表

.msgContent{

position: absolute;

width: 300px;

height: auto;

border: 1px solid #bdb5b5;

background-color: #FFFFFF;

border-radius: 10px;

right: 5px;

padding: 5px;

display:none;

top: 50px;

}

.msgContent .msgContent_link{

position: absolute;

border-right: 16px solid transparent;

border-left: 16px solid transparent;

border-bottom: 16px solid #ffffff;

top: -16px;

left: 193px;

}

#myTab{

height:40px;

border-bottom: none;

}

#myTab li{

height:40px;

width: 33.3%;

}

#myTab>li {

margin-left: -1px;

border-top: none;

border-left: none;

border-right: none;

z-index: 1;

}

#myTab>li.active {

border-top: 0px;

border-left: none;

border-right: none;

z-index: 3;

}

#myTab>li.active>a #myTab>li.active>a:hover #myTab>li.active>a:focus {

border-top: none;

border-left: 0px;

border-right: 0px;

border-bottom: 1px solid #FFF;

color: #000;

}

#myTab > li.active > a #myTab > li.active > a:hover #myTab > li.active > a:focus {

color: #000;

cursor: default;

background-color: #fff;

/* border: 1px solid #666363; */

border-bottom-color: transparent;

font-weight: bold;

}

#myTab>li>a #myTab>li>a:focus {

color: #999999;

border-left: 0px;

border-right: 0px;

margin-right: 0px;

padding: 10px 16px;

background: #FBFAF8;

border-bottom: 0px;

font-size: 15px;

font-weight: bold;

}

#myTab>li.active>a::after{

content: "";

width: 20px;

height: 2px;

background: #000;

position: absolute;

left: 36px;

top: 35px;

}

#msgInbox_content{

padding-bottom: 30px;

}

#msgOutbox_content{

padding-bottom: 30px;

}

.msgRow{

width:100%;

height:55px;

border-bottom: 1px solid #cccccc;

padding: 5px;

cursor: pointer;

}

.msgRow:hover{

background-color:#cccccc;

}

.msgRow:hover .msgRow_content_info .icon{

color:#0281CC;

}

.msgRow_content{

width:100%;

}

.msgRow_content_info{

line-height: 20px;

float: left;

}

.msgRow_content_info .icon{

font-size: 20px;

margin-top: 3px;

/* */

}

.msgRow_content_info .name{

margin-left: 10px;

}

.msgRow_content_info .date{

margin-left: 15px;

}

.msgRow_content_info .status{

margin-left: 25px;

padding: 2px;

background-color: rgba(217 105 168 0.25);

border: 1px solid #d969a8;

color: #d969a8;

border-radius: 4px;

}

.msgRow_content_info .status span{

display: inline-block;

transform: scale(0.8);

}

.msgRow_content_info .del{

margin-left: 25px;

cursor: pointer;

font-size: 14px;

margin-top: 3px;

/* */

}

.msgRow_content_con{

line-height: 20px;

float: left;

}

.msgRow_content_con span{

margin-left: 30px;

font-weight: bold;

cursor: pointer;

}

.msg_op{

line-height: 35px;

float: right;

padding-top: 6px;

position: absolute;

bottom: 1px;

background-color: white;

width: 98%;

text-align: right;

}

.msg_op .msg_op_refresh{

margin-right: 20px;

font-size: 16px;

cursor: pointer;

}

.msg_op .msg_op_list{

margin-right: 20px;

font-size: 16px;

cursor: pointer;

}

.msg_send_btn{

background-color: #0281CC;

color: white;

padding: 2px;

cursor: pointer;

float: left;

line-height: 20px;

margin-top: 5px;

margin-left: 5px;

border-radius: 5px;

}

JS

//加载消息列表

function checkUnreadMsg(showTip){

$.ajax({

type:'post'

url:'../msg/msg/getInboxUnreadList.haze'

dataType:'json'

success:function(data){

if(data != null){

if(data.total > 0){

$("#unreadMsgSpan #unreadMsgSjxSpan").html(data.total);

$(".home-msg-count").find("div").html(data.total);

}else{

$("#unreadMsgSpan #unreadMsgSjxSpan").html("0");

$(".home-msg-count").find("div").html("0");

}

$('#msgInbox_content').html("");

var html = "";

for(var i = 0; i < data.rows.length;i ){

var row = data.rows[i];

html = '<div class="msgRow">';

html = '<div class="msgRow_content">';

html = ' <div class="msgRow_content_info">';

if(row.msgTypeStr == "普通消息"){

html = ' <span class="fa fa-envelope-o icon"></span>';

}

else{

html = ' <span class="fa fa-wpforms icon"></span>';

}

html = ' <span class="name">' row.readUserName '</span>';

html = ' <span class="date">' row.msgSendDateStr.split(' ')[0] '</span>';

html = ' <span class="status"><span>' row.msgReadStatuStr '</span></span>';

html = ' <span class="fa fa-trash-o del" onclick="msgDel(' row.id ')"></span>';

html = ' </div>';

html = ' <div class="msgRow_content_con">';

var content = "";

if(row.msgContentTrim.length > 15){

content = row.msgContentTrim.substring(0 15) "...";

}

else{

content = row.msgContentTrim;

}

if(row.msgTypeStr == "普通消息"){

html = ' <span onclick="msgCheck(' row.id ')">' content '</span>';

}

else{

html = ' <span onclick="msgProessHandle(' row.id ' ' row.msgBusinessType ')">' content '</span>';

}

html = ' </div>';

html = '</div>';

}

$('#msgInbox_content').append(html);

}

});

}

关于代码中使用到的其他的js事件代码，可以根据自己的需求进行更改，在这里就不列出来，本代码中只列出来的加载消息列表的方法；

网站首页

返回栏目

bootstrap切换标签页：一款基于BootStrap及fontawesome的tabs标签消息列表

猜您喜欢：

相关文章