Fixie.js是一個自動填入HTML文件內容的開源工具
官方網址位址:http://fixiejs.com/
Fixie.js 下載位址fixie_jb51.rar
為什麼要用Fixie?
當我們設計網站的時候,由於無法確定最終填充的內容,經常需要添加一寫lorem ipsum(關於Lorem ipsum)到頁裡面來預覽頁面的展現效果。
問題來了,添加過多的無聊的內容,使得我們的HTML文件變得臃腫,並且陷入複製-粘貼,手工編輯的毅種循環中。
Fixie.js就是針對這個問題而誕生的,透過解析語意化的HTML5標籤,Fixie可以自動填入符合標籤元素類型的內容,使得我們的HTML文件簡潔,測試高效。
使用說明:
第一步:加入fixie.js 到文件
在body結束標籤前加上
第二步:這裡有兩種方法:
1,任何需要填滿內容的位置,設定`class="fixie"`就行了,
例如,如果先填入p標籤的內容,直接設定`
`就行了,over,就這麼簡單。
2,透過`fixie.init`填充內容
透過CSS選擇器選擇待填充的元素,在console(控制台啊,親)或script標籤裡面執行
fixie.init( [".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
或
fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
命令,就可以自動填入了
另外,執行
fixie.init(':empty')
可以填充文件裡所有的空元素;
支援的元素
Fixie是透過標籤類型來決定填充的內容的,這裡有幾類是需要了解的。
- `
` - 加入幾個單字的文本,`h2 - h6`亦然。
- `
` - 填滿一段文字
- `
` - 填滿幾段文字(幾個段落)
- `
` - 同上
- `
` - 填充一張註明了尺寸的圖片
- `
` - 填充一個隨機的連結(做廣告嫌疑?)
提示
修改預設的圖片填充
執行`fixie. setImagePlaceholder(source)`.
例如,如果你想從Flickr下載圖片來填充,可以執行
fixie.setImagePlaceholder('http://flickr.com/${w}/${h }/canon').init();
為容器加上class="fixie"
容器內部所有的非空後代元素(注意後代與子代的區別)都會受到影響
看下面的說明
Fixie會保留P標籤裡面的"Hello"文本,但是會填滿a標籤裡面的內容
### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)
突出填充內容
可以添加
.fixie{ border:4px solid red; }
到CSS裡面,以便區分填滿內容與真實內容。
## 授權
廢話,不翻譯了。
程式碼如下:
Fixie.js Sample
Check us out at ,
and don't forget to view source.
<script> <BR>// Changes default image source to Flickr <BR>fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init(); <BR>< /script> <BR> <BR> <BR><BR> </script>
顯示效果
作者:西山