一个例子-页面列表模式、缩略图模式切换

最新推荐文章于 2024-01-10 10:47:02 发布

云焰

最新推荐文章于 2024-01-10 10:47:02 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/yan_dk/article/details/9258469

版权

功能描述

实现一个产品信息的列表模式、缩略图模式的显示的页面。

页面效果

注：点击列表模式、缩略图模式，可以看到不同的展示信息。

功能构件：

1.演示页面（prodView_listSmall.html）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link href="s1.css" rel="stylesheet">
<script src="jquery.js" type="text/javascript"></script>

<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
$(document).ready(function() {
// $("#barCmdViewSmall").addClass("select");
$("#prodInfo_small").hide();
//列表模式
$("#barCmdViewList").click(function(){
// alert("list");
$("#prodInfo_List").show();
$("#prodInfo_small").hide();
});
//缩略图模式
$("#barCmdViewSmall").click(function(){
// alert("list");
$("#prodInfo_List").hide();
$("#prodInfo_small").show();
});

});
</script>
</HEAD>

<BODY>
<div class="location clearfix b-header b-bdr-7">
<ul class="bar-cmd-view-list clearfix">
<li><a class="select" href="javascript:;" id="barCmdViewList" title="列表模式"><span></span></a></li>
<li class="end"><a href="javascript:;" id="barCmdViewSmall" title="缩略图模式"><span></span></a></li>
</ul>
</div>
<div id="prodInfo_List" >
<TABLE >
<TR>
<TD>产品名称</TD>
<TD>价格</TD>
<TD>操作</TD>
</TR>
<TR>
<TD>硬盘</TD>
<TD>￥100</TD>
<TD>增加、修改、删除</TD>
</TR>
</TABLE>
</div>

<div id="prodInfo_small">
<TABLE >
<TR>
<TD>产品名称：硬盘</TD>
<TD>价格：￥100</TD>
</TR>
</TABLE>
</div>
</BODY>
</HTML>

2.css样式

TABLE{border:1px solid #AEDEF2;
border-collapse: collapse;
}
td,th,label{
text-indent:0px;
font-size: 12px;
}
/*初始化选中的li的背景*/
.bar-cmd-view-list li a.select, .bar-cmd-view-list li a.select:hover{
background-position: -66px -268px;
}
/*设置缩略图li背景*/
.bar-cmd-view-list li.end a {
background-position: -100px -268px;
}

.bar-cmd-view-list li a {
height: 29px;
width: 32px;
display: block;
background: url('btn_icon.gif') -66px -268px no-repeat;
}

3.资源文件

图片：btn_icon.gif

js库：jquery.js

云焰

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
一个例子-页面列表模式、缩略图模式切换

功能描述：实现一个产品信息的列表模式、缩略图模式的显示的页面页面效果注：点击列表模式、缩略图模式，可以看到不同的展示信息。功能构件： 1.演示页面（prodView_listSmall.html） New Document $(document).ready(functio
复制链接

扫一扫