[1042] XOOPS模組開發進階
一、 關於本課程
- 講義: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++,基本上沒有限制,您用得習慣即可。
- 學生練習主機為Linux主機,僅社大學員可以申請(FTP及MySQL帳號)。
- 若已經有了可不需再申請,當然要再申請一個新的也無妨。
- 使用期限為本學期,學期結束後,可能隨時會清除舊資料,故請自行備份。
- 申請後,您的網站網址為:「http://163.26.52.243/~帳號」
- 資料庫和FTP帳號、密碼是一樣的!填寫時,Email請留申請DropBox的Email!!以方便將講義共享給您。
- 需有XOOPS環境,因此,請至http://120.115.2.90下載所需版本
- 安裝「簡易通訊錄」模組,本學期將以此模組為基礎,進行各種界面的改造或效果套用。
- 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>
- 其基本語法: <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/
- 隱藏:$("#xxx").hide(); 顯示:$("#xxx").show();
- 滑下:$("#xxx").slideDown("slow"); 滑上:$("#xxx").slideUp("slow");
- 隱出:$("#xxx").fadeOut("slow"); 隱入:$("#xxx").fadeIn("slow"); $('#ooo').click(function(){ //當id="ooo"的網頁元件被點擊時,要做些什麼事 });
- 加上CSS:$("#xxx").css("border","1px solid black");
- 套用class:$("#xxx").addClass("good");
- 移除class:$("#xxx").removeClass();
- 加到裡面:$("#xxx").append("<b>嗨!</b>");
- 取值:$("#xxx").val();
- 轉換網址的javascript語法: location.href="新網址";
- 所謂連動選單就是使用者選取A選單,B選單位根據A選單的值,自動產生相關選項。例如縣市選單,選擇「台南市」之後,第二個選單可能會出現「永康區、新營區...等」;若選擇「新北市」第二個選單則出現「淡水區、八里區...等」。
- 換言之,我們必須能知道選單A何時異動了→$("#A").change()
- 使用者選了A選單的什麼值→$("#A").val()
- 然後,將A選單的值送給程式去運算→$.post()
- 最後,把運算的結果,塞回選單B→$('#B').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"的網頁元件的值。
- 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