先看看完成后的效果图:
下面一步步来实现这样的效果。
首先我们把这个筛选模块的html结构写出来,如下:
<!--搜索区域开始--> <div class="center"> <div class="search_area-top"></div> <div style="POSITION: relative" class="search_area-center"> <div class="search_area-text" id="Tzone"> <h1>区域:</h1> <ul> <li class="selected"><a href="javascript:goSort('Tzone',0)">全部</a></li> <li><a href="javascript:goSort('Tzone',1)">桂林</a></li> <li><a href="javascript:goSort('Tzone',2)">上海</a> </li> <li><a href="javascript:goSort('Tzone',3)">南宁</a> </li> </ul> </div> <div class="search_area-text2" id="Tarea"> <h1>面积:</h1> <ul> <li class="selected"><a href="javascript:goSort('Tarea',0);">全部</a> </li> <li><a href="javascript:goSort('Tarea',1);">500平米以下</a> </li> <li><a href="javascript:goSort('Tarea',2);">500-1000平米</a> </li> <li><a href="javascript:goSort('Tarea',3);">1000-1500平米</a> </li> <li><a href="javascript:goSort('Tarea',8);">1500平米以上</a> </li></ul></div> <div class="search_area-text2" id="Tprice"> <h1>租金:</h1> <ul> <li class="selected"><a href="javascript:goSort('Tprice',0);">全部</a> </li> <li><a href="javascript:goSort('Tprice',1);">10元/平米以下</a> </li> <li><a href="javascript:goSort('Tprice',2);">10-15元/平米</a> </li> <li><a href="javascript:goSort('Tprice',3);">15-20元/平米</a> </li> <li><a href="javascript:goSort('Tprice',4);">20-25元/平米</a> </li> <li><a href="javascript:goSort('Tprice',5);">25元/平米以上</a> </li></ul></div> <div class="search_area-text2" id="Tfloor"> <h1>楼层:</h1> <ul> <li class="selected"><a href="javascript:goSort('Tfloor',0);">全部</a> </li> <li><a href="javascript:goSort('Tfloor',1);">一楼</a> </li> <li><a href="javascript:goSort('Tfloor',2);">二楼以上</a> </li> </ul> </div> <div class="search_area-text2" id="Tstructure"> <h1>结构:</h1> <ul> <li class="selected"><a href="javascript:goSort('Tstructure',0);">全部</a> </li> <li><a href="javascript:goSort('Tstructure',1);">标准厂房</a> </li> <li><a href="javascript:goSort('Tstructure',2);">简易厂房</a> </li> <li><a href="javascript:goSort('Tstructure',3);">钢结构</a> </li> <li><a href="javascript:goSort('Tstructure',4);">其他</a> </li> </ul> </div> </div> <div class="search_area-foot"></div> </div> <!--搜索区域结束-->
/*For search nav*/ .search_area-top{background:url(image/searcharea_top.jpg) no-repeat; height:16px;} .search_area-center{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:22px; line-height:20px;} .search_area-center2{ border-left:1px solid #f4c0a7; border-right:1px solid #f4c0a7; background:#FFFFFF; padding-left:30px; padding-right:20px;} .search_area-text{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;} .search_area-text h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;} .search_area-text ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;} .search_area-text li{ list-style:none; color:#6a6a6a; float:left; width:50px; padding-left:8px; padding-right:5px; white-space:nowrap} .search_area-text li a{ list-style:none; color:#6a6a6a;} .search_area-text li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;} .search_area-text li.selected{color:#ed6b2e; font-weight:bold;} .search_area-text li.selected a{color:#ed6b2e;} .search_area-text li.selected a:hover{color:#ed6b2e;} .search_area-textdown{ overflow:hidden; height:100%; width:705px; padding-top:5px; padding-bottom:3px; background:#fff7f5} .search_area-textdown ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%;} .search_area-textdown li{ list-style:none; color:#ed8d61; text-decoration:underline; float:left; padding-left:10px; padding-right:10px;} .search_area-textdown li a{color:#ed8d61; text-decoration:underline;} .search_area-textdown li a:hover{color:#ed8d61; text-decoration:underline;} .search_area-textdown li.selected{color:#ed8d61; font-weight:bold;} .search_area-text2{ overflow:hidden; height:100%; padding-top:5px; padding-bottom:5px;} .search_area-text2 h1{ color:#6a6a6a; font-weight:bold; float:left; font-size:12px; margin:0px; padding:0px;} .search_area-text2 ul{ margin:0; padding:0; list-style:none; float:left; overflow:hidden; height:100%; width:710px;} .search_area-text2 li{ list-style:none; font-family:Verdana, Arial, Helvetica, sans-serif; color:#6a6a6a; float:left; padding-left:8px; padding-right:5px; white-space:nowrap} .search_area-text2 li a{ list-style:none; color:#6a6a6a;} .search_area-text2 li a:hover{ list-style:none; color:#ed6b2e; font-weight:bold; text-decoration:underline;} .search_area-text2 li.selected a{color:#ed6b2e; font-weight:bold;} .search_area-foot{background:url(image/searcharea_foot.jpg) no-repeat; height:18px;}
(这里使用到了jquery,所以需要在template/default/sell/index.htm 页里先引入jquery 1.7版本;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>)
下面添加控制的js代码:
function getQueryString(){ var result = location.search.match(new RegExp("[\?\&][^\?\&]+=[^\?\&]+","g")); if(result == null){ return ""; } for(var i = 0; i < result.length; i++){ result[i] = result[i].substring(1); } return result; } function goSort(name,value){ var string_array = getQueryString(); var oldUrl = (document.URL.indexOf("index.php")==-1)?document.URL+"index.php":document.URL; var newUrl; if(string_array.length>0)//如果已经有筛选条件 { var repeatField = false; for(var i=0;i<string_array.length;i++){ if(!(string_array[i].indexOf(name)==-1)){ repeatField = true;//如果有重复筛选条件,替换条件值 newUrl = oldUrl.replace(string_array[i],name+"="+value); } } //如果没有重复的筛选字段 if(repeatField == false){ newUrl = oldUrl+"&"+name+"="+value; } }else{//如果还没有筛选条件 newUrl = oldUrl+"?"+name+"="+value; } //跳转 window.location = newUrl; } function setSelected(name,value){ var all_li = $("#"+name).find("li"); //清除所有li标签的selected类 all_li.each(function(){ $(this).removeClass("selected"); }); //为选中的li增加selected类 all_li.eq(value).addClass("selected"); } $(document).ready(function(){ var string_array = getQueryString(); for(var i=0;i<string_array.length;i++){ var tempArr = string_array[i].split("="); setSelected(tempArr[0],tempArr[1]);//设置选中的筛选条件 } });
因为我们是以get方式来提交筛选条件的,所以需要对sell/index.php做一些调整,把接收到的筛选参数加入到当前变量表中,
这样当module/sell/index.inc.php调用相应的index.htm模板时,可以以变量的方式在页面取到筛选条件的值,修改如下:
<?php define('DT_REWRITE', true); require 'config.inc.php'; require '../common.inc.php'; extract($GET,EXTR_OVERWRITE);//筛选条件参数加入到当前变量列表 require DT_ROOT.'/module/'.$module.'/index.inc.php'; ?>
这一块在template/default/sell/index.htm页面里是以标签的方式来调用内容的:
<!--{tag("moduleid=$moduleid&condition=status=3$dtype&areaid=$cityid&catid=$catid&pagesize=".$MOD[pagesize]."&page=$page&showpage=1&datetype=5&order=".$MOD[order]."&fields=".$MOD[fields]."&template=list-sell")}-->
{php $condition = "status=3";} {php $Tarea_array = array(1=>'czzmj<500',2=>'czzmj between 500 and 1000',3=>'czzmj between 1000 and 1500',4=>'czzmj>1500');} {php $Tprice_array = array(1=>'price=10',2=>'price between 10 and 15',3=>'price between 15 and 20',4=>'price between 20 and 25',5=>'price>25');} {php $Tfloor_array = array(1=>'floor=1',2=>'floor>=2');} {php $Tstructure_array = array(1=>'标准厂房',2=>'简易厂房',3=>'钢结构');} {if isset($Tzone)&&($Tzone!=0)} {php $condition.=" and areaid=$Tzone";} {/if} {if isset($Tarea)&&($Tarea!=0)} {php $condition.=" and $Tarea_array[$Tarea]";} {/if} {if isset($Tprice)&&($Tprice!=0)} {php $condition.=" and $Tprice_array[$Tprice]";} {/if} {if isset($Tfloor)&&($Tfloor!=0)} {php $condition.=" and $Tfloor_array[$Tfloor]";} {/if} {if isset($Tstructure)&&($Tstructure!=0)} {php $condition.=" and structure=$Tstructure";} {/if} <!--{tag("moduleid=$moduleid&condition=$condition$dtype&areaid=$cityid&catid=$catid&pagesize=".$MOD[pagesize]."&page=$page&showpage=1&datetype=5&order=".$MOD[order]."&fields=".$MOD[fields]."&template=list-sell")}-->
这样一个粗糙的筛选模块就制作好了。