線上書籍

Home

[1012]PHP進階開發及TadTools工具應用

一、 環境設定
  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"的網頁元件的值。