content_javascript スキルを自動的に埋めるための Fixie.js プラグイン-jsチュートリアル-php.cn

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` と同様に、いくつかの単語のテキストを追加します。 - `

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

ヒント デフォルトの画像パディングを変更します `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;} 🎜> で確認してください。--ここで接続が埋められますが、外部 P タグは埋められません。空ではないため空になります。 ソースを表示することを忘れないでください。

セクション class="fixie">

; // デフォルトの画像ソースを Flickr に変更します fixie.setImagePlaceholder('http://flickholdr.com/${w}/${h}/fixie') ();

ディスプレイ効果

著者: Xishan