jQuery UI Selectmenu Widget v1.2.1 Testing

https://github.com/fnagel/jquery-ui/wiki/Selectmenu Selectmenu CSS and JS files are cached via my own server. Please use only for testing!

HTML

<link rel="stylesheet" href="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/469a76c846888e684a015d4dbda2823598f41528/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
    <br /><br /><br />
    <h2>"default popup" Style</h2>
    <fieldset>
        <label for="speedA">Select a Speed:</label>
        <select name="speedA" id="speedA">
            <option value="Slower">Slower</option>
            <option value="Slow" selected="selected">Slow</option>
            <option value="Medium">Medium</option>
            <option value="Fast">Fast</option>
            <option value="Faster">Faster</option>
        </select>
    </fieldset>
    <h2>"default popup" Style with maxHeight set and custom wrapper</h2>
    <fieldset>
        <label for="speedAa">Select a Speed:</label>
        <select name="speedAa" id="speedAa">
            <option value="Slower">-6 Slower</option>
            <option value="Slower">-5 Slower</option>
            <option value="Slower">-4 Slower</option>
            <option value="Slow">-3 Slow</option>
            <option value="Slow">-2 Slow</option>
            <option value="Slow">-1 Slow</option>
            <option value="Medium" selected="selected">0 Medium</option>
            <option value="Fast">1 Fast</option>
            <option value="Fast">2 Fast</option>
            <option value="Fast">3 Fast</option>
            <option value="Faster">4...

CSS

/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }  
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }    
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }

JavaScript

$(function(){            
    $('select#speedA').selectmenu({
        style:'popup'
    });
                
    $('select#speedAa').selectmenu({
        style:'popup', 
        maxHeight: 150,
        wrapperElement: "<div class='wrap' />"
    });
    
    $('select#speedB').selectmenu({
        style:'popup', 
        width: 300,
        format: addressFormatting
    });
    
    $('select#speedC').selectmenu();
    
    $('select#speedD').selectmenu({
        menuWidth: 400,
        format: addressFormatting
    });
    
    $('select#filesC').selectmenu({
        style:'popup', 
        positionOptions: {
            my: "left center",
            at: "right center",
            offset: "10 0"
        }
    });    
});        

//a custom format option callback
var addressFormatting = function(text){
    var newText = text;
    //array of find replaces
    var findreps = [
        {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
        {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
        {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
    ];
    
    for(var i in findreps){
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}