排行榜是现在门户网站,各种网站经常会出现的一种类型的菜单,而可以通过layui简单配置实现排行榜效果
1.首先定义一个范围
<div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>浏览量总排行榜</legend>
</fieldset>
<div style="font-family:Arial;font-size:16px" id="ViewPhbInfo">
<!--排行榜载体-->
</div>
</div>
2.使用方法初始化加载时动态加载排行榜内容
在这里插入代码片
模拟排行榜 用layui实现排行榜的效果
var PhCount = 10;//排行榜数量
//每个排行榜单的颜色
var PhRdColor = ["red", "orange", "orange", "green", "green", "cyan", "blue", "black", "black", "blue"];
var FxDATA ={};
FxDATA.View=[];//可以从后台请求数据 这个地方进行模拟数据
FxDATA.View.push({ViewCount:1100,MC:"测试数据1100点击"});
FxDATA.View.push({ViewCount:800,MC:"测试数据800点击"});
FxDATA.View.push({ViewCount:700,MC:"测试数据700点击"});
FxDATA.View.push({ViewCount:660,MC:"测试数据660点击"});
FxDATA.View.push({ViewCount:600,MC:"测试数据600点击"});
FxDATA.View.push({ViewCount:500,MC:"测试数据500点击"});
FxDATA.View.push({ViewCount:400,MC:"测试数据400点击"});
FxDATA.View.push({ViewCount:300,MC:"测试数据300点击"});
FxDATA.View.push({ViewCount:100,MC:"测试数据100点击"});
if (FxDATA != null && FxDATA.View != undefined) {//浏览量总排行榜
str = "<blockquote class='layui-elem-quote layui-quote-nm'>";//排行榜的载体
for (var i = 0; i < FxDATA.View.length; i++) {
if (i != 0) {
str = str + "<br>";
}
//分别表示排行榜的热度颜色 排行榜的点击数量 当前热度排行的名称
//<span class='layui-badge-dot layui-bg-red'></span> <span class='layui-badge-rim'>200</span> <a>这个样式就可以形成一个排行榜效果</a>
str = str + "<span class='layui-badge-dot layui-bg-" + PhRdColor[i] + "'></span> <span class='layui-badge-rim'>" + FxDATA.View[i].ViewCount + "</span> <a>" + FxDATA.View[i].MC + "</a>";
}
str = str + "</blockquote> ";
$("#ViewPhbInfo").append(str);
}
从而实现排行榜的效果 可以通过调整配置 排行榜展示数量和热度颜色,来微调样式
若有其他更好的方式,请联系作者,相互学习相互进步