:::

2. 連動選單

一、 環境設定

  1. 使用jQuery中的.post()需要php,因此,需要在伺服器中運作。
  2. 請安裝XOOPS 2.5.5(http://120.115.2.90 Linux 基礎版程式包)
  3. 安裝contact通訊錄模組,本學期會以此模組為範例。

二、 引入TadTools工具
 

if(!file_exists(XOOPS_ROOT_PATH."/modules/tadtools/tad_function.php")){
 redirect_header("http://www.tad0616.net/modules/tad_uploader/index.php?of_cat_sn=50",3, "需要 tadtools 模組,可至<a href='http://www.tad0616.net/modules/tad_uploader/index.php?of_cat_sn=50' target='_blank'>Tad教材網</a>下載。");
}
include_once XOOPS_ROOT_PATH."/modules/tadtools/tad_function.php";


三、 TadTools中呼叫jquery

  1. $jquery=get_jquery($ui=false,$mode="local",$theme='base');
  2. $ui:是否引入jquery ui
  3. $mode:引入方式,其值有:none(不引入jquery)、google(使用Google的jquery)、local(引入TadTools中的jquery)
  4. $theme:ui使用的佈景,有base和ui-lightness兩種。

四、 何謂連動選單?

  1. 使用者選取A選單,B選單位根據A選單的值,自動產生相關選項。例如縣市選單,選擇「台南市」之後,第二個選單可能會出現「永康區、新營區...等」;若選擇「新北市」第二個選單則出現「淡水區、八里區...等」。
  2. 換言之,我們必須能知道選單A何時異動了→$("#A").change()
  3. 使用者選了A選單的什麼值→$("#A").val()
  4. 然後,將A選單的值送給程式去運算→$.post()
  5. 最後,把運算的結果,塞回選單B→$('#B').html(data);

五、 jQuery的.post()與.get()
 

  $(document).ready(function(){
    $.post('ajax.php',  {op: 'get_menu' , menu1: '台南市'} , function(data) {
      $('#menu2').html(data);
    });
  });

 

  1. ajax.php:背後運算的程式
  2. {op: 'get_menu' , menu1: '台南市'}:帶參數給ajax.php,ajax.php會接收到「$_POST['op']="get_menu"」及「$_POST['menu1']="台南市"」兩個值。
  3. 若是要傳送陣列:{ 'county[]': ["台南市", "新北市"] }
  4. function(data) {}:就是把menu.php的運算結果「data」套用到某些動作中。
  5. $('#menu2').html(data):把運算結果「data」放入id="menu2"的網頁元件中。

六、 jQuery的.change ()事件
 

$('#menu1').change(function(){
  //當id="menu1"的網頁元件有變動時,要做些什麼事
});


七、 jQuery的.val ()方法

  1. $('#menu1').val()可以取得id="menu1"的網頁元件的值。
  2. $('#menu1').val('xxx')可以設定id="menu1"的網頁元件的值。

:::

搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D746

書籍目錄

展開 | 闔起

線上使用者

23人線上 (6人在瀏覽線上書籍)

會員: 0

訪客: 23

更多…