1

我有一个很大的“服务”索引，我正在努力使它对用户友好。

当前显示是四列（目前是四个无序列表），按字母顺序从上到下显示，然后从左到右显示，如下所示：

Ab      Be      Co      En
Ac      Ce      De      Fa
Af      Ci      Ef      Gu

这些列表在后面的 C# 代码中构建，然后在页面加载时将 BulletedList 控件附加到包含 Panel 控件。

项目的数量已经变得足够大，我们想要使用过滤，在顶部列出 #ABC D... 等，当您单击它时，它将过滤结果。我们希望使用 JavaScript 来实现这一点，并避免回发。

我最初的想法是让 JavaScript (jQuery) 简单地 .show() 和 .hide() 成为必要的，但是对于当前的无序列表排列，我正在努力实现这一点并保持字母布局。

例如，使用上面的四个无序列表示例，过滤 A 将导致以下结果：

Ab
Ac
Af

而不是跨越列。

进一步考虑，我考虑使用单个无序列表并让列表项向左浮动以轻松跨越屏幕然后向下 - 但我遇到的问题是先按字母顺序向下排序，然后再交叉，因为它首先排序然后下来。

此外，使用 float left 方法会导致跨越两行的任何链接导致跨行的所有链接出现额外的换行符，从而导致奇怪的间隙。

我意识到这是一个相当冗长和具体的问题，但是对于如何使用代码、html/css 格式或更好的方法来完成此操作的任何帮助，我们将不胜感激！感谢您花时间阅读问题。

4

1 回答 1

2

听起来您可能想使用其中一个 jquery 组合插件。

这是一个例子：http ://webdesigntunes.com/coding/jquery-filterable-portfolio/

您创建一些带有与您想要排序的类匹配的类标记的 html

<nav class="primary clearfix">
    <ul>
        <li><a href="#" class="selected" data-filter="*">All</a></li>
        <li><a href="#" data-filter=".web">Web Design</a></li>
        <li><a href="#" data-filter=".ill">Ilustration</a></li>
        <li><a href="#" data-filter=".logo">Logo</a></li>
        <li><a href="#" data-filter=".video">Video</a></li>
        <li><a href="#" data-filter=".print">Print Design</a></li>
    </ul>
</nav>

<section class="main">

            <div class="portfolio">

                <article class="entry video">
                    <a data-rel="prettyPhoto" href="http://vimeo.com/34266952">
                    <img src="images/portfolio/work1.jpg" alt="">
                    <span class="video-hover"></span>
                    </a>
                </article>

                <article class="entry web">
                    <a data-rel="prettyPhoto" href="images/portfolio/work2.jpg">
                    <img src="images/portfolio/work2.jpg" alt="">
                    <span class="magnifier"></span>
                    </a>
                </article>
</section>

应用一些 .css 等。

然后使用同位素进行排序

 var $container = $('.portfolio');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
    });

    $('nav.primary ul a').click(function(){
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false,
            }
        });
      return false;
    });

    var $optionSets = $('nav.primary ul'),
           $optionLinks = $optionSets.find('a');

           $optionLinks.click(function(){
              var $this = $(this);
          // don't proceed if already selected
          if ( $this.hasClass('selected') ) {
              return false;
          }
       var $optionSet = $this.parents('nav.primary ul');
       $optionSet.find('.selected').removeClass('selected');
       $this.addClass('selected');
    });

查看演示，看看这是否是您所需要的：http ://webdesigntunes.com/tutorial/filterable/

http://isotope.metafizzy.co/

于 2013-07-18T20:16:47.427 回答