Tag: jquery

jQuery data() treating string as number

Posted by – July 3, 2014

自從 HTML5 開始推廣將自定義參數以 data- 型式標記後,自然也習慣地用 jQuery 的 data() function 來取值。

直到今天碰到一個很奇妙的狀況才注意到 jQuery 會將 data() 取回的資料做轉型。

HTML 長這樣…

<div data-mobile-phone="0919123456"></div>

JS 長這樣…

alert($('div').data('mobile-phone'));

每次跳出來的視窗內容都是 919123456,顯然被當成 int 處理了。

Google 了一會才發現 jQuery 文件寫了一行....

To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

這沒熟讀文件還真的不知道,所以 JS 部份應改寫為...

alert($('div').attr('data-mobile-phone'));

才會得到正確的 0919123456。

Get the markup of an element, including itself using jQuery

Posted by – January 6, 2014

接手同事的 code,需要接續 AJAX 的資料對前端頁面進行更動。

假設一段 html code 如下:

<div id="container" class="wrapper">
 <div id="one">test 1 </div>
 <div id="two">test 2 </div>
 <div id="three">test 3 </div>
 <div id="four">test 4 </div>
</div>

以下 jQuery 語法可以其得其中的 html 元素:

$('#container').html();

不過卻不包含 <div id="container"> 本身,如果要取得包含自身的 html,應改為如下:

$('#container').get(0).outerHTML;

注意不論是取 $('.wrapper') 還是 $('#container') 都要用 get(0) 指定 DOM 元素。

Bookmark: Jcrop

Posted by – September 12, 2013

最近一個專案需求,要讓使用者可以在網站上選取照片、裁切,然後做為相簿封面。最重要的是前台讓使用者操作的畫面必須簡單好用,一樣是來自同事推薦的 jQuery 套件 Jcrop。可以簡單地呼叫出裁切畫面,設定與事件都很容易使用。

完成裁切後,呼叫 Jcrop 回傳座標,Ajax 傳回主機,接著我用 PHP image-moo 套件完成實際的影像處理,再把圖片回傳前端,使用者就能看到一張即時的封面圖片了,相當簡便。

Jcrop landing page

Bookmark: FitText.js

Posted by – September 4, 2013

FitText.js 可以根據 parent element 自動調整文字大小的 jQuery 套件。在開發網站時,常碰到標題文字過長的問題,但是標題不像內文可以被裁剪,比較合適的 solution 是折行或縮小字體,但是前者常會造成破版,而後者沒辦法用 CSS 直接處理。

懶得自己寫文字調整,就靠套件解決吧。

FitText.js

Bookmark: Knockout.js

Posted by – December 11, 2012

忘了是什麼時候知道有 Knockout.js 這玩意兒,當時沒用到,玩了一下 knockout.js 網站上的互動教學後只覺得很強大,然後就沒理它了。

前些時候在某個專案的後期有個需要整合許多資料的動態表單頁面。表單內容之多,又有許多互相連動的 <input> 元素,即使有 jQuery 加持也備感吃力,靈光一閃,好像有個 MVVM 的 js 實作.... 所以又回頭開始看起了 Knockout.js,不過這次有比較認真了解怎麼用 (笑)。

在專案 Git 上開了分支,導入 knockout.js。基本的使用蠻簡單的,實際開始寫撰寫相關的 MVVM 函式大概一天半就把主要的功能都完成了。之後再微調、增加次要功能等等,前後五天就把這個超難搞的表單頁面收拾乾淨,往結案邁進一大步。

jQuery: Check if Element is Visible or Hidden

Posted by – December 23, 2011

用 jQuery 編寫網頁效果時經常需要檢查網頁元素 (element) 的狀態,像是可見 ( visible ) 或是隱藏 ( hidden )。

常見的寫法是

if( $(element).css('display') == 'block' )

或是

 if( $(element).css('display') == 'hidden' )

不過我一直覺得這兩種寫法很累贅,又萬一元素的顯示狀態不是 block,而是 inline-block 或是別的呢?在翻閱 jQuery 文件時想到一個更便捷的用法,用 is 來檢查元素狀態即可。

