Hello everyone and welcome to another Daily Dose Drupal, today we’re on Episode Number 117. Today we’re going to be going over the J Querry Select Box Module. The J Query Select Box Module basically replaces your standard select box in Drupal with a more stylable, more themeable, more CSSable select box and actually replaces the select box with some HTML that you can then easily change the style to and then of course it communicates back when you click something in this new HTML structure it selects that iem in the actual select list. It uses the plug-in that you’ll need to select the jQuery Select Box plug-in so you’ll have to go ahead and download that, you can see the installation instructions, you need the libraries module.
In the Sites All Libraries directory you’re going to need to create a directory called J Query.Select Box and you’re going to need to download the plug-in from Get Hub and then of course install the plug-in and enable the J Query Select Box Module.
So go ahead and follow those steps and once you’re there we can go ahead and get started but before we do, as always I am Shane Thomas, you can follow me on Twitter at smthomas3, you can also go to codekarate.com check out the other Daily Dose of Drupal videos and sign up for the newsletter. Today’s episode is sponsored by drupalize.me.
Drupalize.me is one of the best places to learn about Drupal so whether you’re just getting started or if you’ve been around awhile, check out their videos on Drupal, they have free videos and if you do want to sign up use the coupon code CK20FEB you get 20% off. Let’s go ahead and get started; so I have the module downloaded in the library where the J Query Select Box library dropped in as well so I’m going to come down here and turn on the J Query Select Box Module, click Save and … but before I do I’m actually going to disable it first to show you a little bit of before and after.
So I’ll go ahead and I’ll go to this Add Content and I have the Select Test Content Type with two different types to select list; a Multiple Select and a Single Select. If you look at the HTML structure it’s pretty much what you should expect, just a simple HTML element with option values, the Multiple Select is also very similar. Now let’s go ahead and turn the module and see what happens. Now the module is turned on I will come back to this page, you can see immediately it looks a little bit different so let’s take a look at the HTML Structure now.
You can see if I hover over this it says it’s a Span, it’s inside of a link and if I click on it you can see each one of these are just a link inside of that Span, well actually it’s its own link UL with allies, list items inside of that and it uses a class of selected. So what you can do here since it’s just a normal HTML list you can theme it or style it however you want and it will look the way that you wanted to.
It takes away the normal restrictions on theming and styling at traditional select box, you can also look at the multiple select as well that that is also just a list. One thing to keep in mind is you’ll notice that there’s a Select option right here and you’ll see right here it says Display None. It’s actually being hidden and you’re selections here correspond with the selections on the actual element so this over here that you’re actually clicking on is just a copy but when you make those selections it of course makes those selections on the hidden element which is the traditional select box, does the same for the single select up here.
So that’s how the Select Box Module works, it makes it easy for you to theme and style your Select Boxes however you want so it gets rid of a lot of the normal limitations so go ahead and give this module a try on your next Drupal website where you need to theme or style your Select Boxes. Thanks again to drupalize.me and the thank you for watching the Daily Dose of Drupal. See you next time.
