实现首页分类栏按样式循环显示

标签：

主要代码：

GoodsForm.java

//添加一个计数和一个颜色的变量
	private String count;
	private String color;

GuestController .java

List<GoodsForm> commodityType = goodsService.getType();
		goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());
	        //在页面初始化之前用size()方法对商品类型commodityType计数，计算出有多少类型
		int a=commodityType.size();
	        //使用循环设置Count的值为i+F  ************  即在前台可以显示文本1F
		for(int i=1;i<=a;i++){
			commodityType.get(i-1).setCount(i+"F");
			
		}
              //使用循环设置Color的值为"columnT-"+(j%6+1)  ****即在前台可以显示文本类似columnT columnT-1  是css中定义的样式
                //j%6+1为控制j为1到6的循环输出
		for(int j=0;j<a;j++){
			commodityType.get(j).setColor("columnT"+" "+"columnT-"+(j%6+1));
		}
		model.addAttribute("goodsForm", goodsForm);
    	model.addAttribute("commodityType",commodityType);

style.css

.main{ background: #fff; padding-top: 15px; padding-bottom: 15px;}
.columnT{ border-bottom:solid 1px;}
.columnT i{ width: 44px; height: 60px; vertical-align: middle; margin-right: 15px; font-size: 18px; text-align: center; line-height: 44px}
.columnT a{ float: right; margin-top: 20px; font-size: 14px;}
.columnT-1{ border-color: #fac132;}
.columnT-1 i{ background-position: 0 -40px; color: #fac132}
.columnT-2{ border-color: #94562c;}
.columnT-2 i{ background-position: -50px -40px; color: #94562c}
.columnT-3{ border-color: #ef3799;}
.columnT-3 i{ background-position: -100px -40px; color: #ef3799}
.columnT-4{ border-color: #1acbe5;}
.columnT-4 i{ background-position: -150px -40px; color: #1acbe5}
.columnT-5{ border-color: #ce2404;}
.columnT-5 i{ background-position: -200px -40px; color: #ce2404}
.columnT-6{ border-color: #13713f;}
.columnT-6 i{ background-position: -250px -40px; color: #13713f}

index.html

<div class="container main" th:each="typeInfo,sts:${commodityType}">
	
	<div th:class="${typeInfo.color}">
	<!--th:class 等同于class，只是class后要存放一个存放接收后台传来的一个变量时要用th:class  -->
	<!--${typeInfo.color}就是接收后台设置的color变量      例： columnT columnT-1   -->
	
	<i class="yh"><span th:text="${typeInfo.count}">1F</span></i>
	<!--${typeInfo.count}就是接收后台设置的count变量      用于前台显示   -->	
	
	<span class="h4 yh" th:text="${typeInfo.commodityTypeName}">粮食</span>
	<a th:href="@{initGoods(commodityTypeId=${typeInfo.commodityTypeId})}">更多商品>></a>
</div>

实现首页分类栏按样式循环显示

标签：

原文地址：http://my.oschina.net/u/2411768/blog/488735