ホームページ  >  記事  >  ウェブフロントエンド  >  content_javascript スキルを自動的に埋めるための Fixie.js プラグイン

content_javascript スキルを自動的に埋めるための Fixie.js プラグイン

WBOY
WBOYオリジナル
2016-05-16 17:52:21820ブラウズ

Fixie.js は、HTML ドキュメントのコンテンツを自動的に入力するオープンソース ツールです
公式 Web サイトのアドレス: http://fixiejs.com/
Fixie.js のダウンロード アドレスfixie_jb51 .rar

Fixie を使用する理由
Web サイトをデザインするとき、最終的に埋められるコンテンツを決定できないため、ページの表示効果をプレビューするために lorem ipsum (Lorem ipsum について) をページに追加することがよくあります。
問題は、退屈なコンテンツを追加しすぎると HTML ドキュメントが肥大化し、コピーアンドペーストと手動編集のサイクルに陥ることです。
Fixie.js は、この問題に対処するために生まれました。セマンティック HTML5 タグを解析することで、Fixie はタグ要素のタイプに一致するコンテンツを自動的に入力し、HTML ドキュメントを簡潔にしてテストを効率化できます。

使用手順:
ステップ 1: fixie.js をドキュメントに追加します
本文終了タグの前に



ステップ 2: ここには 2 つのメソッドがあります:

1. コンテンツを入力する必要がある場合は、`class="fixie" ` を設定します。
たとえば、最初に p タグの内容を入力する場合は、`

` を直接設定するだけです。これは非常に簡単です。
2. `fixie.init` でコンテンツを入力します
CSS セレクターで入力する要素を選択し、

fixie.init(( [".array", "#of) > .selector", ".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` と同様に、いくつかの単語のテキストを追加します。
- `

` - テキストの段落を記入します
- `
` -複数の段落に入力します テキスト (複数の段落)
- `
` - 上記と同じ
- `< ;/img>` - 指定されたサイズの画像を入力します
- `` - ランダムなリンクを入力します (広告の疑い?)

ヒント
デフォルトの画像パディングを変更します
`fixie.setImagePlaceholder(source)` を実行します。
たとえば、Flickr から画像をダウンロードして塗りつぶしたい場合は、
fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/canon').init();
コンテナに class="fixie" を追加
すべて非コンテナ内の空の子孫要素 (子孫と子孫に注意してください) が影響を受けます
以下の手順を参照してください

コードをコピーしますコードは次のとおりです。

こんにちは




Fixie は P タグの「Hello」テキストを保持しますが、a タグの内容を埋めます

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

パディングコンテンツを強調表示します


.fixie{ border:4px を追加できます赤一色; }
を CSS に追加して、パディングコンテンツと実際のコンテンツを区別します。

## 承認
ナンセンスです。これ以上の翻訳は必要ありません。

説明例:


コードをコピー コードは次のとおりです:



Fixie.js サンプル ;
body{
フォントファミリー: Helvetica、arial、サンセリフ;
margin: 150px auto; 400px;
高さ:300px;
マージン:20px;
.fixie{ color: red;}
🎜>