分類: Javascript

分類
Javascript

bs_grid動態給定filter rule

bs_grid 是一個很方便的 data grid 功能介面, 可惜沒有支援 bootstrap 4, 不過在 bootstrap 3 下, 非常方便好用. github 連結: https://github.com/pontikis/bs_grid

今天遇到的問題是需要動態下 filter rules, 但在官方資料上, 僅能做預設, 如: https://www.pontikis.net/labs/bs_grid/demo/set-rules/

於是研究一下 github 上的 source code, 其實可以透過動態設定 filter rules 並使用 init 方法來進行動態更新介面, 程式如下:

$("#mygrid").bs_grid('getOption', 'filterOptions').filter_rules.push({
    "condition": {
        "filterType": "text",
        "field": "dataid",
        "operator": "equal",
        "filterValue": [
            "2"
        ]
    },
    "logical_operator": "AND"
});
$("#mygrid").bs_grid('init');

 

如此一來便能進行在動態下新增過濾器功能, 達成所需.

 

分類
Javascript

holder.js圖片佔位器

之前介紹過 fakeimg 利用圖片來進行假圖佔位:

https://diary.tw/archives/1266

這裡介紹另一種方式來進行圖片佔位, holder.js 工具:

http://holderjs.com/

使用方式十分容易簡便, 引用 holder.js 後, 直接下達參數即可順利使用, 也可以指定寬高與文字內容, 中文字也可以哦. 生成的方式是動態的 SVG 進行, demo 程式如下:

<img src="holder.js/300x200">
<img src="holder.js/300x200?theme=sky">
<img src="holder.js/300x200?bg=2a2025&text=Hello">
<img src="holder.js/300x200?bg=f3f2fe&fg=001100&text=中文字也可以哦!">

於 codepen.io 上的 demo 請參考:

https://codepen.io/timhuang/pen/MRdwyO

分類
Javascript

Ajax透過cors-anywhere服務取得跨網域內容

在製作一些 demo 效果於 codepen (或其他網站), 要取得非同源(cross-domain)資料, 可以透過 cors-anywhere 服務來達成, 說明如下:

https://cors-anywhere.herokuapp.com/

這對於在實作測試時, 有很大的幫助, 例如在 codepen 上取得空氣盒子的一個盒子資訊:

https://airbox.edimaxcloud.com/query_history?id=74DA38EBF830&token=2cf933ee-4d2f-4a87-b146-6ef4ac344769

於 codepen 上, 直接透過 Ajax 方式配合 cors-anywhere 即可順利取得資料, 進行應用輸出, 如 demo :

https://codepen.io/timhuang/pen/vMmeVE

工作原理為透過 cors-anywhere 服務, 可以多增加上

Access-Control-Allow-Origin: *

這個 response header 供跨網域存取而不受同源政策限制.

繼續閱讀:
https://developer.mozilla.org/zh-TW/docs/Web/HTTP/CORS

分類
Javascript

於指定table下第n個列後的內容隱藏

使用 jQuery + 指定的 selector 達成, 其實很容易, 原則上只是要把第 n列後的內容先隱藏, 於需要時再顯示的概念.

當然, 若是從後端也是很容易實現, 不過目前是打算從前端做的話, 方式如下:

$(“.table tr:nth-child(n+4)”).toggle();

就這樣? 對, 就是這樣, 指定第 4筆 tr 起(含, 與之後), 會被選出來進行 toggle, 這樣一來就可以容易地在前端進行 table 內, 指定行之後的內容隱藏與顯示.

可以參考範例:

https://codepen.io/timhuang/pen/PLWrap

另外可以參考有用的選擇器方式:

https://css-tricks.com/useful-nth-child-recipies/

分類
Javascript

[HTML]滿版介面

在 web 上做滿版不要出捲軸的設計要如何進行? 主要是要配合 100vh 來操作. 不過由於實務上, 在行動設備下, 會遭遇瀏覽器在計算上方網址列的狀況不同, 如下:

1. iOS Safari 不含網址列
2. iOS Chrome 含網址列 (也就是全高)
3. Android Chrome 不含網址列

這樣的狀況, 所以若是使用 100vh 操作, 仍會有對應不良的困難, 所以建議改用 window.innerHeight 來取得實際的版高, 再來進行套用.

需要監聽的事件為 document ready, window resize, window orientationchange 三個地方, 而套用方式建議使用 css cssText 語法, 能較為準確的套用, 不會有指定高度時, 無法實現的狀況.

參考範例: https://codepen.io/timhuang/pen/pxbwLp

手機版直接測試: https://codepen.io/timhuang/full/pxbwLp/

另外簡單說明如下:

jq 取得 body margin-top 與 margin-bottom 會是 ?px 的文字, 使用 parseInt 可以轉回數字. 而 innerHeight 取得本來就已是數字. 而在原 css 中的 height: 100px!important, 是用來測試在 resizeFull function 中, 使用 css 套用, 亦可蓋過原 css 中的 height important.

分類
Javascript

Google Analytics新舊語法對照

舊版本的自訂 ga() 與新版的 gtag() 語法對照, 可以參考官方文件:

ga(): https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference#send

gtag(): https://developers.google.com/analytics/devguides/collection/gtagjs/events

舉例來說, 原本在 ga 中, 自訂事件, 原語法為:

