Tutorial - Build a tabbed search/sort filter in Drupal 7Tutorial - Build a tabbed search/sort filter in Drupal 7

Categories:

Anyone with a little experience with Views knows that you can take a list of content and expose some filters to your users so that they can limit or rearrange the list to their specifications. However, when this is done it uses a series of drop down menus and an "apply" button. While this is a powerful and built-in function, it limits our options when it comes to styling our filters as we want. What if we want our filters to be pre-rendered tabs, perhaps with an AJAX loader that will build queries as needed?

Today we're going to cover just that. This type of filter should be particularly useful for saving screen real estate in places like sidebars where maybe you don't want to list multiple categories of the same content type (most viewed content, most recent content, etc). Here we will develop both a main view filter and a sidebar block side by side. Both will not be necessary but I will use a little different visual technique and style to give you an idea of what you may want to do.

 

Setup

Required modules:
- CTools
- Views
- Quick Tabs

Download and install the required modules. Also enable the core statistics module and enable hit counts at admin/config/system/statistics.

The first thing we need to do is create various Views for our content. These will vary according to what you want to accomplish specifically, but I'm going to create filters for new content, popular content, and most commented content. Let's create a View:


My strategy is going to be to make 6 displays. The first 3 are going to use the same format settings and filter criteria. They will have different sort criteria. "Newest" posts will use Content:Post Date (desc). "Popular" posts will use Content statistics: Total views (desc) . "Most commented" posts will use Content: Comment count (desc). If you are going to paginate, I suggest using AJAX to do so because filter tabs work best if you don't have to worry about additional page loads for you user. Here are my settings for my Commented display:


I need to duplicate all 3 displays again for the block view. For these I'm going to change it up a bit. Format will be an ordered HTML list showing the Title field only. Note that even though we will be using these last 3 in a block they do not necessarily need to be a Block View. Quick Tabs moduke is going to generate a block for us, so these Views can be pages instead.


Let's go to Quick Tabs settings at admin/structure/quicktabs and "add Quicktabs instance." The first instance is going to be for the main page content. Renderer is going to be "quicktabs," style is default, Ajax is set to "yes" and then I select my 3 main Views as shown below:


Chances are if you are doing this on an actual site you can move on from here. Since I am making an additional Quick Tabs block I need to duplicate that process and select my second set of Views that I made.

Go back to the Quick Tabs setting page and go to the "Styles" tab. What you choose here is up to you but I wanted to choose a style that was close to my final product. I chose the "Excel" style as my default. My later CSS styling will override this.

Lastly, go to the block configuration page (admin/structure/block) and move your Quick Tab blocks into the desired regions. Set any visibility restrictions and then check your pages to make sure everything loaded alright.


Styling

Let's start with the easier of the 2 styles, the main page. I have to override quite a few default styles to get my desired effect. The main idea is so make a tab and slice it like this:


The main tab will be a solid color in this example. The CSS:

.quicktabs_main.quicktabs-style-excel { border-bottom:none; padding:0; }
ul.quicktabs-tabs.quicktabs-style-excel { background:url(../images/tab-bg.png) bottom repeat-x; padding:0; height:34px;}
ul.quicktabs-tabs.quicktabs-style-excel li { margin:0; padding:0; }
ul.quicktabs-tabs.quicktabs-style-excel li a { background:none; font-family:Futura, Arial; font-weight:normal; font-size:1em; line-height:1em; padding:8px 30px 12px 15px; }
ul.quicktabs-tabs.quicktabs-style-excel li.first { background:none; }
ul.quicktabs-tabs.quicktabs-style-excel li.first a { background:none; }
ul.quicktabs-tabs.quicktabs-style-excel li.last a { background:none; }
ul.quicktabs-tabs.quicktabs-style-excel li.active { background-color:#a9c2cb; background-image:url(../images/tab-active-left.png); background-position:left top; }
ul.quicktabs-tabs.quicktabs-style-excel li.first.active { background-color:#a9c2cb; background-image:url(../images/tab-active-left.png); background-position:left top; }
ul.quicktabs-tabs.quicktabs-style-excel li.last.active { background-color:#a9c2cb; background-image:url(../images/tab-active-left.png); background-position:left top; }
ul.quicktabs-tabs.quicktabs-style-excel li.active a { background:url(../images/tab-active-right.png) right top no-repeat; color:#ffffff; text-shadow:-1px -1px 0px #7699a6; }
ul.quicktabs-tabs.quicktabs-style-excel li.last.active a { background:url(../images/tab-active-right.png) right top no-repeat; }

 

When all is said and done here is my styling:

 
One issue I had styling with AJAX enabled is that when you switch to a new tab that AJAX load indicator (a small blue spinning disc) seems to be part of the tab link. Thus any background gets extended below the intended area which looks weird. Because I am testing in a local environment the transition happens so fast I am unable to inspect the element to see how to correct it. It literally was just a flash on my screen. If you're doing the real deal on a production site you might want to consider looking into the module code or contacting the module developer to see what the class is that you need to target to get around this.



Now onto the block. I had an amazingly difficult time getting the styling to work appropriately with the tab overlap. The way the original Excel style does it is by using a negative margin. I still could not get mine to look right after a few hours of work. I abandoned that process and started to improvise. I ended up with a much simpler solution that uses a negative margin to overlap the tabs while using z-index to make the active tab float on top of the others. My code:

 

.region-sidebar .quicktabs_main.quicktabs-style-excel { background:#ffffff; padding:20px; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel { background:none; height:29px; margin-left:10px; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel li { background:url(../images/tab-side-inactive-right.png) right top no-repeat; z-index:100; position:relative; margin:0 0 0 -10px; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel li a { background:url(../images/tab-side-inactive-left.png) left top no-repeat; padding:6px 30px 9px 15px; color:#ffffff; text-shadow:-1px -1px 0px #7699a6; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel li.active { background:url(../images/tab-side-active-right.png) right top no-repeat; z-index:199; position:relative; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel li.active a { background:url(../images/tab-side-active-left.png) left top no-repeat; color:#000000; text-shadow:none; }
.region-sidebar ul.quicktabs-tabs.quicktabs-style-excel li.last.active { background:url(../images/tab-side-active-right-last.png) right top no-repeat; }

.region-sidebar .views-row { padding:20px 0; border-bottom:1px solid #d7e4e9; font-style:italic; }
.region-sidebar .views-row-first { padding-top:0; }
.region-sidebar .views-row-last { border-bottom:none; padding-bottom:0; }
.region-sidebar .views-row a { color:#779dab; }
.region-sidebar ol { margin:0; padding:0; list-style:upper-roman inside; }
.region-sidebar ol .views-field { display:inline; }

 
I was pleased with my results:


And proof that is works with all 3 tabs:


I hope this gives you some ideas of the options you get using Views and Quick Tabs. They are a powerful combination that makes your site really easy to use. Cheers!

Need a Custom Designed Theme?

If you need a custom designed theme for your business then our designers can work with you to create a unique concept that is consistent with your brand, clearly communicates your value proposition and helps you achieve your goals. >> Click here to contact us and let us know about your needs and we'll analyze and provide you with an estimate for designing and development your custom theme.