Bower install 可用來安裝 bower 的 package 以及其依類的套件。 使用方式如下： bower install bower install <package> bower install <package>#<version> bower install 會依據 bower.json 的設定下去安裝 bower 套件。 如果指定安裝 bower 套件，可以直接在 bower install 後接上 bower 套件的名稱。像是要安裝 jQuery，我們就可以下 bower install jquery。 {% img /images/posts/BowerInstall/1.png %} {% img /images/posts/BowerInstall/2.png %} 如果要安裝特定版本的 bower 套件，就是在 bower install 後接上 bower 套件名稱，再用 # 串接 bower 套件的版本。像是 bower install jquery#2.2.0。 如果想在安裝時一併寫入 bower.json 檔，可加帶 –save。

Bower search 可用來搜尋 bower 的 package。 使用方式如下： bower search <package> 像是要搜尋 jQuery 的 package，就可以下 bower search jquery。 {% img /images/posts/BowerSearch/1.png %}

Bower init 可用來建立 bower.json 檔。 只要呼叫 bower init，然後依序填寫詢問的問題即可： {% img /images/posts/BowerInit/1.png %} 填完後即會在當前目錄產生對應的 bower.json 檔。 {% img /images/posts/BowerInit/2.png %}

Bower help command 可以用來查詢 bower 的命令。 使用方式如下： bower help bower help <command> 如果要查閱整個 Bower 有哪些命令可以使用，可直接叫用 bower help。 {% img /images/posts/BowerHelpCommand/1.png %} 如果要查閱 Bower 的某個命令用法，像是 install 命令，可叫用 bower help install。 {% img /images/posts/BowerHelpCommand/2.png %}

Bower 依賴於 Node.js 與 Git，安裝 Bower 需透過 Node.js 內的 npm，只要透過下列 npm 命令安裝即可： npm install -g bower {% img /images/posts/InstallBower/1.png %} 而 Bower 套件的安裝與使用會用到 Git，所以記得也要將之安裝。 如果是 Ubuntu 用戶，可以透過下列命令將整個環境安裝起來： sudo apt-get purge nodejs npm sudo apt-get update sudo apt-get install -y python-software-properties python g++ make sudo add-apt-repository ppa:chris-lea/node.js sudo apt-get update sudo apt-get install -y nodejs sudo apt-get install -y git sudo npm install -g bower

要使用 JQuery UI 的 Spinner Widget，首先必須引用 JQuery、JQueryUI。 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> 接著在畫面上放入一個 input element。 <input id="spinner"> 在 Javascript 中用 JQuery 找到該 input element，並叫用 spinner 方法即可將該 input element 設為 spinner。 $(function() { $("#spinner").spinner(); }); {% img /images/posts/JQueryUISpinner/1.png %} 若要做些細部設定，spinner 有提供些 options 可供我們使用，像是 min 可以設定 spinner 的最小值，max 可以設定 spinner 的最大值，step 可以設定 spinner 按一次要增加多少值。 $(function() { $("#spinner").spinner( { min:0, max:100, step:10 }); }); 若要主動觸發 spinner，也提供了些 methods 讓我們使用，像是 value。

要使用 JQuery UI 的 Progressbar Widget，首先必須引用 JQuery、JQueryUI。 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> 接著在畫面上放入一個 div element。 <div id="pb"> </div> 在 Javascript 中用 JQuery 找到該 div element，並叫用 progressbar 方法即可將該 div element 設為 progressbar。 $(function() { $("#pb").progressbar(); }); {% img /images/posts/JQueryUIProgressbar/1.png %} 若要做些細部設定，progressbar 有提供些 options 可供我們使用，像是 max 可以設定 progressbar 的最大值、value 可設定 progressbar 的當前值。 $(function() { $("#pb").progressbar( { max:100, value:50 }); }); {% img /images/posts/JQueryUIProgressbar/2.png %} 若要主動觸發 progressbar，也提供了些 methods 讓我們使用，像是 value。

要使用 JQuery UI 的 Dialog Widget，首先必須引用 JQuery、JQueryUI。 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> 接著在畫面上放入一個 div element。 <div id="dialog"> Hello World </div> 在 Javascript 中用 JQuery 找到該 div element，並叫用 dialog 方法即可將該 div element 設為 Dialog。 $(function() { $("#dialog").dialog(); }); {% img /images/posts/JQueryUIDialog/1.png %} 若要做些細部設定，Dialog 有提供些 options 可供我們使用，像是 resizable 可以讓 dialog 進行手動縮放、buttons 可設定 dialog 的按鈕。 $(function() { $("#dialog").dialog( { resizable: true, buttons: { OK: function() { $( this ).

要使用 JQuery UI 的 Datepicker Widget，首先必須引用 JQuery、JQueryUI。 <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="jqueryui/style.css"> 接著在畫面上放入一個 input element。 <p>Date：<input type="text" id="datepicker"></p> 在 Javascript 中用 JQuery 找到該 input element，並叫用 datapicker 方法即可將該 input element 設為 Datepicker。 $(function() { $("#datepicker").datepicker(); }); {% img /images/posts/JQueryUIDatepicker/1.png %} 若要做些細部設定，Datepicker 有提供些 options 可供我們使用，像是 minDate、maxDate 可以用來決定可供選取的時間範圍，onSelect 方法可以設定日期選取後的動作。 $(function() { $("#datepicker").datepicker( { minDate: -7, maxDate: +7, onSelect: function(date) { alert(date); } }); }); {% img /images/posts/JQueryUIDatepicker/2.png %}

條款二十五，避免使用 LONG 與 LONG RAW 型態。 LONG 與 LONG RAW 型態已經過時，留著只是為了向前相容，不建議拿來使用，應考慮用 NCLOB、BLOB、BFILE 去替。