3

我正在使用站点示例将 Isotope.js 的插件集成到 ASP.NET MVC 中。（这里是新手，来自 ASP.NET 网络表单。所以，我是 jquery 和插件的新手。）

问题：

  1. 将数据填充到 HTML 中的嵌套 DIV 标记后，我看不到该行为，如何触发布局/变砖？. （让我补充一下，它在 Firefox 中呈现不同，感谢 IE9）
  2. Javascript 错误 -对象不支持属性或方法 'isotope'，但是当我追踪时，我看到它在 isotope.js 中定义
  3. 如何从 html 链接在布局之间切换？

步骤 - 我遵循：

  • 我已经设置了部分视图，以调用/包含 js 脚本。
  • 我设置了各种数据过滤器、用于过滤的 css 类（来自 iso 示例）。

  • 我创建了一个简单的 iso.js，其中包含项目选择器、布局的 js 脚本（脚本在下面的单独文件中列出），基于网页介绍中的 2 个步骤，并在之后包含/调用了脚本

    1. jQuery
    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