Listex

Listex is a simple, imageless CSS styled jQuery <select> replacement plugin. It's available under the BYNCSA license and written by me, James Waples.

Demo

This boring, unstylable select...

Choose... Foo Disabled option Bar

... is magically turned into this beauty:

Choose... Foo Disabled option Bar

This is only a demonstration. Listex is easily styled to fit in with your site.

Download

The listex code is stored on Github (repo here), and can be downloaded here.

Features

• Imageless; Listex (including the arrow) is styled completely with CSS.
• Light. It's small and tries to be as unobtrusive as possible.
• Compatible: you don't need to call events on the Listex control - Listex watches the original <select> for events and changes such as:
  • Changes in disabled state for each <option>.
  • Changes in an <option>'s text.
  • Changes in an <option>'s value.

Usage

• Copy jquery.listex.js to your JS libs folder.
• Add style rules for the select box to your stylesheet.
• Include it in your script after jquery.js.
• Apply it to your select boxes with $('select.foo').listex();
  • Your selector can be whatever you like, but Listex will only apply itself to <select> tags.

Options

Below are listed the options along with defaults for Listex, along with an explanation of what each option does.

• animate: true

  Defines whether the dropdown list should slide up/down, or appear/disappear.

• animationSpeed: 200

  How fast the dropdown list should slide open and closed, providing animate is set to true.

• watch: true

  Setting watch to true (default) will tell Listex to watch the original <select> it was called on for changes in it's content so it can update the replacement markup.

• watchInterval: 500

  Specifies how long Listex should wait before polling the <select> for changes. If you have a lot of <select> tags on a page, this should be set to 2000ms or so.

Styling

The markup added by Listex is something like the following:

<div class="listex container open">
    <div class="box">
        <span class="text">Foo</span>
    </div>

    <ul class="list" style="width: 148px; display: block;">
        <li data-value="Choose...">Choose...</li>

        <li data-value="foo">Foo</li>

        <li data-value="baz" class="disabled">Disabled option</li>

        <li data-value="bar">Bar</li>
    </ul>
</div>

The CSS for the demo theme can be found on Github, but is pretty self explanatory.

When the dropdown list is open, the open class is added to .listex.container, which is useful for styling opened boxes.

The only other thing that needs noting is that disabled Listex options have the disabled class.

TODO

• Support for multiple="multiple" lists.