javascript - 複数の要素をリンクして同じコンテンツを共有する

Question

同じコンテンツを共有する 2 つの要素を持つことは可能ですか?

----------
| Line 1 |
| Line 2 |
| Line 3 |
----------
    [SOME OTHETR STUFF HERE]
----------
| Line 4 |
| Line 5 |
| Line 6 |
----------

または、 css3 列を使用したより複雑な例

------------------- --------- --------------------------------
| Line 1 | Line 4 |   OTHER   |    Line 7    |    Line 10    |
| Line 2 | Line 5 |   STUFF   |    Line 8    |    Line 11    |
| Line 3 | Line 6 |   HERE    |    Line 9    |    Line 12    |
------------------- --------- --------------------------------

これが理にかなっていると思いますか？

また、差分 div は、差分の幅、高さ、列、およびスタイルで設定できます。

ご意見をいただきありがとうございます。

---

詳しく説明しようとしています：

2 つのテキスト フィールドを作成してリンクし、テキストが最初のテキスト フィールドから次のテキスト フィールドに続くようにすることができる inDesign のようなプログラムを知っている人がいる場合。また、別のコレクションをリンクすることもできます。テキストが十分に長い場合は、テキスト フィールド 1 から 2 番目に移動し、最後に最後に移動します。

これらのボックスは画面のいたるところに配置でき、それらが一緒にできる唯一のことは、同じコンテンツを共有することです。

Box 1
------------------------------
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
Proin rutrum ligula nec quam 
molestie sed rutrum justo 
------------------------------

Box 2 
------------------------------ 
auctor. Quisque pulvinar diam 
nisl. Curabitur porttitor 
vehicula dui. Sed tempus 
venenatis est, non egestas 
------------------------------

Box 3
------------------------------ 
urna consequat a. Morbi diam 
mi, fermentum non lobortis 
eget, rhoncus id arcu. 

------------------------------ 

Answer 1

元の に基づいて、高さが行の高さの倍数ではないことと、幅が異なることの両方を処理するソリューションを次に示します。

jQuery(function($) {
  var content = $(".c1").html(),
      $elems = $("div").empty(),
      lineHeight = 20,
      offset = 0,
      wholeThing = $("<div />"),
      maxWidth = 0;
  $elems.each(function() { maxWidth = Math.max(maxWidth, $(this).width()); });

  $elems.each(function() { 
    var thisWidth = $(this).width(),
        thisHeight = $(this).height(),
        floatHeight = (thisHeight / lineHeight | 0) * lineHeight;

    wholeThing.append($("<div />").css({
      width: maxWidth - thisWidth,
      height: floatHeight,
      clear: "right",
      float: "right"}));
    if (thisHeight % lineHeight) {
        wholeThing.append($("<div />").css({
          width: maxWidth,
          height: thisHeight - floatHeight,
          clear: "right",
          float: "right"}));
      });
    }

  wholeThing.css("width", maxWidth).append(content);

  $elems.each(function() {

    var $content = wholeThing.clone().appendTo(this);

    $content.css({
      position: "absolute",
      left: 0,
      top: -offset
    });

    offset += $(this).height();
  });
});

これはあなたが取ったのと同じアプローチですが、さらに一歩進んでいます。フルテキストで を作成divし、それらをターゲット div 内に配置し、「チェーン」内の以前のすべてのコンテナーの高さを合わせた分だけ上にシフトしました。

私が追加したのはこれでした：

• コンテンツdiv( と呼ばれwholeThing、最終的に乗算されて各コンテナーに追加されるもの) の幅は、すべてのコンテナーの中で最大の幅に設定されます。

• の右側に沿って、適切な幅に従ってテキストが折り返されるようにするedwholeThingを配置します。この例では、最初のコンテナーの幅は 200 ピクセルで、最大幅 (したがって の幅) は 300px です。したがって、幅が 100 ピクセルで、高さが最初のコンテナーと同じ (行の高さの倍数に切り捨てられる) のedを右端に配置します。これにより、「幅が異なる」問題が解決されます。floatdivswholeThingfloatdiv

• その後、divの高さが行の高さの倍数ではないことを前提として、行の高さの問題を解決するために、下部に半分の行がないことを確認するために余分な全幅浮動小数点数を追加します。

このバグにより、「行の高さの倍数に切り捨てる」ということは、一部の Webkit ブラウザーにのみ適用されます。これは Chrome では修正されたようですが、他のブラウザー (特に Safari 5 と Android ブラウザー) ではまだ見られます。

この問題が存在しない場合は、代わりに、幅の制約divをコンテナーの高さ全体に設定し (四捨五入せず)、全幅のdiv高さを常に 1 にすることができます (インクリメント時に余分なピクセルを考慮しますoffset) 。 . これには、行の高さを固定する必要がないという素晴らしい利点があります。以下に例を示します。Chrome、Firefox、Opera、および IE9+ では機能しますが、上記の Webkit ブラウザーでは機能しません。私の最初のバージョン (Safari で動作するもの) が IE8 で動作しないため、理由はよくわかりませんが、IE8 でも動作するようです。正直に言うと、ここでは IE8 にあまり時間をかけませんでした。

したがって、最上位バージョンは IE9+ で動作し、その他のすべてのブラウザーでも多かれ少なかれ動作するはずです。

列に関する限り、それが起こっていることはわかりません (本質的に div で列を再構築する以外に)。

Answer 2

