先到 jQuery 官網下載 jQuery UI 這裡 ，並解壓縮到存放網頁的資料夾中。
Step 2.
基本架構
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<link href="css/ui-lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" />
</head>
<body>
【第三步驟的程式碼放這裡】
</body>
</html>
Step 3.
產生一個 jquery UI 的 button
<span id="span_button">My Button</span>
<script>
$('#span_button').button();
</script> 這樣就完成了，是不是很簡單啊。說明：
官網下載下來的zip檔，裡面有很多檔案，你只要了解三個東西就好了：
(1) js 資料夾中的 jquery-1.9.1.js ，這是 jquery 的主檔。
(2) js 資料夾中的 jquery-ui-1.10.2.custom.min.js ，這是 jquery UI 的主檔。
(3) css/ui-lightness 資料夾中的 jquery-ui-1.10.2.custom.min.css ，這是 jquery UI 的 CSS 主檔。
※步驟一下載檔案時，可以選設計主題( Theme )，如果想用不同的 Theme ，只要更改 css 的路徑即可，例如： <link href="css/dark-hive/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" />，當然你必須先把那個 Theme 下載下來。
注意：因為版本會一直更新的關係，請自行調整程式碼中引入檔案的版本數字
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<link href="css/ui-lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" />
No comments:
Post a Comment