星期五, 9月 19, 2014

[jQuery Mobile] 動態更改jquery mobile 按鈕的圖示

記錄一下如何動態變更jquery mobile 生成的按鈕Icon. http://stackoverflow.com/questions/12627864/change-data-icon-on-click-with-jquery-mobile


$(buttonSelector).attr('data-icon', newIcon)
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

星期三, 9月 10, 2014

[AngularJS] 如何在UI-Bootstrap取得input file

今天在使用DialogService的時候,在modal那層的controller一直取不到input file的$scope變數,查了一下在以下這篇討論:

http://stackoverflow.com/questions/23913998/how-to-access-file-input-in-controller-using-angular-ui-bootstrap-modal

解法如下:


透過自已新建一個fileService,再新增一個directive語法去記錄檔案改變時,將file存到fileService

[CSS] IE8 透明度寫法

記錄一下如何在萬惡的IE8支援透明度:D

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

星期二, 9月 09, 2014

[JavaScript] 快快樂樂學log4javascript

log4javascript 是基於Apache log4j的log系統,基本上用過log4j的人應該很快就可以上手。
有興趣的話可以看一下之前的筆記: [Java] 快快樂樂學會log4j

Appender 

提供以下幾種Appender

Appender
AlertAppender =>將log透過alert秀出來
AjaxAppender => 將log寫到Server存起來
PopUpAppender
InPageAppender
BrowserConsoleAppender => 將log印在console上

星期四, 9月 04, 2014

[D3.js] 使用d3.js畫出Google 風格的測量儀器效果

使用d3.js來製作google style的測量儀器效果,用來顯示cpu、mem非常直覺 :D
作者說可以任意用在商業用途上,請參考作者的gist
https://gist.github.com/tomerd/1499279


星期三, 9月 03, 2014

[D3.js] 長在D3.js上面的繪圖函式庫

如果喜歡D3又想要加速繪圖,可以試試以下的基於D3的第三方繪圖函式庫,輕鬆體驗D3畫報表的爽度 :D,目前依Github Start數最高的為Rickshaw。

c3

C3 enables deeper integration of charts into your application.


dimple

An object-oriented API for business analytics powered by d3.

Dc.js (Dimensional Charting Javascript Library)

dc.js is a javascript charting library with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset (inspired by crossfilter's demo). It leverages d3 engine to render charts in css friendly svg format. Charts rendered using dc.js are naturally data driven and reactive therefore providing instant feedback on user's interaction. The main objective of this project is to provide an easy yet powerful javascript library which can be utilized to perform data visualization and analysis in browser as well as on mobile device.


xCharts

xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS, and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.


Rickshaw 

Rickshaw is a JavaScript toolkit for creating interactive time series graphs.


星期二, 9月 02, 2014

[Raphael.js] 基於Raphaeljs 之上的繪圖函式庫

最近由於新的任務要在web上呈現一些數據,
本來想使用d3.js,但任務需求一定要支援可怕的IE 8相容性問題,
google了一下有其他workaround (r2d3.js與aight.js),但可能還有其他未知的問題xd
考慮是否選擇另一套 Raphaeljs (http://raphaeljs.com/),Raphael是一套知名在web上畫出向量圖形的函式庫,主要會依瀏覽器支援的狀況使用SVG(IE 9下不支援)或VML(< IE 8)來進行向量繪圖,不過社群活躍度就不如D3了。

當然主要的任務是畫一些報表的圖形,找了一些基於Raphaeljs上頭的繪圖工具: D

gRaphael (MIT License)

http://g.raphaeljs.com/
較陽春版的charts