首頁  >  文章  >  web前端  >  Fixie.js 自動填入內容的插件_javascript技巧

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

WBOY
WBOY原創
2016-05-16 17:52:21824瀏覽

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.js 自動填入內容的插件_javascript技巧` - 填充一張註明了尺寸的圖片
- `` - 填充一個隨機的連結(做廣告嫌疑?)

提示
修改預設的圖片填充
執行`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裡面,以便區分填滿內容與真實內容。

## 授權
廢話,不翻譯了。
範例說明: 複製程式碼
程式碼如下:




Fixie.js Sample







Check us out at ,
and don't forget to view source.



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









    <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>

    顯示效果


    作者:西山

    陳述:
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn