JQuery实现品牌展示

最近验收了ITOO，老师当时验收的时候对于界面的设计非常敏感，只要看了一个大体轮廓，就能给出我们建议，这是二十年积累的经验，我们要做的就是站在巨人的肩膀上，让我们成长更快！

老师说了一下关于界面设计的几个设计理念：

1）如无必要，勿增实体--奥卡姆剃刀原理

2）不是用户需要什么，我们做什么，而是用户需要什么，我们有什么

3）不要一下子给用户显示过多的信息

这个第三点，是我今天重点想说的一点。一下子给用户呈现大量的信息，只会让人看了反感，又怎么会有兴趣继续去用你的软件呢？我们有一种解决方案是放到更多里，但更多的形式我们也可以仿照淘宝显示品牌一样，刚开始只显示几个品牌，点击更多就会出现全部品牌。

下面是演示效果：

1）点击搜索后出现某些品牌

2）点击更多出现所有的品牌

下面是我自己做了一个小例子，来实现这个功能，我认为ITOO中关于信息的显示也可以采用这种方式，我们开始刚开始只显示必要的信息，当用户需要知道更多时，可以直接点击更多查看详细信息。

HTML结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

	<head>

		<title>单击显示更多内容</title>

		<link type="text/css" rel="stylesheet" href="cate.css" />

		<script type="text/javascript" src="js/jquery-1.3.1.js"></script>

		<script type="text/javascript" src="js/cate.js"></script>

	</head>

	<div class="SubCategoryBox">

		<ul>

			<li><a href ="#">华为</a></li>

			<li><a href ="#">小米</a></li>

			<li><a href ="#">苹果</a></li>

			<li><a href ="#">魅族</a></li>

			<li><a href ="#">三星</a></li>

			<li><a href ="#">乐视</a></li>

			<li><a href ="#">OPPO</a></li>

			<li><a href ="#">vivo</a></li>

			<li><a href ="#">纽曼</a></li>

			<li><a href ="#">中兴</a></li>

			<li><a href ="#">酷派</a></li>

			<li><a href ="#">海尔</a></li>

			<li><a href ="#">其他品牌</a></li>

		</ul>

		<div class="showmore">

			<!--<a href ="more.html"><span>显示全部品牌</span></a>-->

			<a><span>显示全部品牌</span></a>

		</div>

	</div>

</html>

CSS样式：

ul,li{

	/* 清除ul，li的小圆点 */

	list-style:none;

}

a{

	/* 取消所有的下划线 */

	text-decoration:none;

	padding-left:20px;

	display:block;

	display:inline-block;

	width:100px;

	padding-top:3px;

	padding-bottom:3px;

}

body{

	font-size:16px;

	text-align:center;

}

*{

	margin:0;

	padding:0;

}

.SubCategoryBox{

	width:600px;

	margin:0 auto;

	text-align:center;

	margin-top:40px;

}

.SubCategoryBox ul li{

	display:block;

	float:left;

	width:200px;

	line-height:20px;

}

.showmore{

	clear:both;

	text-align:center;

	padding-top:10px;

}

.showmore a{

	display:block;

	width:120px;

	margin:0 auto;

	line-height:24px;

	border:1px solid #AAA;

}

.showmore a span{

	padding-left:15px;

	background:url(img/down.gif) no-repeat 0 5px;

}

.promoted a{

	color:#F50;

}

JS方法：

$(function(){

	var $category =$('ul li:gt(5):not(:last)');//获取索引值大于5的品牌集合对象（去掉最后一个）

	$category.hide();	//隐藏获得的JQuery对象

	var $toggleBtn = $('div.showmore >a');	//获取全部品牌的按钮

	$toggleBtn.click(function(){

		if($category.is(":visible")){	//如果元素显示，则执行对应的代码

			$category.hide();	//隐藏$category

			$('.showmore a span')

				.css("background","url(img/down.gif) no-repeat 0 5px")

				.text("更多");	//改变背景图片和文字

			$('ul li').removeClass("promoted");	//去掉高亮样式

		}else{

			$category.show();

			$('.showmore a span')

				.css("background","url(img/up.gif) no-repeat 0 5px")

				.text("精简");			//改变背景图片和文本内容

			$('ul li').filter(":contains('华为'),:contains('苹果'),:contains('魅族')")

				.addClass("promoted");	//添加高亮样式

		}

		return false;	//超链接不可跳转

	})

})

运行效果：

总结：

在这个小例子中，我对JQuery的书写有了更深刻的理解，从我写的注释中就看到了相对于之前有了很深刻的理解，从刚开始接触ITOO的一点都不会写，到现在一步步的成长，在项目中真的成长很快，接下来的一个版本我们还会有更多的收获。

巴特西

JQuery实现品牌展示

最新文章

热门文章