發表文章

目前顯示的是 7月, 2013的文章

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
張貼留言
閱讀完整內容

javascript - class like

當物件導向的程式寫久了之後，會發現class的包裝方式真的是一種很棒的東西，把一些相關的東西包在一起，包括變數，包括程式(function、方法)，內部共享資源，對外則提供安全(簡單)的存取通道。 而我最近在寫 javascript，js沒有class這種東西，起初有點灰心，但後來網路上爬了一陣子發現，由於js架構的關係，可以弄出class like的程式架構，於是我就把它學起來了！以下弄一個範例分享給各位。 這一個範例，概念上是弄一個叫myRing的物件，它是一個RING資料容器，大小是10，存滿10筆資料之後，又重頭開始存。存資料進去的function為addData。而依照新舊順序將容器裡所有資料取出的function為getData，另外dataLength為此容器目前的資料筆數。總共三個對外的資源，而內部控制及存取資料的變數有三個，curIndex, upLimit, myData，為private，外部不能直接存取。 完整的程式碼如下：(js_class_like.html) <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>javascript class like</title> <style type="text/css"> #log { font-size:24px; color:blue; font-family:Tahoma; } </style> <script type="text/javascript"> var RoutineInt; var ring = new myRing(); RoutineInt = self.setInterval('MyAction()', 1000); function MyAction() { ring.addData(Math.floor(Math.random() * 100)); document.ge
張貼留言
閱讀完整內容

HTML - WebSocket Sample - with PHP Server

圖片
兩個月前因為工作的關係，開始在網路上找如何實做 WebSocket。 這是關於 WebSocket 的介紹： ◎  http://www.websocket.org/ ◎  http://zh.wikipedia.org/wiki/WebSocket 如果懶得看，讓我們從這張比較圖來了解最快！ 簡單說以前網頁大多數的狀況是，使用者端要求新的資料，提供資料的伺服才吐新的資料給你，這樣如果要做到即時更新，變得使用者端要不斷地詢問 Server 有沒有新的資料，而這樣一去一回，浪費時間也浪費資源，也沒想像中的即時。因此 HTML5 多了這條路 WebSocket，WebSocket 概念是一開始使用者端跟 Server "握個手"之後，在沒說要斷線的情況下，任何一方就可以在任何時間主動扔資料給對方，如此是也，不用一去一回，也省去了一些重新建立連線的動作，又快又方便。 以上簡介，那接下來我在網路上搜尋的過程中，發現 Client 端建立 WebSocket 的範例很多，但是 Server 端處理 WebSocket 的範例卻很少，即使找到了，還不能直接 Run ，所以小的才 po 這篇文章，提供一個可以直接運作的版本 (程式有不少部分是網路上找來的，加以改善)。 以 Server 傳時間給 Client 端顯示為範例。 首先是 Client 端，一般來說 Client 端為網頁，透過 javascript 建立連線，建立連線之後可以定義  onopen (連線成功)、onmessage (收到訊息)、onclose (結束連線)、onerror (錯誤時) 四個事件各要對應什麼 function 處理。如下 ： File ： client.html +  jquery-1.10.1.min.js <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <title>WebSocket</title> <script type="text/javascript&qu
5 則留言
閱讀完整內容

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)
張貼留言
閱讀完整內容

HTML5 - SVG

圖片
嘿~ 這陣子都在做網頁程式, 裡面有個東西我覺得超讚的想分享一下, 我用HTML5的SVG透過javascript動態畫出資料C hart圖, 剛剛我利用時間把這東西改成一個分享版本! 對這有興趣的人可以抓去看看!    這壓縮檔裡面有兩個檔, 一個是HTML檔, 一個是jquery檔, 要放在一起, 然後直接用瀏覽器開那個HTML就可以看結果. ^_^  檔案連結： https://docs.google.com/file/d/0B0kC-urN3g_jZHA5RFFhXzQ0elU/edit?usp=sharing 參考教學： http://www.w3schools.com/svg/
張貼留言
閱讀完整內容