Tag: jquery
-
jQuery data() treating string as number
自從 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
接手同事的 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
最近一個專案需求，要讓使用者可以在網站上選取照片、裁切，然後做為相簿封面。最重要的是前台讓使用者操作的畫面必須簡單好用，一樣是來自同事推薦的 jQuery 套件 Jcrop。可以簡單地呼叫出裁切畫面，設定與事件都很容易使用。 完成裁切後，呼叫 Jcrop 回傳座標，Ajax 傳回主機，接著我用 PHP image-moo 套件完成實際的影像處理，再把圖片回傳前端，使用者就能看到一張即時的封面圖片了，相當簡便。
-
Bookmark: FitText.js
FitText.js 可以根據 parent element 自動調整文字大小的 jQuery 套件。在開發網站時，常碰到標題文字過長的問題，但是標題不像內文可以被裁剪，比較合適的 solution 是折行或縮小字體，但是前者常會造成破版，而後者沒辦法用 CSS 直接處理。 懶得自己寫文字調整，就靠套件解決吧。
-
Bookmark: Knockout.js
忘了是什麼時候知道有 Knockout.js 這玩意兒，當時沒用到，玩了一下 knockout.js 網站上的互動教學後只覺得很強大，然後就沒理它了。 前些時候在某個專案的後期有個需要整合許多資料的動態表單頁面。表單內容之多，又有許多互相連動的 <input> 元素，即使有 jQuery 加持也備感吃力，靈光一閃，好像有個 MVVM 的 js 實作…. 所以又回頭開始看起了 Knockout.js，不過這次有比較認真了解怎麼用 (笑)。 在專案 Git 上開了分支，導入 knockout.js。基本的使用蠻簡單的，實際開始寫撰寫相關的 MVVM 函式大概一天半就把主要的功能都完成了。之後再微調、增加次要功能等等，前後五天就把這個超難搞的表單頁面收拾乾淨，往結案邁進一大步。
-
jQuery: Check if Element is Visible or Hidden
用 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…
-
How to Convert String to Slug
在這個 SEO 當道的年代，簡單易懂的現代網址已經是基本常識了。根據 W3C 的網址規定，合法字元僅有 A – Z, a – z, 0 – 9, -, ., _, ~, :, /, ?, #, [, ], @, !, $, &, ‘, (, ), *, +, ,, ; = ，而且橫線 ( – ) 之後都是有特別意義的保留字，所以過去常看到亂七八糟的亂碼網址，像是本文的標題不處理的話就變…. How%20to%40%20Convert%20String%20to%20Slug 雖然對電腦來說沒什麼差別，但是對人類來說卻是難以理解、難以記憶的無意義片段。
-
JavaScript: Convert Size In Bytes To Human Readable Format
在程式中處理檔案的時候，時常碰到的就是檔案大小的顯示。在資料庫裡通常是以 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…
-
jQuery Validation plugin: How to Use Regex as Rule?
在網頁程式中，表單的處理一直是很繁瑣的一環，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: {// 定義規則 …
