:::
1. jquery入門及連動選單
一、 關於本課程
- 講義：http://www.tad0616.net/modules/tad_book3/index.php?tbsn=39
- 請申請Dropbox（https://www.dropbox.com），一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
- 本課程是系列中的第五個學程，屬最進階部份，因此，有任何聽不懂的：拜託您問！
- 上課歡迎卯起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
- 上課時間為週六9:00～12:00及13:30～16:30，共計九次。
- 上課歡迎拍照、錄音、錄影，能和同學分享更好。
- 座位基本上沒有強制性，但也不建議每次都換來換去。
- 記得認識一下助教！
二、 這學期會學到...
- 改善程式界面的技巧，讓界面操作更友善、更智慧。
- 各種現有套件的應用，站在巨人的肩膀上，節省開發時間
- 各種格式文件的匯出與匯入，超實用的商用技巧。
- 各種開發經驗（前提是您得敢問）
三、 開發工具
- 只要是自己熟悉的純文字編輯工具都可以。
- 首推sublime text，其次為NotePad++，基本上沒有限制，您用得習慣即可。
四、 申請學生練習主機空間（http://163.26.52.243）
- 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
- 若已經有了可不需再申請，當然要再申請一個新的也無妨。
- 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
- 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
- 資料庫和FTP帳號、密碼是一樣的！填寫時，Email請留申請DropBox的Email！！以方便將講義共享給您。
五、 開發環境
- 需有XOOPS環境，因此，請至http://120.115.2.90下載所需版本
- 安裝「簡易通訊錄」模組，本學期將以此模組為基礎，進行各種界面的改造或效果套用。
六、 jQuery入門
- jQuery是一套跨瀏覽器的JavaScript函式庫，簡化HTML與JavaScript之間的操作。
- jQuery官網：http://jquery.com/
- tadtools 2.7之後無須自行套用，若要自行在XOOPS套用jquery，可用此方式：
$xoTheme->addScript('browse.php?Frameworks/jquery/jquery.js'); $xoTheme->addScript('modules/tadtools/jquery/jquery-migrate.min.js'); - 或用tadtools的函數也行（括號中輸入true，表示要載入jquery-ui）
get_jquery(true);
- 一般網頁可到官網下載後，載入之即可（jquery-migrate是為了相容舊寫法），如：
<script src="放置目錄路徑/jquery-1.11.3.min.js"></script> <script src="放置目錄路徑/jquery-migrate-1.2.1.min.js"></script>
- 亦可直接用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基本概念：什麼元件在什麼時候要做什麼事。
- 其基本語法：
<script type="text/javascript"> $(document).ready(function(){ //jquery語法 }); </script> - $() 就是用來指定元件的挑選器（什麼元件）， $(document) 或$()代表此網頁。
- (1) 指定標籤：$("button")→挑選到的是→ <button>
- (2) 指定id：$("#aa")→挑選到的是→ id="aa"
- (3) 指定class：$(".box")→挑選到的是→ class="box"
- ready()是事件，事件中通常會執行某函數，因為函數大多只用一次，所以，通常直接在()中寫 function(){} 即可，不另外命名，稱之為匿名函數
- 完整事件或功能建議參考：http://www.css88.com/jqapi-1.9/
八、 用jQuery的click()事件來開關某元件
- 隱藏：$("#xxx").hide(); 顯示：$("#xxx").show();
- 滑下：$("#xxx").slideDown("slow"); 滑上：$("#xxx").slideUp("slow");
- 隱出：$("#xxx").fadeOut("slow"); 隱入：$("#xxx").fadeIn("slow");
$('#ooo').click(function(){ //當id="ooo"的網頁元件被點擊時，要做些什麼事 });
九、 常用jQuery效果（Effects）
- 加上CSS：$("#xxx").css("border","1px solid black");
- 套用class：$("#xxx").addClass("good");
- 移除class：$("#xxx").removeClass();
- 加到裡面：$("#xxx").append("<b>嗨！</b>");
- 取值：$("#xxx").val();
十、 jQuery的.change ()事件
$('#ooo').change(function(){
//當id="ooo"的網頁元件有變動時，要做些什麼事
});
- 轉換網址的javascript語法：
location.href="新網址";
十一、 連動選單原理
- 所謂連動選單就是使用者選取A選單，B選單位根據A選單的值，自動產生相關選項。例如縣市選單，選擇「台南市」之後，第二個選單可能會出現「永康區、新營區...等」；若選擇「新北市」第二個選單則出現「淡水區、八里區...等」。
- 換言之，我們必須能知道選單A何時異動了→$("#A").change()
- 使用者選了A選單的什麼值→$("#A").val()
- 然後，將A選單的值送給程式去運算→$.post()
- 最後，把運算的結果，塞回選單B→$('#B').html(data);
十二、 jQuery的.post()與.get()
$('#county').change(function(){
$.post('ajax.php', {county: $('#county').val()} , function(data) {
$('#city').html(data);
});
});
- ajax.php：背後運算的程式
- {county: $('#county').val()}：帶參數給ajax.php，ajax.php會接收到「$_POST['county']="選定的值"」。
- function(data) {}：就是把ajax.php的運算結果「data」套用到指定元素中。
- $('#city').html(data)：把運算結果「data」放入id="city"的網頁元件中。
- $('#county').val()可以取得id="county"的網頁元件的值。
十三、 地址jQuery
- 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> - 套用到表單，用以下方法可以自己決定位置，並融入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> - data-role千萬不要去改
- data-name是「表單name」指的就是該欄位原本在表單裡的name
- data-value是預設值，在XOOPS樣板檔中，長像這樣<{$zip}>
- data-style可指定該欄位欲套用的樣式，若要帶入BootStrap，可填入form-control
