用phpcms做多種條件篩選菜單

需要調用jQuery文件


<script>
//獲取url地址欄中的參數值
function getUrlParam(name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
	var r = window.location.search.substr(1).match(reg);  
	if (r != null) return unescape(r[2]); return null; 
}
//獲取url地址欄3個參數
var style_anli = getUrlParam('style_anli');
var model_anli = getUrlParam('model_anli');
var package = getUrlParam('package');

$(document).ready(function(){ 
   //給當前選中各個參數按鈕加css樣式,高亮顯示當前選中條件
   $("#style_anli"+style_anli).addClass("on");   
   $("#model_anli"+model_anli).addClass("on"); 
   $("#package"+package).addClass("on");  
   //更新隱藏的form表單值
   $("#style_anli").val(style_anli);
   $("#model_anli").val(model_anli);
   $("#package").val(package);
});	
	
 //點擊某個篩選菜單,觸發form表單提交 		
function setProps(objid,value){
    $("#"+objid).val(value);
    $("#qRooms").submit();
}

</script>

//隱藏的form表單,通過點擊調用js改變值
<form action="/index.php" id="qRooms" method="get">
     <input type="hidden" name="m" value="content" id="m"/>
     <input type="hidden" name="c" value="index" id="c"/>
     <input type="hidden" name="a" value="lists" id="a"/>
     <input type="hidden" name="catid" value="10" id="catid"/>
                
     <input type="hidden" name="style_anli" value="" id="style_anli"/>
     <input type="hidden" name="model_anli" value="" id="model_anli"/>
     <input type="hidden" name="package" value="" id="package"/>       
</form>


html菜單部分:

<ul class="casStyle">
	<li><a href="javascript:setProps('style_anli',0);" id="style_anli0">現代簡約</a></li> 
	<li><a href="javascript:setProps('style_anli',1);" id="style_anli1">鄉村田園</a></li> 
	<li><a href="javascript:setProps('style_anli',2);" id="style_anli2">地中海</a></li> 
	<li><a href="javascript:setProps('style_anli',3);" id="style_anli3">混搭</a></li>  
	<li><a href="javascript:setProps('style_anli',4);" id="style_anli4">歐式</a></li> 
	<li><a href="javascript:setProps('style_anli',5);" id="style_anli5">中式</a></li> 
	<li><a href="javascript:setProps('style_anli',6);" id="style_anli6">北歐</a></li>   
	<li><a href="javascript:setProps('style_anli',7);" id="style_anli7">日式</a></li>          
</ul>

//拼接url地址欄的值,組合成sql條件,傳給phpcms的where參數
<?php
      if($_GET['style_anli']!=""){
            $style_anli=" and style_anli=".$_GET['style_anli'];
      }
 
      if($_GET['model_anli']!=""){
            $model_anli=" and model_anli=".$_GET['model_anli'];
      }
   
     if($_GET['package']!=""){
           $package=" and package=".$_GET['package'];
     }
   
     $sql="catid=10 ".$style_anli.$model_anli.$package;
     //數據庫中“風格”字段存的是數字,所以這裏再定義一個數組,跟數據庫順序一致,方便模板中調用。
     $fengge=array('現代簡約','鄉村田園','地中海','混搭','歐式','中式','北歐','日式','美式','新古典','其他');
   
?>

{pc:content action="lists" catid="$catid"  where="$sql" num="9" order="listorder DESC" page="$page" moreinfo="1" } 
{loop $data $r}
...........


分頁問題:

通過js改變,phpcms程序默認的分頁href值,給href值追加參數。

<script>
	var zone = getUrlParam('zone');
	var fenye=document.getElementById("fenyeurl").getElementsByTagName("a");
	for(var i=1;i<fenye.length;i++){
		fenye[i].href+="&zone="+zone;
	}
</script>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章