3

サイトの例を使用して、Isotope.js のプラグインを ASP.NET MVC に統合する作業を行っています。（ここでは、ASP.NET Webフォームから来ています。したがって、jqueryとプラグインは初めてです。）

質問：

  1. データが HTML のネストされた DIV タグに入力されると、動作が見られません。レイアウト/ブリックをトリガーするにはどうすればよいですか? . (追加させてください。Firefox ではレンダリングが異なります。IE9 に感謝します)
  2. Javascript エラー -オブジェクトはプロパティまたはメソッド 'isotope' をサポートしていませんが、トレースすると isotope.js で定義されていることがわかります
  3. HTML リンクからレイアウト間を移動するにはどうすればよいですか?

手順 - 私が従った：

  • jsスクリプトを呼び出す/含めるために、部分ビューをセットアップしました。
  • さまざまな data-filter、フィルタリング用の css クラスを設定しました (iso サンプルから)。

  • Webページの紹介の2つのステップに基づいて、アイテムセレクター、レイアウト（以下にリストされているスクリプトは別のファイルに記載されています）のjsスクリプトを保持する単純なiso.jsを作成し、後でスクリプトをインクルード/呼び出しました

    1. Jクエリ
    2. アイソトープ

    3. CSSを設定しました

      $(function () {
    $('#container').isotope({
    itemSelector: '.element',
    layoutMode: 'fitRows' });
});

それで、他に何をする必要があるか教えてください。

  • <a>以下のようなアンカーを作成しました

    <ul id="filters" class="option-set clearfix" data-option-key="filter">
    <li><a href="#filter" data-option-value="*" class="selected">show all</a></li>
    <li><a href="#filter" data-option-value=".metal">metals</a></li>
</ul>

データは以下のとおりです - サイトから直接コピーされました。

  <div class="clickable clearfix isotope" id="container" style="position: relative; overflow: hidden; height: 1320px;">

     <div data-category="alkaline-earth" data-symbol="Mg" class="element alkaline-earth metal    width2 height2 isotope-item large" style="position: absolute; left: 0px; top: 0px; transform: translate(5px, 5px);">
     <p class="number">12</p>
     <h3 class="symbol">Mg</h3>
     <h2 class="name">Magnesium</h2>
     <p class="weight">24.305</p>
     </div>    

  <div data-category="actinoid" data-symbol="U" class="element actinoid metal inner-             transition    width2 isotope-item large" style="position: absolute; left: 0px; top: 0px; transform: translate(365px, 5px);">
  <p class="number">92</p>
  <h3 class="symbol">U</h3>
  <h2 class="name">Uranium</h2>
  <p class="weight">238.02891</p>
</div>

  </div>

それで、何が欠けているのか、一連の手順に欠けているものがあれば教えてください。

4

0 に答える 0