2013年3月4日 星期一

jQuery UI 執行環境配置

好久沒整理 jQuery 筆記了, 到官網一看, 哇, 都已經升到 jQuery 1.9.1, 而 UI 也升到 1.10.1 版了. 順便更新一下筆記中的環境配置如下, 這是針對內部網站使用才需要, 外部網站可直接使用 Google 或 jQuery 官網的 CDN :

  1. 下載 jQuery 與 jQuery UI : 目前是 1.10.1 版
    雖然 jQuery UI 1.10.1 已將最新的 jQuery 1.9.1 版打包在內, 但是卻不是壓縮檔.
    到 jQuery UI 官網 : http://jqueryui.com/download/
    網頁拉到最底下按 Download 即可.
    再把網頁拉到最上面, 在 stable 後面有個 Themes, 可下載打包好的全部佈景主題 zip 檔.
    再到 jQuery 官網 : http://jquery.com/download/
    下載壓縮版 jquery-1.9.1.min.js : Download the compressed, production jQuery 1.9.1
  2. 將下載的 jquery-ui-1.10.1.custom.zip 檔解開, 裡面有三個目錄與一個檔案 index.html.
    (1) css : 佈景主題 Theme, 預設只有 ui-lightness
    (2) js : Javascript檔, 包括 jquery-1.9.1.min.js 與 jquery-ui-1.10.1.custom.min.js, jquery-ui-1.10.1.custom.js.
    (3) development-bundle : 開發時的原始檔
    只要保留 css 與 js 這兩個目錄就可以讓 jQueryUI 運作了, development-bundle 目錄可以刪除. 如果需要切換主題, 可以將 css 目錄也刪除, 解壓縮布景主題 jquery-ui-themes-1.10.1.zip 檔, 裡面有一個 themes 目錄, 把 themes 目錄複製到 jQuery UI 的目錄下 (共有 25 個主題). 另外把下載的 jquery-1.9.1.min.js (91K) 複製到 js 目錄下, 刪除非壓縮版 jquery-1.9.1.js (263K) 與 jquery-ui-1.10.1.custom.js (430K).
  3. 製作 HTML 檔 :
    <head><title>jQuery 測試</title>
    <link type="text/css" href="themes/smoothness/jquery-ui-1.10.1.custom.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.1.custom.min.js"></script>
    </head>

    下列例子是在名為 date 的文字欄位上加入 jQuery 的日期選擇器功能 :
    <input type="text" size="20" name="date" id="date" />
    <script language="JavaScript">
    $('#date').datepicker();
    </script>
     

  4. 從 Google 或 jQuery CDN 匯入 :
    如果是外部網站, 可以直接從 Google CDN 匯入框架 :
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js">

    或者從 jQuery CDN 匯入 :
    <link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
    </head>


  5. 我的主題布景測試網頁 :
    這是我將官網下載 index.htm 測試網頁改裝成 PHP, 可以用下拉式選單切換主題 :
    http://mybidrobot.allalla.com/jquerytest/jqueryui_test_all.php (jQuery UI 1.10.2 已去除 base)
    這是在 PHP 檔一開頭先判斷有無傳出 theme, 沒有預設為 hot-sneaks :
    <?php
      if (is_null($_POST["theme"])) {$theme="hot-sneaks";}
      else {$theme=$_POST["theme"];}
    ?>

    再加上一個拉霸 :
    <form method=post action="jqueryui_test.php">
      <select name="theme" onchange="javascript:this.form.submit();">
        <option value="base"<? if($theme=="base") {echo " selected";}?>>base
        <option value="black-tie"<? if($theme=="black-tie") {echo " selected";}?>>black-tie
        <option value="blitzer"<? if($theme=="blitzer") {echo " selected";}?>>blitzer
        <option value="cupertino"<? if($theme=="cupertino") {echo " selected";}?>>cupertino
        <option value="dark-hive"<? if($theme=="dark-hive") {echo " selected";}?>>dark-hive
        <option value="dot-luv"<? if($theme=="dot-luv") {echo " selected";}?>>dot-luv
        <option value="eggplant"<? if($theme=="eggplant") {echo " selected";}?>>eggplant
        <option value="excite-bike"<? if($theme=="excite-bike") {echo " selected";}?>>excite-bike
        <option value="flick"<? if($theme=="flick") {echo " selected";}?>>flick
        <option value="hot-sneaks"<? if($theme=="hot-sneaks") {echo " selected";}?>>hot-sneaks
        <option value="humanity"<? if($theme=="humanity") {echo " selected";}?>>humanity
        <option value="le-frog"<? if($theme=="le-frog") {echo " selected";}?>>le-frog
        <option value="mint-choc"<? if($theme=="mint-choc") {echo " selected";}?>>mint-choc
        <option value="overcast"<? if($theme=="overcast") {echo " selected";}?>>overcast
        <option value="pepper-grinder"<? if($theme=="pepper-grinder") {echo " selected";}?>>pepper-grinder
        <option value="redmond"<? if($theme=="redmond") {echo " selected";}?>>redmond
        <option value="smoothness"<? if($theme=="smoothness") {echo " selected";}?>>smoothness
        <option value="south-street"<? if($theme=="south-street") {echo " selected";}?>>south-street
        <option value="start"<? if($theme=="start") {echo " selected";}?>>start
        <option value="sunny"<? if($theme=="sunny") {echo " selected";}?>>sunny
        <option value="swanky-purse"<? if($theme=="swanky-purse") {echo " selected";}?>>swanky-purse
        <option value="trontastic"<? if($theme=="trontastic") {echo " selected";}?>>trontastic
        <option value="ui-darkness"<? if($theme=="ui-darkness") {echo " selected";}?>>ui-darkness
        <option value="ui-lightness"<? if($theme=="ui-lightness") {echo " selected";}?>>ui-lightness
        <option value="vader"<? if($theme=="vader") {echo " selected";}?>>vader
      </select>
    </form>

    最後把官網的 index.htm 內容貼上即可.

沒有留言 :