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实现品牌展示的更多相关文章
- jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）
闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...
- 项目一:项目第二天 Jquery ztree使用展示菜单数据 2、 基础设置需求分析 3、 搭建项目框架环境--ssh（复习） 4、 SpringData-JPA持久层入门案例（重点） 5、 Easyui menubutton菜单按钮使用 6、 Easyui messager消息框使用
1. Jquery ztree使用展示菜单数据 2. 基础设置需求分析 3. 搭建项目框架环境--ssh(复习) 4. SpringData-JPA持久层入门案例(重点) 5. Easyui menu ...
- [iOS基础控件 - 6.4] 汽车品牌展示 Model嵌套/KVC/TableView索引
A.需求 1.使用汽车品牌名称头字母为一个Model,汽车品牌为一个Model,头字母Model嵌套品牌Model 2.使用KVC进行Model封装赋值 3.展示头字母标题 4.展示索引(使用KVC代 ...
- jQuery图片组展示插件----Galleria使用简介
1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...
- 如何用Jquery做图片展示效果
一. 前言 到底用JQuery做出怎样的展示效果? 让我们先来看一下!网页加载时,如图所示: 二.本人思路 这个效果初学者看起来好像有点复杂,其实不太难,关键是理清思路,从后端的数据库中找出我们要展示 ...
- jquery之遍历展示title
//遍历展示title {field:'couponsList',title:'优惠劵类型',width:250,align:'center',sortable:true, formatter:fun ...
随机推荐
- Appium元素定位难点：混合式的native+webview
现在大部分app都是混合式的native+webview,对应native上的元素通过uiautomatorviewer很容易定位到,webview上的元素就无法识别了. 1.认识识webview & ...
- php_mvc实现步骤三，四
3.match_mvc MVC 以ecshop的前台为例: 功能一: 首页 购物车数据,商品分类数据,其他的首页需要的数据 功能二: 拍卖活动 购物车数据,商品分类数据,拍卖相关数据 功能三: 团购商 ...
- LeetCode 235. 二叉搜索树的最近公共祖先 32
235. 二叉搜索树的最近公共祖先 235. Lowest Common Ancestor of a Binary Search Tree 题目描述 给定一个二叉搜索树,找到该树中两个指定节点的最近公 ...
- [转]综述论文翻译：A Review on Deep Learning Techniques Applied to Semantic Segmentation
近期主要在学习语义分割相关方法,计划将arXiv上的这篇综述好好翻译下,目前已完成了一部分,但仅仅是尊重原文的直译,后续将继续完成剩余的部分,并对文中提及的多个方法给出自己的理解. _论文地址:htt ...
- hive学习(1)
什么是Hive Hive是基于Hadoop的一个数据仓库工具(E抽取T转换L加载),可以将结构化的数据文件映射为一张表,并提供类SQL查询功能. 本质是:将HQL转化成MapReduce程序 Hive ...
- Java开发笔记（一百二十七）Swing的标签
提起AWT的标签控件Label,那个使用体验可真叫糟糕,不但不支持文字换行,而且对中文很不友好,既可能把中文显示为乱码,还不支持博大精深的各种中文字体.所幸Swing的升级版标签JLabel在各方面都 ...
- 存储库之MongoDB
一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库(非关系型数据库) 1.易用性 MongoDB是一个面向文档(document-oriented)的数据库,而不是关系型数据库. 不采 ...
- DFS集训
2019-07-29 09:01:06 A PARTY A company has n employees numbered from 1 to n. Each employee either has ...
- [洛谷P5304][GXOI/GZOI2019]旅行者
题目大意: 有一张 \(n(n\leqslant10^5)\) 个点 \(m(m\leqslant5\times10^5)\) 条边的有向有正权图,有$k(2\leqslant k\leqslant ...
- 转：JVM的符号引用和直接引用
在JVM中类加载过程中,在解析阶段,Java虚拟机会把类的二级制数据中的符号引用替换为直接引用. 1.符号引用(Symbolic References): 符号引用以一组符号来描述所引用的目标,符号可 ...