# Sass compile two spaces Use Sass compile to css css lndent is 2 spaces if want 4 spaces Must modify this sass source code
sass-3.2.10/lib/sass/tree/visitors/to_css.rb # before tab_str = ' ' * (@tabs + node.tabs) # after tab_str = ' ' * (@tabs + node.tabs) Refer - Change indentation in Sass
...
# JavaScript - Event event type 事件名稱
event target 事件發生在哪一個目標上
event handler or listener 處理或回應的 function, 即監聽或註冊事件
event object 與事件關聯的物件
event propagation 氣泡(bubble)現象
default actions 觸發事件時的預設行為, 有時必須取消該行為
## GlobalEventHandlers HTML <button id="btn">Click</button> JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.onclick = function (e) { alert('ok'); }; ## event HTML <button id="btn">Click</button> Use addEventListener(only IE9 up) addEventListener
JavaScript var nodeBtn = document.getElementById('btn'); nodeBtn.addEventListener('click', function () { alert('ok'); }); ## delegate If use dynamic page the dom maybe not init in the page load So use delegate
...
# Android - Note(view) src java
res
drawable layout values view
px2dpi
...
# load data in view for JavaScript 如果要從後端帶資料給 JavaScript, 很常用 AJAX 的方式, 但假如是頁面在 load 進來時就需要使用後端的資料, 一開始就把資料帶在頁面上然後再用 JavaScript 取得頁面上的資料是一個較佳的方式(至少說省下一個 request).
## controller <?php ... public function index() { // TODO $server_data load data for JavaScript $server_data = array( "data_01" => array( "title" => "title 01", "num" => 01, "con" => array( "con_01" => "news", "con_02" => "sport", "con_03" => "tech", ), ), "data_02" => array( "title" => "title 02", "num" => 02, "con" => array( "con_01" => "life", "con_02" => "movie", "con_03" => "cars", ), ), ); // do something $data["static_data"] = json_encode($server_data); $this->load->view("welcome", $data); } .
...
# handle JSON 先了解 Object & JSON JavaScript 物件導向的寫法 你不可不知的 JSON 基本介紹
// data can get from AJAX or self var data; // init from self // Object Literal data = { "data_01": { "title": "title 01", "num": 01, "con": { "con_01": { "name": "news", "desc": "about news" } "con_02": { "name": "sport", "desc": "sport like NBA" } "con_03": { "name": "tech", "desc": "3C info" } } }, "data_02": { "title": "title 02", "num": 02, "con": { "con_01": { "name": "life", "desc": "people's life" } "con_02": { "name": "movie", "desc": "Iron man .
...
# javascript - file upload ## Introduction 利用 javascript 達到檔案上傳的功能
顯示上傳進度 多檔上傳 取消上傳 拖拉上傳 斷點續傳?? chrome 上傳資料夾 盡可能跨 browser(for IE8) 不依攋任一 javascript library 自幹上傳 iframe upload in IE ## Skill files API AJAX iframe FormData … ## Develop 單純用 javascript 利用 AJAX 上傳 處理 AJAX 上傳在 IE 的問題(利用 iframe 也許可解, Refer) 處理拖拉 處理拖拉資料夾 處理預設樣式 ## Issue FormData AJAX 上傳(IE10 以上) IE 利用 iframe 實作 ## Dseign flow ### Attribute inputFileNode(input type file element) fileName(name="") server(the file upload to server url) dropArea(set the drop area) ### Method upload cancel ### Event Use CustomEvent (IE 9 up) Refer - How to Create Custom Events in JavaScript
...
# Use CSS3 Animation In Compass Compass default dosen’t have mixin in CSS3 animation We can use this method in scss
/* define */ $animation-support: webkit, moz, o, ms, not khtml; /* use */ .animation { @include experimental('animation-name', move, $animation-support); @include experimental('animation-duration', 5s, $animation-support); @include experimental('animation-iteration-count', 1, $animation-support); } and add keyframes
/* define */ $animation-support: webkit, moz, o, ms, not khtml; @mixin keyframes($name) { @-webkit-keyframes #{$name} { @content; } @-moz-keyframes #{$name} { @content; } @-ms-keyframes #{$name} { @content; } @keyframes #{$name} { @content; } } /* use */ .
...
# file upload show progress bar If you want show upload progress, you must use AJAX method. And you upload files use FormData object. XMLHttpRequest object has upload properties XMLHttpRequest nsIXMLHttpRequestEventTarget
sample code
xmlHttpRequest.upload.onprogress = function (e) { console.log('onprogress', e); console.log(e.loaded); // progress console.log(Math.ceil((e.loaded/e.total) * 100) + '%'); }; Refer
...
# AJAX - XMLHttpRequest Use XMLHttpRequest object handle AJAX
client -> server Front-end - request -> back-end client <- server Front-end <- response - back-end
## build XMLHttpRequest(old method) JavaScript
var httpRequest; if (window.XMLHttpRequest) { //IE7,Mozila,Safari... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE5,IE6 //找出最新版MSXML剖析器 var msxmls = ["MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Mircosoft.XMLHttp"]; for (i = 0; i < msxmls.length; i++) { try { //建立XMLHttpRequest物件 httpRequest = new ActiveXObject(msxmls[i]); break; } catch (e) { // do something } } } New browser have XMLHttpRequest object now.
...
# File upload using ajax Use FormData objects Using FormData Objects
FormData object only IE 10 up if IE use ajax upload, only use iframe method.
## sample HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload_AJAX</title> </head> <body> <form action="upload_one.php" method="post" enctype="multipart/form-data"> <label for="file">File:</label> <input type="file" name="Upfile" id="select"><br> <input type="submit"> </form> <a href="javascript:upload()">AJAX_upload</a> </body> </html> JavaScript
function upload () { // init FormData object var formData = new FormData(); // use append method append upload file formData.
...