嘗試要複製一個表格列，裡頭有輸入日期的 input，想把它的資料清掉，讓使用者能輸入多筆資料。
在 "How to clone jQuery Datepicker input field" 這篇找到解答。
var row = $($("table > tbody tr")[0]).clone(); // 複製資料列（資料列內包含輸入框）
$(row).find("input").val("").end(); // 清空值
// 要移除 datepicker 自動產生的 hasDatepicker css class，以及自動產生的 ID
// 不移除 css class，datepicker 會完全不運作
// 不移除 id，點了新增列的 datepicker，值會被帶進原來的那個 input 裡
$(row).find("input").removeClass("hasDatepicker").removeAttr("id").datepicker({
minDate : new Date(2009, 1 - 1, 1),
changeMonth: true,
changeYear: true,
dateFormat: 'yy/mm/dd'
}).end();
$('table > tbody:last').append(row); // 把處理好的資料列新增到表格裡，做為最後一列
小攻城師 發表在 痞客邦 留言(13) 人氣(1,666)
因為有一個頁面要設定大量的 Google Map 地圖標記 (marker)，覺得標記一多看起來好混亂，記得好像有很多網站可以把它 Google Map 的地圖標記群組起來，但是一開始找不到。問了其他人才知道，這個地圖標記群組叫做「地圖標記叢集」(marker cluster)。
有人推薦 jQuery plugin "tinyMap"，身為一個懶人，有 jQuery plugin 當然是直接撈來用，但可能是天意註定要我勤快一點看原始文件，我怎麼用都用不起來。 XD
最以後來參考了官方 API 的介紹文："Too Many Markers!"，這樣子完成了我該做的事：
小攻城師 發表在 痞客邦 留言(0) 人氣(10,716)
覺得使用兩個下拉選單選取年份與月份有點累人，試著找一下有沒有適合的 month-year select calendar。
Month Picker
Project: http://blog.yctin.com/archives/jquery-plugins-monthpicker/
DEMO: http://project.yctin.com/monthpicker/demo/
是以橫列的形態呈現的月份選擇工具。
jq-monthpicker
http://code.google.com/p/jq-monthpicker/
把十二個月份排成 3*4 的矩陣，可以使用左右鍵來調整年份，再從矩陣中挑出對應的月份。（我後來就是選這套）
小攻城師 發表在 痞客邦 留言(0) 人氣(6,247)
想要使用 jQuery UI 的 button widget，firebug 裡卻顯示這樣的錯誤訊息：
TypeError: $(".button").button is not a function
本來以為是沒有引用 jquery.js 或是 jquery-ui.js，
但看了網站的下載狀態，這兩支 js 都有順利載入；
也有人說可能是 jQuery UI 和 jQuery core 的版本搭不起來，
但我看了兩支檔案的版本，明明就是官網上湊一對的組合咩。
小攻城師 發表在 痞客邦 留言(0) 人氣(2,425)
幫忙寫了一支小程式，因為對方懶得整合所以挖了一個 iframe 給我。這下有點困擾，thickbox 點下去會直接在 iframe 的正中央顯示出來，凍結視窗的效果 (modal) 也只在 iframe 裡面作用。照著《ThickBox 插件在 iframe中使用》依樣畫葫蘆做設定：
1. 先到 jQuery 官網下載 jQuery core、到 ThickBox 官網下載 ThickBox 3.1（因為等一下要修改原始碼，這邊下載未壓縮版本以便之後修改），放到專案資料夾裡。
小攻城師 發表在 痞客邦 留言(0) 人氣(2,378)
今天在 jQuery UI 網站上挑佈景主題 (theme)，發現右上角冒出一則小訊息，寫著 "New! Bring ThemeRoller into any page: Get the ThemeRoller Firefox Bookmarklet!" (在任意頁面使用 ThemeRoller: 取得 ThemeRoller Firefox 書籤小工具)。
加入的方式很簡單，準備一個 FireFox，打開 jQuery UI ThemeRoller，滑鼠左鍵拉著 "ThemeRoller Dev Tool" 這行，拖到書籤工具列上，就大功告成囉。
有了這個書籤小工具以後，遇到每一個有使用 jQuery UI widget 的頁面，都可以點一下這個書籤小工具。譬如說，在 jQuery UI 中文站，我們想試一下它首頁的 tab 換掉 theme 的效果。
原本的是淺藍色的，點了書籤小工具以後右邊會出現一個可拖曳的 ThemeRoller 工具：
切到 Gallery 套用不同的 theme 試試看，我選了 Trontastic，馬上就套用進來囉。
不過用這個工具的時候感覺網路要很流暢哩，因為它是會回到 jQuery UI 去取檔案回來套用的，我今天網路不太順，感覺在切換 theme 的時候就卡卡的。但至少有了這工具，切換 theme 可以一點就靈，以後就不必自己辛苦的一個個下載回來、逐一更換測試效果囉。
小攻城師 發表在 痞客邦 留言(0) 人氣(1,528)
今天為了做個選單，於是打算把 jQuery 放在 MasterPage 裡。如果網頁 (*.aspx) 和 MasterPage 放在同一層還 OK，但若程式和 MasterPage 分處不同的資料夾，就會因為相對路徑的問題而造成無法讀取 jQuery core 與 CSS。
嘗試做了幾個試驗，譬如說寫成這樣：
<link type="text/css" href='<%=ResolveUrl("~/jquery/theme/ui.all.css") %>' rel="Stylesheet" />
或是這樣：
<link type="text/css" href="<%=Request.ApplicationPath()%>/jquery/theme/ui.all.css" rel="Stylesheet" />
這些方法都沒有用，不管我有沒有在 <head> 加上 runat="server"。前者會直接把整個單引號內的內容印出來，後者會出現「無法修改 Controls 集合，因為控制項包含程式碼區塊 (例如 <% ... %>)。」，都不是我要的結果啊。
最後在 Google 上找到這篇："Moving jQuery File Reference to ASP.NET MasterPage"，原來要先增加一個 ContentPlaceHolder。對方的範例是 for C# 的，像我用 VB 就是這樣做。
1. 在 MasterPage 的 *.master 檔裡，<head> 加上 runat="server" 屬性，並增加一個 ContentPlaceHolder。
小攻城師 發表在 痞客邦 留言(9) 人氣(9,127)
學了一下 jQuery 就躍躍欲試的把它用在目前的系統裡。系統是 ASP.net 開發的，有一個功能是使用者變更密碼，當使用者輸入密碼時要檢查使用者密碼強度。不過問題出現了，按下了「確定修改」的按鈕後，postback 回到原頁面後，以下這段檢查密碼的 jQuery 就不肯動了。
jQuery(document).ready(function() {
$j('#txt_NewPass').keyup(function(){
$j('#result').html(passwordStrength($j('#txt_NewPass').val(),$j('#txt_OldPass').val()));
}
);
});
小攻城師 發表在 痞客邦 留言(1) 人氣(4,312)
jQuery 是一個已經廣為使用的 JavaScript 函式庫，目前已經獲得微軟與 Nokia 青睞，即將被納入這兩家廠商的產品中。觀望了很久，今天是第一天玩 jQuery，記錄一下操作的過程。
首先準備一個簡單的測試頁面。它分成三個部分：HTML、CSS、JavaScript。你可以把以下的原始碼複製貼上到記事本，注意要儲存相對應的副檔名。
test.html
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>jQuery 小測試</title>
<link rel="stylesheet" href="fannys23.css" type="text/css" />
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="fannys23.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h1>jQuery 小測試</h1>
<div class="content" id="author">by fannys23</div>
<div class="content" id="textfield"></div>
<div class="content" id="jQueryTest"><p class="neat">從 jQuery 官網首頁的 "Learn JQUERY Now!" 取得的語法測試。</p></div>
</div>
</body>
</html>
小攻城師 發表在 痞客邦 留言(0) 人氣(4,045)
文書處理 (5)