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，可用此方式： ```
    
    $xoTheme->addScript('browse.php?Frameworks/jquery/jquery.js');
    $xoTheme->addScript('modules/tadtools/jquery/jquery-migrate.min.js');
    ```
4. 或用tadtools的函數也行（括號中輸入true，表示要載入jquery-ui） ```
    
    get_jquery(true);
    ```
5. 一般網頁可到官網下載後，載入之即可（jquery-migrate是為了相容舊寫法），如： ```
    
    <script src="放置目錄路徑/jquery-1.11.3.min.js"></script>
    <script src="放置目錄路徑/jquery-migrate-1.2.1.min.js"></script>
    ```
6. 亦可直接用CDN，如此無須下載，但缺點是網站必須保持連線狀態 ```
    
    <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. 其基本語法： ```
    
    <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"); ```
    
    $('#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 ()事件

```

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

1. 轉換網址的javascript語法： ```
    
    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()

```

$('#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> ```
    
    <script language="javascript" src="路徑/jquery.twzipcode-1.7.1.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $("#AddrForm").twzipcode();
      });
    </script>
    ```
2. 套用到表單，用以下方法可以自己決定位置，並融入BootStrap中 ```
    
    <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

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Fwww.tad0616.net%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D1203

快速登入

書籍目錄

展開 | 闔起

線上使用者

92人線上 (55人在瀏覽線上書籍)

會員: 0

訪客: 92

更多…

MarkDown

搜尋

QR Code 區塊

快速登入

書籍目錄

線上使用者