Home  >  Article  >  Web Front-end  >  Fixie.js plug-in to automatically fill content_javascript skills

Fixie.js plug-in to automatically fill content_javascript skills

WBOY
WBOYOriginal
2016-05-16 17:52:21820browse

Fixie.js is an open source tool that automatically fills in the content of HTML documents
Official website address: http://fixiejs.com/
Fixie.js download addressfixie_jb51.rar

Why use Fixie?
When we design a website, because we cannot determine the final filled content, we often need to add lorem ipsum (about Lorem ipsum) to the page to preview the display effect of the page.
The problem is that adding too much boring content makes our HTML document bloated and falls into a cycle of copy-paste and manual editing.
Fixie.js was born to address this problem. By parsing semantic HTML5 tags, Fixie can automatically fill in content that matches the tag element type, making our HTML documents concise and testing efficient.

Instructions for use:
Step 1: Add fixie.js to the document
Add



Step 2: There are two methods here:

1. Wherever content needs to be filled, set `class="fixie" `That’s it.
For example, if you fill in the content of the p tag first, just set `

` directly, over, it’s that simple.
2. Fill the content through `fixie.init`
Select the elements to be filled through the CSS selector, and execute

fixie.init(( [".array", "#of > .selectors", ".that", ".should", "#be > .populated", ".with", ".lorem"])
or
fixie.init(".string, #of > .comma, .separated, .selectors, .that, .should, #be > .populated, .with, .lorem")
command, you can Automatically filled in
In addition, executing

fixie.init(':empty')
can fill in all empty elements in the document;

Supported elements
Fixie is The filled content is determined by the tag type. There are several categories that need to be understood.
- `

` - add a few words of text, same with `h2 - h6`.
- `

` - Fill in a paragraph of text
- `
` - Fill in several paragraphs Text (several paragraphs)
- `
` - Same as above
- `` - Fill in a picture with the size indicated
- `` - Fill in a random link (suspected for advertising?)

Tips
Modify the default image padding
Execute `fixie.setImagePlaceholder(source)`.
For example, if you want to download images from Flickr to fill, you can execute

fixie.setImagePlaceholder('http ://flickholdr.com/${w}/${h}/canon').init();
Add class="fixie" to the container
All non-empty descendant elements inside the container (note the descendants and offspring) will be affected
See the instructions below

Copy the code The code is as follows:


Hello




Fixie will retain the "Hello" text in the P tag, but will fill in the content in the a tag

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

Highlight the padding content
You can add

.fixie{ border:4px solid red; }
to CSS to distinguish the padding content from Real content.

## Authorization
Nonsense, no more translation.

Example description:
Copy code The code is as follows:




Fixie.js Sample

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






and don't forget to view source.