今天写分类页面中排序和价格页面
排序价格页面
这个页面还算简单，上面的是图片，下面排序和价格是用两张table做的，没什么太大的难度。设置的table没有表框，是在每个td上加上一个边框。再把输入框的边框用 border-width; 0px,边框设置为无，就是想在这样了。
5.31日更新产品列表
产品列表
我记得原来好像写过类似的列表吧，都大同小异。不过这个当鼠标放在列表上时会有四个像素的红色边框出现。实现它就是套两个div ，如果套一个的话，会因为像素不够。往里面挤，造成抖动。
6.1日 0:27更新分类页面交互
分类页面交互
吧这两个页面结合在一起了，并且在输入框输入价格区间就可找到对应的商品。
先获取输入框的值，如果不是数字或小于0就改成一，并输出到输入框。再分别获取开始输入框和结束输入框的值，并判断他们同时为数字。把商品div隐藏，在用each()函数遍历所有商品。
再用attr()函数获取每个元素的price属性，这个属性为价格，和所在商品价格一样。把获取到的price属性转换为Number对象，new Number().没设这个时，当我在结束输入框输入1000时，没有数据。设置就没事了，不清楚这是怎么回事。然后把转换后的price和价格区间比较，满足条件的就显示。下图是查找符合条件的商品。
查找
下面是jquery代码。
<script>
$(function(){
$("input.press").keyup(function(){
var num = $(this).val();
if (num.length == 0)
{
$("div.div3").show();
return;
}
num = parseInt(num);
if (isNaN(num))
num = 1;
if (num <= 0)
num = 1;
$(this).val(num);
var begin = $("input.beginpre").val();
var end = $("input.endpre").val();
if (!isNaN(begin) && !isNaN(end)){
$("div.div3").hide();
$("div.div3").each(function(){
var price = $(this).attr("price");
price = new Number(price);
if (price <= end && price >= begin)
$(this).show();
});
}
});
});
</script>
