Tag for jquery
tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件
Posted by essoduke - 2009 年 10 月 29 日 20:53:04 - 444 User Views這個擴充套件可以輕鬆建立自訂的 Google Map，舉凡尺寸、地圖類型和縮放控制、縮放等級，更能加入設定好的標記地點並填上說明。
下載位址
- Origin: jquery.tinymap-1.0.js (4.10 KB)
- Packed: jquery.tinymap-1.0.min.js (2.76 KB)
安裝
- <!-- Include Google Map API -->
- <script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<em>YOUR_API_KEY"></script>
- <script type="text/javascript" src="jquery.tinymap-1.0.js"></script>
參數說明
- width: 地圖寬度 (Number) /* 預設：640px */
- height: 地圖高度 (Number) /* 預設：480px */
- latlng: 地圖置中的座標或地址，若為座標請使用 [x, y]，地址則直接輸入。
- control: 顯示地圖類型選單 (Boolean) /* 預設：true */
- zoom: 顯示地圖縮放選單 (Boolean) /* 預設：true */
- zoomLevel: 預設地圖縮放等級 (Number) /* 預設：13 */
- mapType: 預設地圖類型 (String) /* 選項：default, hybrid（混合）, satellite（衛星） 預設：default */
- marker: 標記群組 (JSON)：
[{addr:'標記地址或座標', text:'標記說明', icon:[圖示寬度, 圖示高度, 圖示位址]}]
範例：顯示高雄市政府地圖
- $(function(){
- var set1 = {
- width: 639,
- height: 359,
- latlng: '高雄市苓雅區四維三路2號',
- zoomLevel: 1˙
- };
- $('#map1').tinymap( set1 );
- });
範例：以衛星地圖及自訂圖示標示多個地點
- $(function(){
- var set1 = {
- width: 639,
- height: 359,
- latlng: [22.638610116646756, 120.30184864997864],
- mapType: 'satellite',
- zoomLevel: 12,
- marker: [
- {addr:'高雄市鼓山區萬壽路350號', text:'<strong>壽山動物園</strong><br />高雄市鼓山區萬壽路 350 號', icon:[24, 24, '2.png']},
- {addr:'高雄市左營區翠華路1435號', text:'<strong>蓮池潭</strong><br />高雄市左營區翠華路 1435 號', icon:[24, 24, '3.png']},
- {addr:'高雄市苓雅區自強三路5號', text:'<strong>東帝士 85 大樓</strong><br />高雄市苓雅區自強三路 5 號', icon:[24, 24, '4.png']},
- {addr:'高雄市左營區高鐵路105號', text:'<strong>台灣高鐵左營站</strong><br />高雄市左營區高鐵路 105 號', icon:[24, 24, '5.png']},
- {addr:'高雄市三民區建國二路318號', text:'<strong>台鐵高雄車站</strong><br />高雄市三民區建國二路 318 號<br /><a href="http://service.tra.gov.tw/Kaohsiung/StationTimeTable/index.aspx">台鐵高雄車站</a>', icon:[24, 24, '6.png']}
- ]
- };
- $('#map1').tinymap( set1 );
- });
更多範例請參考：tinyMap – 自訂個人 Google Map 的 jQuery 擴充套件
jQuery 台灣郵遞區號外掛 v1.1 update
Posted by essoduke - 2009 年 10 月 29 日 20:05:20 - 371 User Views這次更新主要是改寫了原有的結構變得更簡潔、效能更好，並修改下列幾項：
- 可不需先建立 HTML 表單，由程式直接產生並直接指定表單元件名稱。
- 加入 Css 的支援
參數說明
- countyName: 指定縣市下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_county[] */
- areaName: 指定鄉鎮市區下拉清單名稱 (String) /* 若不指定則預設名稱為 zip_area[] */
- zipName: 指定郵遞區號輸入框名稱 (String) /* 若不指定則預設名稱為 zip_code[] */
- countySel: 縣市預設值 (String)
- areaSel: 鄉鎮市區預設值 (String)
- css: ['County ClassName', 'Area ClassName', 'Zip ClassName'] (Array)
自訂元件名稱範例
- // Javascript
- $('#container').twzipcode({
- countyName: 'county',
- areaName: 'area',
- zipName: 'zip'
- });
- // HTML
- <div id="container"></div>
完整範例請參考：jQuery 台灣郵遞區號外掛
JSONP 實做：使用 Google Ajax Search
Posted by essoduke - 2009 年 07 月 14 日 20:19:27 - 536 User Views範例網頁：JSONP 實做：使用 Google Ajax Search
※ 詭異的是，我使用 $.get 都只能收到 400 Bad Request，只能用 $.ajax 才能正常。
- $.ajax({
- url: 'http://ajax.googleapis.com/ajax/services/search/web',
- data:{
- 'key': gsearch.key,
- 'v': '1.0',
- 'q': encodeURIComponent(k), // + '+site:essoduke.org' 搜尋網站,
- 'rsz': 'large',
- 'hl': 'zh-TW',
- 'start': s
- },
- dataType: 'jsonp',
- success: gsearch.fetch
- });
參考資料：
- 開發人員指南 – Google AJAX 搜尋 API – Google Code
- 基礎搜尋物件 – Google AJAX Search API – Google Code
- What is JSONP? – remy sharp’s b:log
Windows Media Player for Web
Posted by essoduke - 2009 年 07 月 03 日 20:15:31 - 261 User Views※剛剛發現我的 Firefox 不能正常運作，大概是 Plugin 的關係。
http://app.essoduke.org/mplayer
Feature / 特色
- 相容 IE/Firefox 瀏覽器
- 使用 JSON 格式媒體列表
- 可顯示媒體名稱、時間軸、已播放/媒體時間
- 可音量控制、重複播放、拖曳播放清單
Defect / 缺點
- Opera / Safari 無法正常使用
- 未加入隨機播放功能
Point / 重點摘要
- 雖然已經有了支援各瀏覽器的播放語法，不過我還是針對了非 IE 瀏覽器建立 embed 標籤。
- 播放器使用 Javascript 產生，並且將所有事件都寫成物件化，整個播放器就是一個物件。
- 時間軸採用 setInterval 的方式每秒查詢目前的播放時間，換曲時要用 clearInterval 不然久了 IE 會當掉… XD
- Firefox 監控 PlayStateChange 事件要使用 OnDSPlayStateChangeEvt function。
- 播放清單要雙擊左鍵才會換曲！
- 大概就醬了
[jQuery] 自動替表單元素加入 label for 屬性
Posted by essoduke - 2009 年 06 月 02 日 20:26:57 - 526 User Views通常在設計網頁時如果有包含表單元素，大多會使用 Label 標籤來定義說明，但是每個表單元素和 Label 標籤都要加上 id 和 for 屬性顯得有點麻煩。
所以下列函式就是用來替這些元素自動補上 for 和 id 屬性。
範例：http://beboss.idv.tw/autolabel.php
目前只抓取 label 前後的表單元素，若 label 和 表單元素之間有其他標籤則無作用，交給大家去解決吧 XD
- $(function(){ AutoLabel(); });
- var AutoLabel = function(){
- $('label').each(function(n){
- //get the next object
- var $obj = $(this).next();
- //append id and for attributes into elements
- switch( $obj.attr('type') ){
- case 'text': case 'password': case 'radio': case 'checkbox':
- $(this).attr('for', 'label' + n);
- $obj.attr('id', 'label' + n);
- break;
- }
- //in especial for textarea and select element
- if(typeof($obj.get(0)) != 'undefined'){
- switch($obj.get(0).tagName.toLowerCase()){
- case 'textarea': case 'select':
- $(this).attr('for', 'label' + n);
- $obj.attr('id', 'label' + n);
- break;
- }
- }
- //same as above;
- var $obj = $(this).prev(); //get the previous object
- switch( $obj.attr('type') ){
- case 'text': case 'password': case 'radio': case 'checkbox':
- $(this).attr('for', 'label' + n);
- $obj.attr('id', 'label' + n);
- break;
- }
- if(typeof($obj.get(0)) != 'undefined'){
- switch($obj.get(0).tagName.toLowerCase()){
- case 'textarea': case 'select':
- $(this).attr('for', 'label' + n);
- $obj.attr('id', 'label' + n);
- break;
- }
- }
- });
- }
近期文章
Available Feeds
Search
Powered by WordPress with GimpStyle Theme design by Horacio Bella.
Entries and comments feeds.
Valid XHTML and CSS.