由於在這個範例，我們利用 jQuery 來呼叫遠端程式，所以我需要把 form 中的 method 和 action 移除，移除後的 form如下：
<form class="form-horizontal" role="form">
2015年5月14日 星期四
jQuery + Boostrap：第二個範例
在第一個範例中，我們利用傳統的 client-server 的呼叫方式，輸入必須的資料後，在遠端程式執行完後，把結果顯示在一個新的網頁上。在第二個範例，我們把第一個範例進行更改，並在使用者輸入資料後，直接把結果顯示在同一個網頁上，有興趣的讀者可以先到 demo 網頁 先試用一下，代碼可以輸入 111111 或者 999999 看看執行結果。
由於在這個範例，我們利用 jQuery 來呼叫遠端程式，所以我需要把 form 中的 method 和 action 移除，移除後的 form如下：
由於在這個範例，我們利用 jQuery 來呼叫遠端程式，所以我需要把 form 中的 method 和 action 移除，移除後的 form如下：
2015年5月13日 星期三
jQuery + Bootstrap: 第一個範例
我自己幫自己在學校的網站上維護一個網頁，其中包含一個間單的學生成績查詢的功能。最近由於行動設備的興起，我也想把這個網頁重新設計成符合 Responsive Web Design 的風格，以便於寫一次，各種設備都能用；況且這個網頁的設計，已經是二十幾年前的概念的，找時間慢慢修改或許也不錯，因此我們的範例就是這個簡單的成績查詢功能。
由於 Boostrap 主要是介面，而 jQuery 是動作，第一個動作當然是設計一個畫面。我實在對於美工設計不怎麼樣，假設我要設計的畫面如下：
由於 Boostrap 主要是介面，而 jQuery 是動作，第一個動作當然是設計一個畫面。我實在對於美工設計不怎麼樣，假設我要設計的畫面如下：
2015年5月1日 星期五
jQuery + Bootstrap：Bootstrap 的安裝
在行動裝置（如手機、平板等）盛行的一開始，我首先注意到的是 jQuery Mobile 的解決方式，但是同時“它”也讓我猶豫是否要全力投入，猶豫的原因就是系統開發人員必須要開法兩套以上的介面以符合多種設備，這真是痛苦到了極點。
在學習 jQuery Mobile 的同時也注意到了一種新概念的興起，那就是 Responsive Web Design，這個概念基本上就是我前一段所說的，設計得好，寫一套程式就可以符合多種常見設備的介面。既然這個概念這麼好，馬上就有許多開發者投入並設計出相關的 framework（或者把它想成程式庫也可以）。Google 了一下，推薦的名單中出現了 Bootstrap，查了一下相關文件以及討論，看起來資料不少，那麼就開始試試看了。
Bootstrap 的安裝，其實是不需要安裝的。雖然我們可以把檔案下載下來，但是也可以直接使用放在網路上的版本，由於我們只是練習，所以就不安裝了。在這裡，所謂的安裝，指的是把一個支援 Boostrap 的網頁給建構出來，而這個 template 如下所示：
在學習 jQuery Mobile 的同時也注意到了一種新概念的興起，那就是 Responsive Web Design，這個概念基本上就是我前一段所說的，設計得好，寫一套程式就可以符合多種常見設備的介面。既然這個概念這麼好，馬上就有許多開發者投入並設計出相關的 framework（或者把它想成程式庫也可以）。Google 了一下，推薦的名單中出現了 Bootstrap，查了一下相關文件以及討論，看起來資料不少，那麼就開始試試看了。
Bootstrap 的安裝，其實是不需要安裝的。雖然我們可以把檔案下載下來，但是也可以直接使用放在網路上的版本，由於我們只是練習，所以就不安裝了。在這裡，所謂的安裝，指的是把一個支援 Boostrap 的網頁給建構出來，而這個 template 如下所示：
<!DOCTYPE html>
<html lang="Big5">
<head>
<meta charset="Big5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="Big5">
<head>
<meta charset="Big5">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
訂閱：
文章 (Atom)