Tad 教材網 - 線上書籍

:::

1-1 /templates/phone_book_index_b3.html next

\[1042\] XOOPS模組開發進階
====================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/39/01.zip)

### 一、 關於本課程

1. 講義：[http://www.tad0616.net/modules/tad\_book3/index.php?tbsn=39](http://www.tad0616.net/modules/tad_book3/index.php?tbsn=39)
2. 請申請Dropbox（<https://www.dropbox.com>），一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
3. 本課程是系列中的第五個學程，屬最進階部份，因此，有任何聽不懂的：拜託您問！
4. 上課歡迎卯起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
5. 上課時間為週六9:00～12:00及13:30～16:30，共計九次。
6. 上課歡迎拍照、錄音、錄影，能和同學分享更好。
7. 座位基本上沒有強制性，但也不建議每次都換來換去。
8. 記得認識一下助教！
 
### 二、 這學期會學到...

1. 改善程式界面的技巧，讓界面操作更友善、更智慧。
2. 各種現有套件的應用，站在巨人的肩膀上，節省開發時間
3. 各種格式文件的匯出與匯入，超實用的商用技巧。
4. 各種開發經驗（前提是您得敢問）
 
### 三、 開發工具

1. 只要是自己熟悉的純文字編輯工具都可以。
2. 首推[sublime text](http://163.26.52.243/modules/tad_uploader/index.php?op=dlfile&cfsn=7&cat_sn=1&name=sublime%20text64.zip)，其次為NotePad++，基本上沒有限制，您用得習慣即可。
 
### 四、 申請學生練習主機空間（<http://163.26.52.243>）

1. 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
2. 若已經有了可不需再申請，當然要再申請一個新的也無妨。
3. 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
4. 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
5. 資料庫和FTP帳號、密碼是一樣的！填寫時，Email請留申請DropBox的Email！！以方便將講義共享給您。
 
### 五、 開發環境

1. 需有XOOPS環境，因此，請至<http://120.115.2.90>下載所需版本
2. 安裝「簡易通訊錄」模組，本學期將以此模組為基礎，進行各種界面的改造或效果套用。
 
### 六、 jQuery入門

1. jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。
2. jQuery官網：<http://jquery.com/>
3. tadtools 2.7之後無須自行套用，若要自行在XOOPS套用jquery，可用此方式： ```
  <pre class="brush:php;">
  $xoTheme->addScript('browse.php?Frameworks/jquery/jquery.js');
  $xoTheme->addScript('modules/tadtools/jquery/jquery-migrate.min.js');
  ```
4. 或用tadtools的函數也行（括號中輸入true，表示要載入jquery-ui） ```
  <pre class="brush:php;">
  get_jquery(true);
  ```
5. 一般網頁可到官網下載後，載入之即可（jquery-migrate是為了相容舊寫法），如： ```
  <pre class="brush:xml;">
  <script src="放置目錄路徑/jquery-1.11.3.min.js"></script>
  <script src="放置目錄路徑/jquery-migrate-1.2.1.min.js"></script>
  ```
6. 亦可直接用CDN，如此無須下載，但缺點是網站必須保持連線狀態 ```
  <pre class="brush:xml;">
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  ```
 
### 七、 jQuery基本概念：什麼元件在什麼時候要做什麼事。

1. 其基本語法： ```
  <pre class="brush:xml;">
  <script type="text/javascript">
    $(document).ready(function(){
      //jquery語法
    });
  </script>
  ```
2. $() 就是用來指定元件的挑選器（什麼元件）， $(document) 或$()代表此網頁。 
  - (1) 指定標籤：$("button")→挑選到的是→ <button>
  - (2) 指定id：$("#aa")→挑選到的是→ id="aa"
  - (3) 指定class：$(".box")→挑選到的是→ class="box"
3. ready()是事件，事件中通常會執行某函數，因為函數大多只用一次，所以，通常直接在()中寫 function(){} 即可，不另外命名，稱之為匿名函數
4. 完整事件或功能建議參考：<http://www.css88.com/jqapi-1.9/>
 
### 八、 用jQuery的click()事件來開關某元件

1. 隱藏：$("#xxx").hide(); 顯示：$("#xxx").show();
2. 滑下：$("#xxx").slideDown("slow"); 滑上：$("#xxx").slideUp("slow");
3. 隱出：$("#xxx").fadeOut("slow"); 隱入：$("#xxx").fadeIn("slow"); ```
  <pre class="brush:xml;">
  $('#ooo').click(function(){
    //當id="ooo"的網頁元件被點擊時，要做些什麼事
  });
  ```
 
### 九、 常用jQuery效果（Effects）

1. 加上CSS：$("#xxx").css("border","1px solid black");
2. 套用class：$("#xxx").addClass("good");
3. 移除class：$("#xxx").removeClass();
4. 加到裡面：$("#xxx").append("<b>嗨！</b>");
5. 取值：$("#xxx").val();
 
### 十、 jQuery的.change ()事件

```
<pre class="brush:xml;">
$('#ooo').change(function(){
  //當id="ooo"的網頁元件有變動時，要做些什麼事
});
```

1. 轉換網址的javascript語法： ```
  <pre class="brush:jscript;">
  location.href="新網址";
  ```
 
### 十一、 連動選單原理

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

```
<pre class="brush:jscript;">
$('#county').change(function(){
        $.post('ajax.php',  {county:  $('#county').val()} , function(data) {
          $('#city').html(data);
        });
 });
```

1. ajax.php：背後運算的程式
2. {county: $('#county').val()}：帶參數給ajax.php，ajax.php會接收到「$\_POST\['county'\]="選定的值"」。
3. function(data) {}：就是把ajax.php的運算結果「data」套用到指定元素中。
4. $('#city').html(data)：把運算結果「data」放入id="city"的網頁元件中。
5. $('#county').val()可以取得id="county"的網頁元件的值。
 
### 十三、 地址jQuery

1. TWzipcode官網：<http://app.essoduke.org/twzipcode> ```
  <pre class="brush:xml;">
  <script language="javascript" src="路徑/jquery.twzipcode-1.7.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#AddrForm").twzipcode();
    });
  </script>
  ```
2. 套用到表單，用以下方法可以自己決定位置，並融入BootStrap中 ```
  <pre class="brush:xml;">
  <div id="AddrForm">
      <div data-role="zipcode"
           data-name="表單name "
           data-value="預設值"
           data-style="樣式名稱">
      </div>
      <div data-role="county"
           data-name="表單name"
           data-value="預設值"
           data-style="樣式名稱">
      </div>
      <div data-role="district"
           data-name="表單name"
           data-value="預設值"
           data-style="樣式名稱">
      </div>
  </div>
  ```
3. data-role千萬不要去改
4. data-name是「表單name」指的就是該欄位原本在表單裡的name
5. data-value是預設值，在XOOPS樣板檔中，長像這樣<{$zip}>
6. data-style可指定該欄位欲套用的樣式，若要帶入BootStrap，可填入form-control

:::