客戶端字母多列（列表）排序和過濾

我有一個非常大的「服務」的索引，我試圖使其用戶友好。客戶端字母多列（列表）排序和過濾

當前顯示是四列（4名無序列表，此刻），其顯示按字母順序從上到下，然後從左到右像這樣：

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

這些列表內置於C＃代碼的後面，那麼BulletedList控件將在頁面加載時附加到包含Panel控件。

項目數量已經變得足夠大，我們希望利用過濾功能爲＃A B C D ...等頂部列出一個列表，並且當您單擊它時，它將過濾結果。我們希望使用JavaScript來實現這一點，並避免發回帖子。

我最初的想法是讓JavaScript（jQuery）只需.show（）和.hide（）那些必要的，但對於目前的無序列表排列，我正在努力如何實現這一點，並保持字母佈局。

例如，使用上述四個無序列表例如，過濾對於A將導致僅此：

Ab 
Ac 
Af

代替跨各列跨越。

進一步思考，我考慮使用單個無序列表，並讓列表項向左浮動以輕鬆跨越屏幕然後向下 - 但我遇到的問題是首先按字母順序排序然後跨過，因爲它先分類然後分類。

此外，使用float left方法會導致跨越兩行的任何鏈接導致整個行中的所有鏈接出現額外的換行符，從而導致奇怪的空白。

我意識到這是相當長的囉嗦和具體問題，但任何幫助如何完成這與代碼，HTML/CSS格式，或建議更好的方式做到這一點非常感謝！感謝您花時間閱讀這個問題。

來源

2013-07-18 Jeremy

看來非常奇怪（從UX的角度來看），其你會水平安排物品，但要垂直排列。無論如何，我不確定使用標記很容易（甚至可能） - 我可能會使用JQuery方法，每次過濾器更改時都會生成標記。 – McGarnagle

@McGarnagle我原本是按字母順序從左到右排列的，但是當一些項目跨越兩行時，我的主管並不喜歡這些項目不完全排成隊列（他們錯開了一些），這是可以理解的。也許我們之前看到的左側浮動列表項目的「缺口」實際上可以用來保持它們排列整齊。 – Jeremy

如果他們需要排隊，那麼爲什麼不使用表？可以讓事情變得更輕鬆。 – McGarnagle

這聽起來像你可能想要使用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 ECT什麼。

然後用同位素進行排序

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-18 20:16:47

這個答案太棒了。感謝一堆詳細和有用的答案！ – Jeremy

沒問題，如果你有問題讓我知道 –

客戶端字母多列（列表）排序和過濾

回答

相關問題