:::

1. jquery入門及連動選單

一、 關於本課程

  1. 講義: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,其次為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%2Fpage.php%3Ftbsn%3D39%26tbdsn%3D1203

書籍目錄

展開 | 闔起

線上使用者

83人線上 (24人在瀏覽線上書籍)

會員: 0

訪客: 83

更多…