$(element).is(":visible")

回傳值是 true or false,更方便。

if( $('#foo').is(':visible') ) {
    // it's not hidden, do something
}
else {
    // it's hidden so do something else
}

How to Convert String to Slug

Posted by – December 20, 2011

在這個 SEO 當道的年代,簡單易懂的現代網址已經是基本常識了。根據 W3C 的網址規定,合法字元僅有 A - Z, a - z, 0 - 9, -, ., _, ~, :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;  = ,而且橫線 ( - ) 之後都是有特別意義的保留字,所以過去常看到亂七八糟的亂碼網址,像是本文的標題不處理的話就變....

How%20to%40%20Convert%20String%20to%20Slug

雖然對電腦來說沒什麼差別,但是對人類來說卻是難以理解、難以記憶的無意義片段。 More

JavaScript: Convert Size In Bytes To Human Readable Format

Posted by – September 15, 2011

在程式中處理檔案的時候,時常碰到的就是檔案大小的顯示。在資料庫裡通常是以 bytes 為單位做紀錄,但是顯示到畫面上,看到 479247294213 bytes 這種天文數字任誰都很難理解它到底有多大。

將天文數字轉換成普通人能夠輕易閱讀的型式很重要,所以 bytes 在畫面上要轉成 MB 或 GB 這類的型式。KB、MB、GB 之間都是 2^10 = 1024 為一個級數,所以轉換原理只要用遞迴一直除以 1024,直到小於 1024 就轉換完了。

以下這個寫法稍微特殊一點,不過原理並沒有差太多,是在找資料的時候看到的,在此留個筆記。

<script>
$(function(){
	$('span').html(bytesToSize(479247294213));
});
function bytesToSize (bytes) {
	var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
	if (bytes == 0) return 'n/a';
	var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
	return ((i == 0)? (bytes / Math.pow(1024, i))
		: (bytes / Math.pow(1024, i)).toFixed(1)) + ' ' + sizes[i];
};
</script>

把剛剛的 479247294213 bytes 代入就會轉換成 446.3 GB,這樣就容易理解多了。

jQuery Validation plugin: How to Use Regex as Rule?

Posted by – September 2, 2011

在網頁程式中,表單的處理一直是很繁瑣的一環,client 端要用 Javascript 先對使用者的輸入進行初步過濾,資料送到了 server 端還是要再過濾一次。「永遠不要信任使用者輸入的資料」是表單程式的準則。

為了網站的安全不可少的 SOP,結果便是程式設計師要為此付出許多時間撰寫過濾程式。為了減緩程式設計師的腦細胞死亡速度,借助第三方程式的功能也是很重要的課題。在網頁前端常會用 jQuery Validation plugin 來對使用者輸入的資料進行前處理,這個套件內建一些基本規則,像是必填 (required)、電子郵件 (email)、網址 (url)、數字 (digits) 等等,但偶爾還是需要自訂特殊規則。

還好 jQuery 這個套件提供開放的接口可以自訂功能,透過簡單的幾行程式就能用正規表達式 (regular expression, regex) 來指定規則。

// 建立名為 'regex' 的自訂規則
$.validator.addMethod("regex", function(value, element, param) {
     // 強制加上 ^ 與 $ 符號限制整串文字都要符合
     return value.match(new RegExp("^" + param + "$"));
});

$("#myForm").validate({
    rules: {// 定義規則
        username : {
            required: true,
            regex   : "[A-Za-z0-9]+" // 寫法請參考 Regex
        },
        onlyUppercase: {
            required: true,
            regex   : "[A-Z]+"
        }
    },
    messages: {// 自定訊息
        username : {
            required: '必填',
            regex   : '只能使用英數字'
        },
        onlyUppercase : {
            required: '必填',
            regex   : '只能使用大寫英文字母'
        }
    }
});

如此一來便能自行撰寫 regex 來設定各種進階規則以及提示文字了,即使是有多組規則也沒問題。

關於正規表達式的使用方法,請參考 石頭閒語: Regular Expression (RegExp) in JavaScript