tw_zipcode
在網頁建立多組 3 碼台灣郵遞區號表單元素的 jQuery Plugin ─ 讀取快速、不需使用資料庫。
安裝/Installation
將此 gem 加入到 Gemfile:
gem 'tw_zipcode'
安裝:
$ bundle
或是可以安裝到電腦內:
$ gem install tw_zipcode
使用說明/Usage
把以下這行加入到application.js:
//= require tw_zipcodeExample
預設：
<!-- HTML -->
<div id="twzipcode"></div>/* Javascript */
$('#twzipcode').twzipcode();自訂樣式：
/* CSS */
.zipcode {
background-color: #c00;
color: #fff;
}
.county {
background-color: #4169E1;
color: #fff;
}
.district {
background-color: #008000;
color: #fff;
}/* Javascript */
$('#twzipcode').twzipcode({
// 依序套用至縣市、鄉鎮市區及郵遞區號框
'css': ['county', 'district', 'zipcode']
});裡面設定countyName, districtName, zipcodeName 可以配合自己的 model 跟 form_for helper。有時間看能不能把這些 javascripts 的設定改成用 helper 來使用。
參數
| 名稱 | 類型 | 預設 | 說明 |
|---|---|---|---|
| countyName | string | county | 指定縣市下拉清單的表單名稱。 |
| countySel | string | 縣市預設值 | |
| css | Array | 表單元件樣式名稱。格式: ['縣市', '鄉鎮市區', '郵遞區號'] | |
| detect | boolean | false | 是否偵測用戶位置（此功能提供的數據僅供參考） |
| districtName | string | district | 指定鄉鎮市區下拉清單的表單名稱。 |
| districtSel | string | 鄉鎮市區預設值 | |
| onCountySelect | Function | 綁定縣市選單 Change 事件。 | |
| onDistrictSelect | Function | 綁定鄉鎮市區選單 Change 事件。 | |
| onZipcodeKeyUp | Function | 綁定郵遞區號輸入框 keyUp 事件（readonly 必須為 false）。 | |
| readonly | boolean | true | 郵遞區號輸入框是否唯讀？ |
| zipcodeName | string | zipcode | 指定郵遞區號輸入框的表單名稱。 |
| zipcodeSel | string | 郵遞區號預設值 | |
| zipcodeIntoDistrict | boolean | false | 隱藏郵遞區號輸入框，並顯示於鄉鎮市區清單內。 |
方法
| 名稱 | 說明 |
|---|---|
| var foo = $(selector).twzipcode('data'); | 取得已選取縣市的郵遞區號 JSON 物件。 |
| var foo = $(selector).twzipcode('serialize'); | 取得 Query String。 |
| $(selector).twzipcode('reset'); | 重置清單。 |
| $(selector).twzipcode('destroy'); | 移除 TWzipcode plugin。 |
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request