好久沒整理 jQuery 筆記了, 到官網一看, 哇, 都已經升到 jQuery 1.9.1, 而 UI 也升到 1.10.1 版了. 順便更新一下筆記中的環境配置如下, 這是針對內部網站使用才需要, 外部網站可直接使用 Google 或 jQuery 官網的 CDN :
- 下載 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
- 將下載的 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).
- 製作 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>
- 從 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>
- 我的主題布景測試網頁 :
這是我將官網下載 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 內容貼上即可.
沒有留言:
張貼留言