Home > Developer > JavaScript

Fixie. js plugin that automatically fills in content

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Fixie. js is an open-source tool that automatically fills in HTML document content.
Official website address: http://fixiejs.com/
Fixie. js fixie_jb51.rar

Why use Fixie?
When designing a website, we often need to add a write lorem ipsum (about Lorem ipsum) to the page to preview the Display Effect of the page because the final content cannot be determined.
The problem is that adding too much boring content makes our HTML document bloated and falls into a copy-paste, manual-edited Yi Type Loop.
Fixie. js was born to address this issue. By parsing semantic HTML5 tags, Fixie can automatically fill in the content that matches the Tag Element type, making our HTML documents concise and efficient for testing.

Instructions for use:
Step 1: Add fixie. js to the document
Add a label before the end of the body

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

Step 2: There are two methods:

1. Set 'class = "fixie" 'to the position where the content needs to be filled,
For example, if you fill in the content of the p label first, set '<p class = "fixie"> </p>' directly. over is that simple.
2. Fill in the content through 'fixie. init'
Use the CSS selector to select the elements to be filled, and execute them in the console (console, parent) or script tag.

Fixie. init ([". array "," # of>. selectors ",". that ",". shocould "," # be>. populated ",". with ",". lorem "])
Or
Fixie. init (". string, # of>. comma,. separated,. selectors,. that,. shocould, # be>. populated,. with,. lorem ")
Command to automatically fill in
In addition, execute

Fixie. init (': empty ')
All empty elements in the document can be filled;

Supported Elements
Fixie determines the content to be filled by the tag type. Here are several types that need to be understood.
-'<H1 class = "fixie"> -'<P class = "fixie"> </p>'-fill in a text segment
-'<Article class = "fixie"> </article>'-fill in several paragraphs of text)
-'<Section class = "fixie"> </section>'-Same as above
-' </img>'-fill in an image with the specified size
-'<A class = "fixie"> </a>'-fill in a random Link (suspected advertisement ?)

Prompt
Modify default image Filling
Run 'fixie. setImagePlaceholder (source )'.
For example, if you want to download an image to fill it with, You can execute

Fixie. setImagePlaceholder ('HTTP: // flickholdr.com/?#w=/?#h=/canon'). init ();
Add class = "fixie" to the container"
All non-empty descendant elements in the container (note the differences between descendant and child) will be affected.
See the following description.
Copy codeThe Code is as follows:
<Div class = "fixie">
<P> Hello <a> </p>
</Div>

Fixie retains the "Hello" text in the P tag, but fills in the content in the tag.

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

Highlight filling content
You can add

. Fixie {border: 4px solid red ;}
To the CSS to distinguish the filled content from the actual content.

# Authorization
No translation.

Example:
Copy codeThe Code is as follows:
<! 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"> <P> Check us out at <a class = "fixie"> </a>, <! -- The connection will be filled here, but the external P tag will not be affected because it is not empty. -->
And don't forget to view source. </p>
<Section class = "fixie"> <! -- The child element of section will be filled -->
<P> </p>

<Ul> </ul>
<P> </p>
<Ol> </ol>
</Section>
<H2 class = "fixie"> <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>

Display Effect



Author: Xishan

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More