blog.poying.me

安裝

npm install skewer

筆記

類似 connect/express 的想法

connect

app.use(function (req, res, next) { /... });

skewer

skewer(function (err, obj) { console.log(obj); }) .add(function (obj, next) { obj.idiot = '馬囧'; next(); }) .add(function (obj, next) { obj.idiot2 = '馬囧囧'; next(); }) .run({});

想法類似，但還是有許多差異，像是 connect 會以參數個數決定要不要傳入 error。

每個 function 取得相同參數

function 一個一個執行，完成時呼叫 next

出錯時可以直接把 error 丟進 next 並停止繼續執行其他 function

最後一個 function 多取得一個 error 的參數，用來判斷是否執行成功

感覺類似 eventproxy

用法、寫法、想法不太一樣，skewer 比較簡易、單純

var emit = skewer.customs(function (error, text1, text2) { console.log(text1); console.log(text2); }); setTimeout(function () { emit('text2', '馬囧'); }, 100); setTimeout(function () { emit('text1', '123'); }, 200);

利用 function.toString 取得參數名稱

並等待所有值都被指派或出現錯誤

安裝

$ npm install another-livereload

用法

$ anotherlr [-p port] [-i interval]

Middleware

var path = require('path'); var lr = require('another-livereload'); lr.rules(/\.(css|scss|js|html)$/); lr.use(/\.scss$/, function (file, msg, next) { // ... next(); }); lr.watch(path.join(__dirname, 'public')); lr.run();

Middleware 列表

HTML 在設計的時候把所有 lightbox 內容跟放網頁主要內容的容器放在同一層，這是為了之後能讓網頁有向後縮的感覺而留下的伏筆。

完整的 HAML

#demo.lightbox %article.lightbox-content %h3.lightbox-title Title %a.lightbox-close-btn{:href => "#"} x content %a.lightbox-overlay{:href => "#"} #demo2.lightbox %article.lightbox-content %h3.lightbox-title Title %a.lightbox-close-btn{:href => "#"} x content %a.lightbox-overlay{:href => "#"} #wrapper content

.lightbox-close-btn - 關閉按鈕

.lightbox-overlay - 覆蓋主要內容，點擊這裡也會關閉 lightbox

網頁後縮

#wrapper background: #FFF box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) /** 周圍陰影 **/ position: fixed left: 0 top: 0 right: 0 bottom: 0 padding: 50px 0 transition: All 0.5s ease /** 平滑後縮 **/ overflow: scroll /** 內容超出範圍時顯示滾輪（感覺起來像正常網頁） **/

lightbox 外層容器

這裡為了讓 lightbox 從底下浮出來時不會因為超出可視範圍導致顯示捲軸，所以多用了一層容器。

.lightbox position: fixed left: 0 top: 0 height: 100% width: 100% z-index: -1 opacity: 0

點擊事件

:target 找到目標後，向下尋找 #wrapper（主要網頁內容），並把比例縮小成原來的 90%。

&:target opacity: 1 z-index: 1 .lightbox-overlay opacity: 1 .lightbox-content bottom: 0 & ~ #wrapper transform: scale(0.9)

其他

其他一些有用到的技巧

absolute、fixed 在已知寬度情況下左右置中 - left: 50%; margin-left: 負一半寬度;，也可用 right、margin-right

圓形 - border-radius 超過本身一半寬度

完整的 SASS

Tabs 分成標籤列、內容兩個部份，在 HTML 的地方我並不是將標籤、內容分開放置像是這樣

.tabs %ul %li %a{:href => "#tab1"} Tab1 %li %a{:href => "#tab"} Tab2 #tab1 %h3 Tab1 content #tab2 %h3 Tab2 content

而是將標籤跟對應的內容放在一起，個人感覺這樣在新增/刪除的時候比較方便，閱讀起來也比較容易，不會說要找到他對應的標籤/內容還得跑到某個遙遠的角落，直接一整個區塊新增/刪除就好。

範例中完整的 HAML

#wrapper .tabs{:id => "tabs1"} .tab %input{:type => "radio", :name => "tabs1", :id => "tabs1-1"} %label.tab-label{:for => "tabs1-1"} Tab1 .tab-content Content .tab %input{:type => "radio", :name => "tabs1", :id => "tabs1-2"} %label.tab-label{:for => "tabs1-2"} Tab2 .tab-content Content

.tab - 用來區分不同的標籤、內容

%input - 處理點擊事件，並不會顯示於畫面

%label.tab-label - 標籤

.tab-content - 內容

標籤

標籤"們"本來不是放在一起的，但在顯示的時候卻要讓他們在一起，看起來似乎很麻煩，但其實只要套上 float: left 就可以，所有標籤都會向前靠攏，_ 之後只需要讓 content 閃邊，不要擋路就好 _。

.tab-label position: relative /** 讓之後的 :before、:after 在設定位置時以標籤左上角為原點 **/ height: 30px /** 標籤高度 **/ line-height: 30px /** 文字垂直置中 **/ float: left /** 向左靠攏 **/ color: #85b2d4 margin: -30px -5px 0 -5px /** 左右距離拉近，向上台升以免擋到內容 **/ padding: 0 24px background: #f7f7f7 border-top: 1px #e0e0e0 solid border-top-left-radius: 6px border-top-right-radius: 6px cursor: pointer z-index: 0

之後是修改標籤外觀，讓邊框有傾斜的感覺，這是參考自 http://codepen.io/dolbyzerr/pen/wBkLc

&:before content: ' ' position: absolute left: -3px top: 3px bottom: 2px width: 10px transform: rotate(14deg) border-left: 1px solid #e0e0e0 background: #f7f7f7 &:after content: '' position: absolute right: -3px top: 3px bottom: 2px width: 10px transform: rotate(-14deg) border-right: 1px solid #e0e0e0 background: #f7f7f7 /** 第一個標籤向左空一段距離 **/ &:first-child .tab-label margin-left: 10px

標籤做完其實就已經完成一半了，接著把 div.tab-content 放到他應該要在的地方，並讓高度填滿畫面。

內容

這裡填滿高度的方式比較特別，因為上方有標籤的關係所以沒辦法用 height: 100%，而是用另一個技巧 top: 40px; bottom: 0;，這樣他就會在上方空出 40px 的空間，並把剩餘高度填滿。

.tab-content position: absolute left: 0 top: 40px bottom: 0 left: 10px right: 10px opacity: 0 z-index: 0 transition: all 0.5s ease 0s

點擊事件

將 input 藏起來

input[type=radio] display: none

最後用上一篇文章中介紹的點擊事件技巧就完成 Tabs 了。

&:checked ~ .tab-label color: #666 z-index: 1 background: #FFF margin-top: -35px height: 37px line-height: 35px &:before background: #FFF &:after background: #FFF ~ .tab-content opacity: 1 z-index: 2

完整的 SASS

要怎麼實作 Click Events 呢？

目前就上面提到的 Slider、Tabs、Lightbox 來說，可以利用 checkbox、radio 的 :checked 還有連結的 :target ，並依據不同的特性用於不同的效果。

checkbox、radio

checkbox/radio 應該算是最常見的作法，很多用 CSS 作的東西都會用到這個技巧，在 Google 上也能找到許多文章，這篇就是其中說明的最詳細的之一。他的特色在於同一頁面內可放置多個元件而不互相衝突，因此 ":target" 更適合製作 Slider 等元件。

這裡將會用到 CSS3 的 Selector "~"、":checked"，W3C 是這樣說明的

~

E ~ F an F element preceded by an E element

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

:checked

Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies. While the :checked pseudo-class is dynamic in nature, and can altered by user action, since it can also be based on the presence of semantic attributes in the document, it applies to all media. For example, the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes as described in Section 17.2.1 of HTML4, but of course the user can toggle "off" such elements in which case the :checked pseudo-class would no longer apply.

HTML

<div> <label for="click-demo1">Checkbox</label><input type="checkbox" id="click-demo1" /> <p class="text">hello</p> </div> <div> <label for="click-demo2">radio</label><input type="radio" id="click-demo2" /> <p class="text">hello</p> </div>

CSS

input[type="checkbox"]:checked ~ .text, input[type="radio"]:checked ~ .text { color: #F60; }

當 Checkbox/Radio 被勾選的時候就會被 ":checked" 捕捉到，之後再透過 "~" 向後找到 .text，並套用樣式。 在範例中點擊 Checkbox/Radio 後，文字會變色。

Checkbox、Radio 作法一樣，但因為本身功能不同，所以在做變化的時候也會做出不同功能出來，在之後的幾偏文章會介紹一些基於 :checked 的不同玩法。

:target pseudo-class

W3C 說明

Some URIs refer to a location within a resource. This kind of URI ends with a "number sign" (#) followed by an anchor identifier (called the fragment identifier).

URIs with fragment identifiers link to a certain element within the document, known as the target element. For instance, here is a URI pointing to an anchor named section_2 in an HTML document:

http://example.com/html/top.html#section_2

A target element can be represented by the :target pseudo-class. If the document's URI has no fragment identifier, then the document has no target element.

HTML

<a href="#demo1" id="demo1">點我 (demo1)</a> <a href="#demo2" id="demo2">點我 (demo2)</a>

CSS

a:target { color: #F60; }

點擊 demo1 後網址會變成 http://example.com/#demo1，這時候 id 為 demo1 的連結將會套用到 a:target 的樣式，文字顏色會變成橘色。

備註