Fixie.js plug-in to automatically fill content_javascript skills-JS Tutorial-php.cn

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 address fixie_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;}

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

// Changes default image source to Flickr fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie').init(); Display effect

Author: Xishan