JQuery Narrative Select Plugin by gdakram

From

If this is , then you are .
Date:

To

If this is , then you are .
Date:

Why, When

Make your drop-down list look uniform cross-platform.
Enables you to include a drop-down list as part of a 'narrative' form, where your user input fields look uniform.

How

  <!-- CSS -->
  <style type="text/css">
    @import url("/path/to/jquery.narrativeselect/jquery.narrativeselect.css");
  </style>    
  <!-- JS -->
  <script type="text/javascript" src="/path/to/jquery.latest.js"></script> 
  <script type="text/javascript" src="/path/to/jquery.narrativeselect.min.js"></script> 
  <script type="text/javascript">
  //--<![CDATA[
    $("select").narrativeselect();
  //--]]>  
  </script>

Customization

CSS

Edit jquery.narrativeselect.css file however which way floats your boat!

Javascript

            
  <script type="text/javascript">
  //--<![CDATA[
    $("select").narrativeselect({
      tooltip_opacity : 0.80, // defaults to 0.90
      tooltip_max_height : 300, // defaults to 200, in px.
    });
  //--]]>  
  </script>

Don't want it anymore? :'(

  <!-- JS -->
  <script type="text/javascript">
  //--<![CDATA[
    $("select").narrativeselect("destroy");
  //--]]>  
  </script>

To Do (Current Limitations)

Doesn't work with "multiple='multiple'" select elements. Yet.
No key-stroke event handler for searching through the "option" elements.

License

MIT License

Author/Contact

Shahrier Akram (shahrier.akram@gmail.com)

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/gdakram/jquery-narrative-select.git

get the source code on GitHub : gdakram/jquery-narrative-select