男、あなたはCSS Regionsについて話していると思います。これは非常に優れた機能ですが、ブラウザーのサポートはまだ完全ではありません。

Answer 3

最初のレイアウトはCSSのみで実現できる場合があります（JavaScriptやサポートされていないプロパティはありません）。ただし、ボックスのサイズを正確に設定できない場合があります。結局、ブラウザが設定するまで、ボックスのサイズを偽造します。

フィドルに飛び込んでみましょう。サイズを変更するなどして、どのように機能するかを確認してください。

基本的に、私たちは動作に依存していますfloat。このどこでもサポートされている、頻繁に悪用されるプロパティは、元々、画像の周りを流れる段落テキスト用に構築されました。これで、何でもフロートさせることができるので、ここで他のコンテンツをフロートさせます。CSSの残りの部分は純粋なトリックです-フロートされたコンテンツをコンテナの一部ではないように見せるためです。実際には、一般的な偽の列とは異なり、「偽のコンテンツブロック」アプローチを好む場合があります。

1つの問題は、コンテンツが途切れる場所を制御できないことです。区切り文字をテキストに直接挿入する必要があります。ただし、コンテナの幅が固定されている場合は、十分な精度でサーバー側にセパレータを挿入できる場合があります（分割するテキストの半行以内）。

最後に、コードは次のとおりです。

.container {
    padding:10px;
    border:1px solid black;
    background: #ccc;
    text-align:justify;
}
.other-stuff {
    float:left;
    height:130px;
    width:100%;
    border-top:1px solid black;
    border-bottom:1px solid black;
    /*left and right margins are so negative to "cover up" .container border*/
    margin:10px -11px;
    /*and now padding to offset left and right negative margins*/
    padding:0 11px;
    /*pretend this is see-through*/
    background:#fff;
}

マークアップは非常にシンプルです。.other-stuff内部は.container、どちらも適切な量のダミーコンテンツで埋められています。出来上がり、テキストがうまく折り返されていることに注目してください。

column-gap偽の背景で役立つ可能性がある場合を除いて、css3列で偽造しようとしても運がありません（つまり、コンテナーを2つの列に分割し、ギャップをセパレーターの内容と同じくらい広くします）。

注意：この種のコンテンツレイアウトの調整にJSを使用することは避けてください。スタイルが設定されていないコンテンツが、直前にフラッシュされる可能性があります。ただし、コンテンツがAJAXを使用して非同期に取得される場合は、JSを使用するのが適切です。これにより、ページに追加される前にコンテンツを処理できます。

Answer 4

私が今思いつくことができる最高のものは: http://jsbin.com/iretip/3/edit

これは、次の場合にのみ機能します。

• 要素の高さ係数 line-height はゼロに等しい,
• すべての要素が同じ幅を共有する
• 乗算列では機能しません。

コードは以下に掲載されており、デモは次の場所にあります。

  <div class="c1 c">
    Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br />Line 7<br />Line 8<br />Line 9<br />Line 10<br />Line 11<br />Line 12<br />Line 13<br />Line 14<br />Line 15<br />Line 16<br />Line 17<br />Line 18<br />Line 19<br />Line 20<br />Line 21<br />
  </div>
  <div class="c2 c"></div>
  <div class="c3 c"></div>

CSS:

.c {
  position: relative;
  line-height: 20px;
  overflow: hidden;
  width: 160px;
}

.c1 {
  height: 200px;
  background: yellow;
}
.c2 {
  position: absolute;
  top: 300px;
  height: 140px;
  background: blue;
}
.c3 {
  position: absolute;
  top: 300px;
  left: 200px;
  height: 200px;
  background: red;
}

そして JavaScript:

jQuery(function($) {
  var content = $(".c1").html(),
      $elems = $("div").empty(),
      lineHeight = 20,
      offset = 0;

  $elems.each(function() {
    var $wrapper = $("<div/>").appendTo(this),
        $content = $("<div/>").html(content).appendTo($wrapper);

    $wrapper.css({
      position: "absolute",
      left: 0,
      top: -offset
    });

    offset += $(this).height();
  });
});

Answer 5

これは単純な JS を使用したものです。http://jsfiddle.net/wesleyhales/vsD3m/

HTML:

<div id="input">Line 1
Line 2
Line 3
Line 4</div>

<div id="box1">  
</div>
<hr/>
My content... more content.. and more content
<hr/>
<div id="box2">  
</div>

JS:

var myinput = document.getElementById('input').innerHTML;
var threshhold = 2;
var totalLines = myinput.split('\n');
for(var i = 0; i < totalLines.length; i++){
    if(i < threshhold){
       document.getElementById('box1').innerHTML += totalLines[i] + '\n'; 
    }else{
       document.getElementById('box2').innerHTML += totalLines[i] + '\n';  
    }    
} 

全体として、すべての行を含むソース入力が必要です。次に、各ボックスのしきい値が必要です。その中に何行必要ですか? （または、ボックスの高さや行内の文字などのベースしきい値）。次に、各しきい値が満たされたときに配布するターゲットが必要です。

これが CSS で利用できる場合、事前に多くのセットアップが必要になりますが、それでもクールです。

Answer 6

これは、読み取りバッファの問題とほとんど同じです (つまり、大量のテキストを読み取り、バッファロードごとにバッファロードし、それを他の単位 (プレーンテキストの場合は行) に解析します)。データと表示コードの間のバッファリング層が役立ちます。（申し訳ありませんが、コード例はありません。）