[教材] Javascript garden

非常佛心的javascript教學
http://bonsaiden.github.com/JavaScript-Garden/zhtw/

[jQuery plugin] 通知訊息外掛測試

今天試了二個有關訊息通知的外掛，分別是noty跟notify


http://needim.github.com/noty/ (還是github上2012的前十名 :D)
noty的功能比較強大，不過你要怎麼客制化訊息的位置都非常方便。
此外還有queue的功能。

http://redeyeoperations.com/plugins/Notify/
Notify相較之下就比較簡便了，訊息只能秀在最上方，
也沒有queue的功能，如果你有訊息可能會一直出現時，
原本的區塊就會被取代了。

[Eclipse] 搜尋取代大量字串

今天需要將一個東西重新命名一下，但整個專案很多地方有引用，需要一個快速取代的方法。
記錄一下eclipse的操作xd，


1.先搜尋要取代的字，指定搜尋範圍

2.接著在搜尋的結果集按右鍵，就可以看到replace all嚕

[Eclipse] 打開行號

筆記XD

[jQuery] 如何觸發超連結click動作

今天在模擬使用File API下載檔案，需要一個觸發超連結引發下載的動作，筆記一下。

//dom api
document.getElementById('dllink').click(); 
//jquery api
$("#dllink")[0].click();

[Java] Java Javascript/CSS Asset pipeline

將js有效的模組化具有許多維護上的好處，但缺點但js模組多的時候，頁面載入的時間也就愈長，雖然能在產品前將所有的js打包成一份(用linux指令)，但感覺流程上並不適用目前的專案。

目前找到pack-tag這個開源軟體，試用過後感覺非常試合導入專案中，不會影響目前Developer的開發，只需替換掉原本的script標籤，並支援javascript minify。

pack-tag

A JSP Taglib for delivering minified, combined and gzip-compressed resources (JavaScript and CSS).

https://github.com/galan/packtag

[jQuery plugin] 不透過submit觸發jquery validation驗證

jquery validation真是不可或缺的好物，每次用往往有很多用法都會忘記。
趁熱筆記一下。
如果想要不透過submit來觸發驗證的話，可以透過.valid()這個方法。
除了整個form全部驗證之外，也可驗證表單內某一要驗證的元件

$("#myform").validate();
$("a.check").click(function() {
    alert("Valid: " + $("#myform").valid());
    return false;
});

Reference: How do I use jQuery Validate directly, without the submit button?

自動化測試工具

排名前十名的測試工具，僅供參考。

[jQuery API] 偵測關閉網頁使用者點選ok或cancel

為了避免使用者在網頁處理中關閉網頁的話，可以綁定onbeforeunload事件來偵測，
但更進一步的應用，可能需要了解使用者到底是按ok還是cancel!!
找到以下這篇所用到的解法，有需要的人可以參考看看。

Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
The code within the first setTimeout method has a delay of 1ms. This is just to add the function into the UI queue. Since setTimeout runs asynchronously the Javascript interpreter will continue by directly calling thereturn statement, which in turn triggers the browsers modal dialog. This will block the UI queue and the code from the first setTimeout is not executed, until the modal is closed. If the user pressed cancel, it will trigger another setTimeout which fires in about one second. If the user confirmed with ok, the user will redirect and the second setTimeout is never fired.

$(function(){ 
 
 $(window).bind("beforeunload", function(e) {
  setTimeout(function() {
  
            setTimeout(function() {
                $("body").css('background-color', 'red').html("User click cancel button");
            }, 1000);
        },1);
        return 'are you sure';
 });
 
 //按ok處理
 $(window).unload( function () { 
  console.log('bye bye :)');
  
 } );
 
});

[Java] Regex驗證不符合的windows檔案名稱

威猛的範例，參考stackoverfolw這篇討論:
 http://stackoverflow.com/questions/6730009/validate-a-file-name-on-windows

public static boolean isValidName(String text)
{
    Pattern pattern = Pattern.compile(
        "# Match a valid Windows filename (unspecified file system).          \n" +
        "^                                # Anchor to start of string.        \n" +
        "(?!                              # Assert filename is not: CON, PRN, \n" +
        "  (?:                            # AUX, NUL, COM1, COM2, COM3, COM4, \n" +
        "    CON|PRN|AUX|NUL|             # COM5, COM6, COM7, COM8, COM9,     \n" +
        "    COM[1-9]|LPT[1-9]            # LPT1, LPT2, LPT3, LPT4, LPT5,     \n" +
        "  )                              # LPT6, LPT7, LPT8, and LPT9...     \n" +
        "  (?:\\.[^.]*)?                  # followed by optional extension    \n" +
        "  $                              # and end of string                 \n" +
        ")                                # End negative lookahead assertion. \n" +
        "[^<>:\"/\\\\|?*\\x00-\\x1F]*     # Zero or more valid filename chars.\n" +
        "[^<>:\"/\\\\|?*\\x00-\\x1F\\ .]  # Last char is not a space or dot.  \n" +
        "$                                # Anchor to end of string.            ", 
        Pattern.CASE_INSENSITIVE | Pattern.UNICODE_CASE | Pattern.COMMENTS);
    Matcher matcher = pattern.matcher(text);
    boolean isMatch = matcher.matches();
    return isMatch;
}

[jQuery plugin] Clearable textbox

想要提供使用者方便清空textbox的plugin嗎
找到一個符合這個需求的clear textbox plugin

http://viralpatel.net/blogs/clearable-textbox-jquery/

Demo site:
http://viralpatel.net/blogs/demo/jquery/clearable-textboxes/

[Javascript] Date.parse在safari NaN解決方法

最近在Safari使用Date.parse的NaN問題，不過以下這個解法，少算了時分秒。

The behavior of the Date.parse method is implementation dependent, on ECMAScript 5, this method can parse ISO8601 formatted dates, but I would recommend you to make the parsing manually.

Some time ago I've made a simple function, that can handle a format specifier argument:

function parseDate(input, format) {
  format = format || 'yyyy-mm-dd'; // default format
  var parts = input.match(/(\d+)/g), 
      i = 0, fmt = {};
  // extract date-part indexes from the format
  format.replace(/(yyyy|dd|mm)/g, function(part) { fmt[part] = i++; });

  return new Date(parts[fmt['yyyy']], parts[fmt['mm']]-1, parts[fmt['dd']]);
}

parseDate('06.21.2010', 'mm.dd.yyyy');
parseDate('21.06.2010', 'dd.mm.yyyy');
parseDate('2010/06/21', 'yyyy/mm/dd');
parseDate('2010-06-21');

Also you could detect the ECMAScript 5 behavior to parse ISO formatted dates, you can check if theDate.prototype.toISOString is available, e.g.:

if (typeof Date.prototype.toISOString == "function") {
  // ES5 ISO date parsing available
}