快捷導(dǎo)航

Fixie.js 自動填充內(nèi)容的插件

更新時間：2012年06月28日 18:54:38 作者：

Fixie.js 自動填充內(nèi)容的插件，需要的朋友可以參考下

Fixie.js是一個自動填充HTML文檔內(nèi)容的開源工具
官方網(wǎng)址地址：http://fixiejs.com/
Fixie.js 下載地址 fixie_jb51.rar

為什么使用Fixie？
當我們設(shè)計網(wǎng)站的時候，由于無法確定最終填充的內(nèi)容，經(jīng)常需要添加一寫lorem ipsum（關(guān)于Lorem ipsum）到頁面里面來預(yù)覽一下頁面的展現(xiàn)效果。
問題來了，添加過多的無聊的內(nèi)容，使得我們的HTML文檔變得臃腫，并且陷入復(fù)制-粘貼，手工編輯的毅種循環(huán)中。
Fixie.js就是針對這個問題而誕生的，通過解析語義化的HTML5標簽，F(xiàn)ixie可以自動填充匹配標簽元素類型的內(nèi)容，使得我們的HTML文檔簡潔，測試高效。

使用說明：
第一步：添加fixie.js 到文檔中
在body結(jié)束標簽之前添加

<script type="text/javascript" src="fixie.js"></script>

第二步：這里有兩種方法：

1，任何需要填充內(nèi)容的位置，設(shè)置`class="fixie"`就行了，
比如，如果先填充p標簽的內(nèi)容，直接設(shè)置`<p class="fixie"></p>`就行了，over，就這么簡單。
2，通過`fixie.init`填充內(nèi)容
通過CSS選擇器選擇待填充的元素，在console（控制臺啊，親）或者script標簽里面執(zhí)行

fixie.init([".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
或者
fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
命令，就可以自動填充了
另外，執(zhí)行

fixie.init(':empty')
可以填充文檔里所有的空元素；

支持的元素
Fixie是通過標簽類型來決定填充的內(nèi)容的，這里有幾類是需要了解的。
- `<h1 class="fixie"></h1>` - 添加幾個單詞的文本，`h2 - h6`亦然。
- `<p class="fixie"></p>` - 填充一段文字
- `<article class="fixie"></article>` - 填充幾段文本（幾個段落）
- `<section class="fixie"></section>` - 同上
- `<img class="fixie"></img>` - 填充一張注明了尺寸的圖片
- `<a class="fixie"></a>` - 填充一個隨機的鏈接（做廣告嫌疑？）

提示
修改默認的圖片填充
執(zhí)行`fixie.setImagePlaceholder(source)`.
比如，如果你想從Flickr下載圖片來填充，可以執(zhí)行

fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
給容器添加class="fixie"
容器內(nèi)部所有的非空后代元素（注意后代與子代的區(qū)別）都會受到影響
看下面的說明

復(fù)制代碼代碼如下:

 
<div class="fixie"> 
<p>Hello <a></a></p> 
</div> 

Fixie會保留P標簽里面的"Hello"文本，但是會填充a標簽里面的內(nèi)容

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

突出填充內(nèi)容
可以添加

.fixie{ border:4px solid red; }
到CSS里面，以便區(qū)分填充內(nèi)容與真實內(nèi)容。

## 授權(quán)
廢話，不翻譯了。

示例說明：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title>Fixie.js Sample</title> 

<style> 
body{ 
font-family: Helvetica, arial, sans-serif; 
width:800px; 
margin:150px auto; 
} 
img{ 
width:400px; 
height:300px; 
float:right; 
margin:20px; 
} 
.fixie{ color: red;} 
</style> 

</head> 
<body> 
<article> 
<h1 class="fixie"></h1><!--這里會填充標題--> 
<p> Check us out at <a class="fixie"></a>,<!--這里會填充連接，但是外部的P標簽因為非空，所以不會受影響--> 
and don't forget to view source.</p> 
<section class="fixie"><!--section的后代元素都會填充--> 
<p></p> 
<img/> 
<ul></ul> 
<p></p> 
<ol></ol> 
</section> 
<h2 class="fixie"></h2> 
<section class="fixie"></section> 
</article> 

<script type="text/javascript" src="fixie.js"></script> 
<script> 
// Changes default image source to Flickr 
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init(); 
</script> 
</body> 
</html> 