ga:

// Sends an event hit for the tracker named "myTracker" with the
// following category, action, and label, and sets the nonInteraction
// field value to true.
ga('send', 'event', 'link', 'click', 'http://example.com', {
  nonInteraction: true
});

換成 gtag 時, 如下:

gtag('event', 'click', {
  'event_category' : 'link',
  'event_label' : 'http://example.com'
});

其中, gtag 後第一個參數為 event (自訂事件), 第二參數為原來 ga 的 event_action, 之後的參數因為為 optional, 所以 event_category, event_label 都再用 json 包起來放在後面了.

請參考上面的官方文件說明.

分類
Javascript

[Javascript]實作表單送出後的換頁提醒

一般在表單送出後, 若非本頁更新的方式, 而是走 AJAX 方式送出時, 需要一定處理時間等待 server 回應的作業, 若是使用者未能完成執行完成, 而進行更換頁面時, 造成之前表單送出異常或失敗, 此時可以考慮使用這個功能來防止使用者不小心重載(reload), 或是離開頁面. 另一個狀況則是目前表單還未送出時, 但已修改, 如部落格文章編輯時, 已進行修改但未送出, 也是可以使用這個功能來達成.

這個功能是對 window 綁定一個 beforeunload 的事件(其實也就是 addEventListener 或是使用 onbeforeunload 皆可), 不過實測因各家瀏覽器工作方式不同, 無法成功設定自定訊息, 只能由瀏覽器的預設訊息提醒, 在一般狀況使用下, 沒太大問題. 使用方式如下:

// 有引用 jQuery 的狀況下
// 註冊
$(window).bind('beforeunload',function(){
  return '您確定離開此頁面嗎？請記得存檔！';
});

// 解除
$(window).unbind('beforeunload');

其中的訊息請忽略, 因為實際上會出現的訊息與各瀏覽器有關, 但特別要注意的地方是若是已知可以 reload 或送出成功後, 記得要取消, 才不會因為真的成功後, 要重導頁面時, 又出現需要使用者確認的訊息.

以下為在 codepen 的範例:
https://codepen.io/timhuang/pen/YLgvXJ

測試方式為, 先點 bind 後, 成功綁定事件, 再點下方 codepen 連結離開, 此時會出現確認訊息, 來防止或確認離開, unbind 則是在 bind 之後, 再 unbind 就不會觸發這個 beforeunload 確認.

繼續閱讀:

 

分類
Javascript

[jQuery]檢查HTML元素是否秀在畫面上

一般在操作與檢查瀏覽器畫面上的元件, 是否可以看得到, 使用 css, display 等方法進行檢查, 不過實際上只是檢查是否能在瀏覽器上出現, 但因為瀏覽器只能出現目前可視的區域, 所以實際上元素是否有捲到可以出現的地方是無法透過原本的檢查方法進行檢查, 需要做一些運算.

這個 jQuery plugin: jquery-visible 就是用來檢查這樣的狀況:

https://github.com/customd/jquery-visible/

引用了這個 jQuery Plugin 後, 就能利用 visible() 方法來檢查是否目前的畫面是看得到這個元素. 另外也可以透過 ‘partial’ 參數來檢查是否部分可以看到, 範例程式如:

https://codepen.io/timhuang/pen/rdKbyY

利用 $(“#xxx”).visible() 檢查是否全部可見或是使用 $(“#xxx”).visible(‘partial’) 檢查是否部分可見, 十分方便好用.

分類
Javascript

[FUN]知道720p, 1080p, 1080i, 4k有什麼不同嗎?

這張梗圖很有趣:

(source: https://www.facebook.com/bitmovin/photos/a.454938237852624/1884408724905561/)

但利用 javascript 如何實作呢? 是個實用的小題目, 來看看程式吧:

html:

<h2>720p</h2>
<div class="result"></div>

<h2>1080p</h2>
<div class="result"></div>

<h2>1080i</h2>
<div class="result"></div>

<h2>4k</h2>
<div class="result"></div>


javascript:

 var els = document.getElementsByClassName("result");

 for (var i = 0; i < els.length; i++) {
     var arr = els[i].previousElementSibling.innerHTML.match(/(\d+)(\w+)/i);

     els[i].innerHTML = arr[2].repeat(arr[1]);
 }

執行結果:
https://codepen.io/timhuang/pen/MVoOdK

分類
Javascript

Javascript跨瀏覽器解析日期時間字串問題

在前端使用 javascript 解析日期時間字串時, 在不同瀏覽器有不同的解讀, 我們來看一下:

2017-03-01T16:00:00

這個字串若是以 Firefox 與 IE 來解讀, 是 localtime, 若是以 Chrome 來解讀則是 GMT, 測試網址如下: https://jsfiddle.net/timhuang/8paLsfyr/2/

若是希望都是以 GMT 來解讀, 可以多加一個 Z 在字串的最後, 如: 2017-03-01T16:00:00Z 就會讓各瀏覽器取得一樣的 GMT 結果, 測試網址一下在上面.

所以若是在前端, 使用 javascript 處理日期時間字串時, 一定要理解與清楚這個狀況, 否則可能會有跨瀏覽器不一致的狀況.

參考資料: http://stackoverflow.com/questions/15109894/new-date-works-differently-in-chrome-and-firefox