快捷導(dǎo)航

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

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

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

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

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

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

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

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

1，任何需要填充內(nèi)容的位置，設(shè)置`class="fixie"`就行了，
比如，如果先填充p標(biāo)簽的內(nèi)容，直接設(shè)置`<p class="fixie"></p>`就行了，over，就這么簡(jiǎn)單。
2，通過(guò)`fixie.init`填充內(nèi)容
通過(guò)CSS選擇器選擇待填充的元素，在console（控制臺(tái)啊，親）或者script標(biāo)簽里面執(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")
命令，就可以自動(dòng)填充了
另外，執(zhí)行

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

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

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

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

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

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

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

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

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

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

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

示例說(shuō)明：

復(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><!--這里會(huì)填充標(biāo)題--> 
<p> Check us out at <a class="fixie"></a>,<!--這里會(huì)填充連接，但是外部的P標(biāo)簽因?yàn)榉强?，所以不?huì)受影響--> 
and don't forget to view source.</p> 
<section class="fixie"><!--section的后代元素都會(huì)填充--> 
<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> 