HTML5 - SVG


嘿~ 這陣子都在做網頁程式, 裡面有個東西我覺得超讚的想分享一下, 我用HTML5的SVG透過javascript動態畫出資料Chart圖, 剛剛我利用時間把這東西改成一個分享版本! 對這有興趣的人可以抓去看看!   

 這壓縮檔裡面有兩個檔, 一個是HTML檔, 一個是jquery檔, 要放在一起, 然後直接用瀏覽器開那個HTML就可以看結果. ^_^ 

 檔案連結：
https://docs.google.com/file/d/0B0kC-urN3g_jZHA5RFFhXzQ0elU/edit?usp=sharing

參考教學：
http://www.w3schools.com/svg/

留言

張貼留言

這個網誌中的熱門文章

HTML - CSS - footer floating toolbar bottom 瓢浮置底的工具列

圖片
哈哈 前幾天花了不少時間用 HTML footer bottom 等相關字眼在那邊找怎麼做置底的工具列... 怎樣看都不是我要的那種, 結果今天用 html floating toolbar bottom 終於找到了! 而且還很簡單! 只要把你要置底的東西 ex. #footer { width:100%; height: 100px ; position:fixed; bottom:0px; z-index:1; } 就成功啦 另外要注意的是, 因為這東西是會蓋過下面的內容, 所以你得讓下面內容的底部也空出該footer高度的空間出來, 以免看不到蓋住的內容... ex. #page { padding:0 0 100 0; } PS: #page為我頁面內容的容器(div)
閱讀完整內容

jQuery - header & floating menu - dynamic detect & adjust

圖片
相信很多人都有手機相關APP的使用經驗，這些APP的介面，大多最上方會有一個Header，Header裡面可能放了一些主題名稱、功能按鈕等等。接著，我們按了某個按鈕之後，最常看到就是會跑出一個功能選單，這個功能選單是蓋在內容上方的，如圖： 我昨天花了點時間，使用HTML及CSS，把這東西實做出來了，基本上的技巧就是延續之前介紹footer的做法，透過css設定 position:fixed; 以固定Header及Menu的位置，然後內容Content上方保留一些空間， padding Header的高度。 本來以為這樣就很棒了，Perfect！但今天測試的時候發現一個問題！由於我的Title是依照顯示內容會動態改變，當這個Title文字過長而換行的時候，糟糕了，那個位置固定的話就會錯亂，如下： 看到了嗎？Menu選單顯示時應該下移一點配合Header的高度，而且Content第一行也被Header蓋住了！所以怎麼解決這問題呢？我今天想來想去，目前想到的做法是，當Header高度有改變的時候，我就跟著調整Menu跟Content的位置設定。而這個方法要完成，需要解決兩件事情，第一件事情是我要知道Header的實際高度，而第二件事情是，高度改變的時候要觸發處理事件。 先從第一件事情來，在jQuery裡有個方法叫 outerHeight() ，它會回傳我們所選取物件目前的實際高度。我們取得實際高度之後，接著去設定Menu及Content，如下： function HeaderResize() { // Header高度變動時,動態調整Page及Menu顯示的位置 var headerHeight = $('#header_title') .outerHeight (); $('#PopupMenu').css('top', headerHeight); $('#content').css('padding', headerHeight + ' 0 0 0'); } 接著第二件事情就是，我們要在高度改變的時候觸發這個處理function。高度改變有兩種狀況，第一種狀況是我們在瀏覽的時候改變了視窗大小而導致Title
閱讀完整內容

自己設計讓網頁支援多國語系的架構

首先我們要把問題釐清，支援多國語系最基本的概念就是，畫面上的文字要被替換。 於是我們先建立一個用來被替換的多國語系字典檔 這邊先簡單用物件來當範例 // 多國語系文字庫 var gLib = { "0000": { "CHT": "Traditional Chinese (繁體中文)", "ENU": "English (English)", "KOR": "Korean (한국어)" }, "0001": { "CHT": "語言", "ENU": "Language", "KOR": "언어" }, "0002": { "CHT": "選擇語言：", "ENU": "Select your language:", "KOR": "언어를 선택하세요 :" } } 有了多國語系文字庫之後，我想要建立一個管理器來存取這個文字庫，我希望這個管理器僅保有我指定語言的部分，並且提供取用的 get function // 文字庫管理器 var gTxtLib = { resource: undefined, set: function(lib, lang) { var result = undefined; if (typeof lib == 'object') { result = {}; for (var id in lib) { var txtObj = lib[id]; result[id] = (lang in txtObj ? txtObj[lang] : undefined); } } this.resource = result; }, has
閱讀完整內容