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結束標簽之前添加
<script type="text/javascript" src="fixie.js"></script>
第二步：這裡有兩種方法：
1，任何需要填充內容的位置，設置`class="fixie"`就行了，
比如，如果先填充p標簽的內容，直接設置`<p 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是通過標簽類型來決定填充的內容的，這裡有幾類是需要了解的。
- `<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>` - 填充一個隨機的鏈接（做廣告嫌疑？）
提示
修改默認的圖片填充
執行`fixie.setImagePlaceholder(source)`.
比如，如果你想從Flickr下載圖片來填充，可以執行
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
給容器添加class="fixie"
容器內部所有的非空後代元素（注意後代與子代的區別）都會受到影響
看下面的說明
復制代碼 代碼如下:
<div class="fixie">
<p>Hello <a></a></p>
</div>
Fixie會保留P標簽裡面的"Hello"文本，但是會填充a標簽裡面的內容
### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)
突出填充內容
可以添加
.fixie{ border:4px solid red; }
到CSS裡面，以便區分填充內容與真實內容。
## 授權
廢話，不翻譯了。
示例說明：
復制代碼 代碼如下:
<!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>
官方網址地址：http://fixiejs.com/
Fixie.js 下載地址 fixie_jb51.rar
為什麼使用Fixie？
當我們設計網站的時候，由於無法確定最終填充的內容，經常需要添加一寫lorem ipsum（關於Lorem ipsum）到頁面裡面來預覽一下頁面的展現效果。
問題來了，添加過多的無聊的內容，使得我們的HTML文檔變得臃腫，並且陷入復制-粘貼，手工編輯的毅種循環中。
Fixie.js就是針對這個問題而誕生的，通過解析語義化的HTML5標簽，Fixie可以自動填充匹配標簽元素類型的內容，使得我們的HTML文檔簡潔，測試高效。
使用說明：
第一步：添加fixie.js 到文檔中
在body結束標簽之前添加
<script type="text/javascript" src="fixie.js"></script>
第二步：這裡有兩種方法：
1，任何需要填充內容的位置，設置`class="fixie"`就行了，
比如，如果先填充p標簽的內容，直接設置`<p 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是通過標簽類型來決定填充的內容的，這裡有幾類是需要了解的。
- `<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>` - 填充一個隨機的鏈接（做廣告嫌疑？）
提示
修改默認的圖片填充
執行`fixie.setImagePlaceholder(source)`.
比如，如果你想從Flickr下載圖片來填充，可以執行
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
給容器添加class="fixie"
容器內部所有的非空後代元素（注意後代與子代的區別）都會受到影響
看下面的說明
復制代碼 代碼如下:
<div class="fixie">
<p>Hello <a></a></p>
</div>
Fixie會保留P標簽裡面的"Hello"文本，但是會填充a標簽裡面的內容
### Fixie for Rails
[fixie-rails](https://github.com/csexton/fixie-rails)
突出填充內容
可以添加
.fixie{ border:4px solid red; }
到CSS裡面，以便區分填充內容與真實內容。
## 授權
廢話，不翻譯了。
示例說明：
復制代碼 代碼如下:
<!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>
顯示效果
作者：西山
小編推薦
熱門推薦