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

    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: {// 定義規則       …

Exit mobile version