點評：聯動菜單在1.5中應用還是比較多的,主要就是單元-分類的聯動,以及我們平常見到的省市聯動等等
總的來說這個應用比較多,我在這裡用joomla來作為一個架構使用,不使用這個也是可以的,你可以自己照著例子做,園子裡講的聯動非常多,不多多數是.net,語言雖然相通,但是對從沒有接觸過.net還是不易理解,這裡就用php+jquery(ajax)來實現這一功能,並且同時解決ajax到底如何在joomla中使用.ajax在joomla中通過json資料交換的例子好像沒有,我這是第一個也許是最後一個,下面就開始來講講實現過程吧.
要想使用json,我們必須讓他傳回值是json格式才可以,但是預設的模版都是會帶有head標記內容的,從國外看到一種方法,也就解決了我一直不知道joomla如何使用json資料.進入templates/system檔案夾下面,建立一個json.php的檔案,這個就是後面用到的ajax返回資料,處理方法就寫到這個裡,我這裡通過單元-分類實現二級聯動效果,那麼這裡的資料處理就是根據單元ajax GET傳過來值去尋找分類,代碼如下,json.php檔案代碼:
複製代碼
代碼如下:
<?php defined('_JEXEC') or die('Restricted access');
$db = JFactory::getDBO();
$id = (int)$_GET['select1'];
if(isset($id)){
$query1 = "SELECT id,title FROM #__categories where section=".$id;
$db->setQuery($query1);
$rss = $db->LoadObjectList();
$arr = array();
foreach($rss as $key=>$value){
$arr[] = $value;
}
$json = urldecode(json_encode($arr));
echo $json;
}
上邊代碼就是查詢出來id和title,然後轉換成json格式,這裡json_encode函數就是轉換函式,urldecode防止中文亂碼的.最後輸出了json資料,這樣輸出的資料是沒有head標記的,他的地址就是index.php?tmpl=json這個以後ajax要用到,tmpl就是輸出組件模版的一個參數,如果它的值等於了component,就會只顯示組件內容,等價於index2.php.我前面講過這個小技巧了.
接下來我們建立一個測試組件,就叫做com_test,裡面不需要過多檔案,這裡僅僅測試,所以有控制器和視圖即可,組件的寫法不講了,不會的看看代碼吧,我專門說說jquery ajax操作聯動菜單的代碼如下,在test view裡面,
複製代碼
代碼如下:
<?php defined('_JEXEC') or die('Restricted access');
$db = JFactory::getDBO();
$query = "SELECT id,title FROM #__sections";
$db->setQuery($query);
$rs = $db->LoadObjectList();
?>
ajax聯動菜單示範:
<script language="javascript">
function getSelect(){
jQuery.getJSON("index.php?tmpl=json",{'select1':jQuery("#select1").val()},function(json){
var select2 = jQuery("#select2");
jQuery("option",select2).remove();
jQuery.each(json,function(index,array){
var option = "<option value='"+array['id']+"'>"+array['title']+"</option>";
select2.append(option);
});
});
}
jQuery(function(){
getSelect();
jQuery("#select1").change(function(){
getSelect();
});
});
</script>
<select name='select1' id='select1'>
<option value='-1'>=請選擇=</option>
<?php foreach($rs as $rs1){?>
<option value='<?php echo $rs1->id;?>'><?php echo $rs1->title;?></option>
<?php }?>
</select>
<select id="select2" name="select2">
</select>
上邊讀取出來所有的單元,把他顯示到第一個select上邊,然後通過getJSON去擷取json的資料,在這裡傳遞過去了我們選擇的值,就是change事件,把返回的分類資料我們添加到第二個select控制項上邊,這樣就實現了聯動菜單的效果.其實joomla內建有聯動效果,不過我沒有看懂,代碼挺多的,我想我這裡還是比較簡單的,其他地方非joomla也可以用,你可以用數組去替代資料庫查出的值,不過一般都是寫在資料庫裡面,我這裡沒有使用$,而是用jQuery代替了,還有我也沒有用
複製代碼
代碼如下:
jQuery.noConflict();
這一句是解決多個js庫衝突的,所以我使用了一個joomla外掛程式,屏蔽所有匯入的jquery,用外掛程式的jquery代替,這樣就不會出現多次引用jquery庫,$是mootools預設的替代方法,所以joomla中都是用jQuery來寫jquery代碼的.有的人喜歡給這個賦值一個臨時變數比如j,但是我發現如果有人寫另一個組件的時候又再次賦值,就出現錯誤,所以還是同意比較好,這樣不會出現js代碼衝突,一旦出現衝突,尋找是比較困難的.
聯動菜單大概就是這樣的,當然實現方法千千萬,這裡講的是jquery來實現,還是比較方便簡單的,最後提供讀者一個雙select控制項作業碼.代碼來自他人,不過挺實用的,你會用得著.
複製代碼
代碼如下:
<script>
jQuery(function(){
jQuery('#addto').click(function(){
var options = jQuery('#select1 option:selected');//擷取當前選中的項
var remove = options.remove();//刪除下拉式清單中選中的項
remove.appendTo('#select2');//追加給對方
});
jQuery('#remove').click(function(){
var removeOptions = jQuery('#select2 option:selected');
removeOptions.appendTo('#select1');//刪除和追加可以用appendTo()直接完成
});
jQuery('#addAll').click(function(){
var addOptions = jQuery('#select1 option');
addOptions.appendTo('#select2');
});
jQuery('#removeAll').click(function(){
var removeAllOptions = jQuery('#select2 option');
removeAllOptions.appendTo('#select1');
});
//雙擊事件
jQuery('#select1').dblclick(function(){
//var jQueryoptions = jQuery('#select1 option:selected');
var jQueryoptions = jQuery('option:selected', this);//注意此處“option”與“:”之間的空格，有空格是不可以的
jQueryoptions.appendTo('#select2');
});
jQuery('#select2').dblclick(function(){
jQuery('#select2 option:selected').appendTo('#select1');
});
});
</script>
<select multiple="multiple" id="select1" style="width: 100px; height: 100px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button type="button" id="addto">添加</button>
<button type="button" id="remove">移除</button>
<button type="button" id="addAll">全部添加</button>
<button type="button" id="removeAll">全部移除</button>
<select multiple="multiple" id="select2" name="fids" style="width: 100px; height: 100px;">
</select>
同樣是jquery操作.記得載入jquery庫哦,我是1.72版測試通過的!最後附圖兩張,無圖無真相:
Yoby 老習慣,附上com_test的程式碼封裝,僅供參考!注意程式碼封裝裡面json.php位置哦,認真讀了我想應該明白也可以成功實現.貌似這是一種比較好的joomla中實現ajax方式
/201207/yuanma/joomla-ajax_jb51.rar
雙select直接複製吧.不傳了!
(本文原創 select代碼來自收藏)
