:::
所有書籍
「[1042] XOOPS模組開發進階」目錄
MarkDown
1. jquery入門及連動選單
1-1 /templates/phone_book_index_b3.html
1-2 /index.php
1-3 /ajax.php
2. 表單驗證及點擊編輯
2-1 /admin/main.php
2-2 /templates/phone_book_adm_main_b3.html
2-3 /index.php
2-4 /templates/phone_book_index_b3.html
2-5 /save_phone_book.php
2-6 /get_name.php
3. 自適應表格及拉動排序
3-1 /index.php
3-2 /templates/phone_book_index_b3.html
3-3 /admin/cate.php
3-4 /templates/phone_book_adm_cate_b3.html
3-5 /admin/main.php
3-6 /templates/phone_book_adm_main_b3.html
3-7 (利用FooTable的分頁+json功能)/index.php
3-8 (利用FooTable的分頁+json功能)/templates/phone_book_index_b3.html
3-9 (利用FooTable的分頁+json功能)/columns.json
3-10 (利用FooTable的分頁+json功能)/rows.json
3-11 (舊版FooTable)/index.php
3-12 (舊版FooTable)/templates/phone_book_index_b3.html
3-13 (舊版FooTable)tadtools/FooTable.php
4. 大小月曆應用
4-1 /templates/phone_book_adm_main_b3.html
4-2 /interface_menu.php
4-3 /birthday.php
4-4 /templates/phone_book_birthday_b3.html
4-5 /xoops_version.php
4-5 /get_event.php
5. Google圖表應用及頁籤
5-1 /interface_menu.php
5-2 /chart.php
5-3 /templates/phone_book_chart_b3.html
5-4 /xoops_version.php
5-5 /ajax.php
5-6 /templates/phone_book_index_b3.html
5-7 /index.php
5-8 /templates/phone_book_adm_main_b3.html
6. 各種文字檔的匯出匯入
6-1 /interface_menu.php
6-2 /html.php
6-3 /index.php
6-4 /function.php
6-5 /csv.php
6-6 /templates/phone_book_adm_main_b3.html
6-7 /admin/main.php
6-8 /json.php
6-9 /get_json.php
6-10 資料庫語法
7. Excel的匯出與匯入
7-1 /header.php
7-2 /excel.php
7-3 /test.php
7-4 /excel_one.php
7-5 /templates/phone_book_adm_main_b3.html
7-6 /admin/main.php
7-7 /index.php
7-8 /templates/phone_book_index_b3.html
8. 產生PDF檔
8-1 /header.php
8-2 /pdf.php
8-3 /pdf.php (多檔下載版)
9. 輸出Word檔及圖片檔
9-1 /header.php
9-2 /word.php
9-3 /index.php
9-4 /templates/phone_book_index_b3.html
1-1 /templates/phone_book_index_b3.html
\[1042\] XOOPS模組開發進階 ==================== [](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
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
總目錄
1.jquery入門及連動選單
1-1/templates/phone_book_index_b3.html
1-2/index.php
1-3/ajax.php
2.表單驗證及點擊編輯
2-1/admin/main.php
2-2/templates/phone_book_adm_main_b3.html
2-3/index.php
2-4/templates/phone_book_index_b3.html
2-5/save_phone_book.php
2-6/get_name.php
3.自適應表格及拉動排序
3-1/index.php
3-2/templates/phone_book_index_b3.html
3-3/admin/cate.php
3-4/templates/phone_book_adm_cate_b3.html
3-5/admin/main.php
3-6/templates/phone_book_adm_main_b3.html
3-7(利用FooTable的分頁+json功能)/index.php
3-8(利用FooTable的分頁+json功能)/templates/phone_book_index_b3.html
3-9(利用FooTable的分頁+json功能)/columns.json
3-10(利用FooTable的分頁+json功能)/rows.json
3-11(舊版FooTable)/index.php
3-12(舊版FooTable)/templates/phone_book_index_b3.html
3-13(舊版FooTable)tadtools/FooTable.php
4.大小月曆應用
4-1/templates/phone_book_adm_main_b3.html
4-2/interface_menu.php
4-3/birthday.php
4-4/templates/phone_book_birthday_b3.html
4-5/xoops_version.php
4-5/get_event.php
5.Google圖表應用及頁籤
5-1/interface_menu.php
5-2/chart.php
5-3/templates/phone_book_chart_b3.html
5-4/xoops_version.php
5-5/ajax.php
5-6/templates/phone_book_index_b3.html
5-7/index.php
5-8/templates/phone_book_adm_main_b3.html
6.各種文字檔的匯出匯入
6-1/interface_menu.php
6-2/html.php
6-3/index.php
6-4/function.php
6-5/csv.php
6-6/templates/phone_book_adm_main_b3.html
6-7/admin/main.php
6-8/json.php
6-9/get_json.php
6-10資料庫語法
7.Excel的匯出與匯入
7-1/header.php
7-2/excel.php
7-3/test.php
7-4/excel_one.php
7-5/templates/phone_book_adm_main_b3.html
7-6/admin/main.php
7-7/index.php
7-8/templates/phone_book_index_b3.html
8.產生PDF檔
8-1/header.php
8-2/pdf.php
8-3/pdf.php (多檔下載版)
9.輸出Word檔及圖片檔
9-1/header.php
9-2/word.php
9-3/index.php
9-4/templates/phone_book_index_b3.html
展開
|
闔起
線上使用者
72
人線上 (
15
人在瀏覽
線上書籍
)
會員: 0
訪客: 72
更多…
:::
主選單
NTPC OpenID
活動報名
模組控制台
進階區塊管理
站長工具箱(急救版)
網站地圖
Tad Tools 工具包
站長工具箱
行事曆
討論留言
嵌入區塊模組
快速登入
網站計數器
好站連結
最新消息
檔案下載
線上書籍
電子相簿
影音播放
常見問題
萬用表單
友站消息
社大學員
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
登入
登入
帳號
密碼
登入