跳到主要內容

發表文章

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

我得好好想想...為何要用AngularJS ? 何時要用AngularJS?

有人告訴我, AngularJS 是具有 MVC 架構的開發 Libary......是這樣嗎? 先想想, What's MVC?   (節錄自wiki) 軟體工程開發時的架構模式 （控制器Controller）- 負責轉發請求，對請求進行處理。 （檢視View） - 介面設計人員進行圖形介面設計。 （模型Model） - 程式設計師編寫程式應有的功能（實作演算法等等）、資料庫專家進行資料管理和資料庫設計(可以實作具體的功能)。 每個人對MVC的解讀稍有落差, 圖畫的也有差別, AngularJS 讓我覺得比較像這張圖.... ( 圖出自 ) AngularJS 實現的MVC開發架構出現在DOM * Model 指存放Data的物件, 可以是Key Value * Controller 指class * View 就是整個Dom AngularJS  is a framework that binds your HTML (views) to JavaScript objects (models). When your models change, the page updates automatically. 這樣的架構讓前端人員必須打破 舊有思維做設計, 針對不同的ID與Classname寫Event的時代要過去了 ! 這種做法有什麼好處? A. 前端程式乾淨 B. 前端程式有彈性 C. 前端程式有共用性 但什麼時候要用? 是令我頭痛的問題 多看看一些sample會更有感覺 http://tutorialzine.com/2013/08/learn-angularjs-5-examples/ 總結 在頁面不reload的狀況下, 要處理許多Event function 和 Data Object, 以往只能用越寫越多來解決, 因為跟著ID or Classname 可重複利用性也低, 終極目標還是快速、正確的開發, 如果能透過好的Libary解決也是一大福音
張貼留言
閱讀完整內容

HTM5的表單設計

文章參考  http://www.html5rocks.com/en/tutorials/forms/html5forms/ HTML5 有很多input type可以使用 Input Type Description url For entering a URL. It must start with a valid URI scheme, (for example http://, ftp:// or mailto:). tel For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern . email For entering email addresses. By default it will only take one, but if the multiple attribute is provided, a comma separated list of email addresses is valid. search A text input field styled in a way that is consistent with the platform's search field. number For numeric input, can be any rational integer or float value. color For choosing colors. range For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control. datetime For entering a date and time value where the time zone is provided as GMT. datetime-local For entering a dat...
張貼留言
閱讀完整內容

jQuery 的slideToggle太好用了

$ ( ".collapse" ) .each ( function ( index, value ) { $ ( this ) . click ( function ( evt ) { evt.preventDefault ( ) ; //prevent the default click event of the anchor tag. var target = $ ( this ) .attr ( "data-toggle" ) ; $ ( "." + target ) .slideToggle ( ) ; } ) ; } ) ; http://code-tricks.com/create-a-common-toggler-for-div-using-jquery/
張貼留言
閱讀完整內容

HTML5 重點瀏覽

http://html5please.com/?utm_source=html5weekly&utm_medium=email supported by  IE10+   IE9+   IE8+   IE7+   no IE not supported by  mobile devices   older mobile devices requiring  prefixes polyfill fallback that you should  use   use with caution   avoid that are  css   html api js
張貼留言
閱讀完整內容

CSS Media Queries for common device

我需要好好想想為什麼 ? 越多的device加入遊覽網頁的世界, F2E的生命越短 * 碰到特定的device, 可到這網站參考css寫法  http://nmsdvid.com/snippets/ * 全面性的寫法如下, 轉載  http://code-tricks.com/css-media-queries-for-common-devices/ /* All Smartphones in portrait and landscape ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* YOUR STYLE GOES HERE */ } /* All Smartphones in landscape ----------- */ @media only screen and (min-width : 321px) { /* YOUR STYLE GOES HERE */ } /* All Smartphones in portrait ----------- */ @media only screen and (max-width : 479px) { /* YOUR STYLE GOES HERE */ } /***** ANDROID DEVICES *****/ /* Android 240 X 320 ----------- */ @media only screen and (max-width: 241px){ /* YOUR STYLE GOES HERE */ } /* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */ @media only screen and (min-width: 375px) and (max-width: 385px){ /* YOUR STYLE GOES HERE */ } /* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */ @media...
張貼留言
閱讀完整內容