Fixie.js 自動填入內容的插件_javascript技巧

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();
為容器加上cla​​ss="fixie"
容器內部所有的非空後代元素（注意後代與子代的區別）都會受到影響
看下面的說明

複製程式碼 程式碼如下:

Hello

Fixie會保留P標籤裡面的"Hello"文本，但是會填滿a標籤裡面的內容

### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)

突出填充內容
可以添加

.fixie{ border:4px solid red; }
到CSS裡面，以便區分填滿內容與真實內容。

## 授權
廢話，不翻譯了。

範例說明： 複製程式碼

程式碼如下:

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>

顯示效果

作者：西山