0

この質問の背後にある前提は、デザイナーがレスポンシブ Web デザインでプロポーショナル クエリを使用しており、スマートフォンの 1 列からディスプレイの 2 列および 3 列に快適に収まる場所に移動していることです。

コンテンツ ウィジェット jQuery プラグイン (最近の更新ウィジェットなど) は、さまざまなレイアウトでその特性を変更する必要があります。1 列のレイアウトでは 4 つの小さなテキスト リンクが必要になる場合があり、2 列または 3 列のレイアウトではサムネイルと追加のテキストを含めることができます。

参考までに、コンテンツ ウィジェットのエンド ユーザーに表示されるコードを次に示します。

HTML:

<section id="sidebar">
  <section id="latestupdates"></section>
</section>

JS:

(function($){
  $(function(){
    $("#latestupdates").widgetco_latestupdates();
  });
})(jQuery);

デザイナーのレイアウト変更をフックする最良の方法はこれだと思います。初期化中に widgetco_latestupdates のパラメーターとしてブレークポイントを要求し、サイズ変更イベントを使用して css クラスを切り替えます。

これは正しい方法ですか？これを行う際の落とし穴は何ですか？

アップデート：

質問して以来、クエリの実行を処理するenquire.jsを見つけました。それでも、これが正しい方法なのかという疑問が残ります。

4

1 に答える 1

0

コンテンツに割り当てるクラスに注意すれば、標準の CSS ですべてを制御できる可能性があります。

たとえば、デスクトップの出力が次のようなものだったとします。 

<article>
<h1> Update heading </h1>
<img src="..">
<p class="intro"> Intro text ... </p>
<p class="full-text"> Full text here </p>
<a href="#" class="read-more">read more</a>
</article>

次に、CSS で、どのデバイスにどのコンテンツを表示するかを管理します 

@media screen and (max-width: 480px){
/* for smartphones */
article img, p.intro{
display:none;
}
}


@media screen and (min-width: 481px) and (max-width: 800px){
/* for tablets */
p.full-text{
display:none;
}
}

CSS を使用してさまざまなレイアウトを管理できるようになれば、より柔軟で、今後の更新が容易になると思います。

幸運を！

編集

訪問者のビューポートに基づいてコンテンツを追加/削除する ajax について考えている場合は、次の 2 つの興味深いリンクを参照してください。

http://filamentgroup.com/lab/ajax_includes_modular_content/

Github のプロジェクト

于 2013-06-10T13:30:00.490 に答える