jQuery UI Selectmenu Widget Testing (latest)
https://github.com/fnagel/jquery-ui/wiki/Selectmenu Selectmenu CSS and JS files are cached via my own server. Please use only for testing!
by escapedcat
HTML
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<button id="btn">Show</button>
<button id="btn2">Show2</button>
<div id="dialog2" style="display:none;">fooo</div>
<div id="dialog" style="display:none;">
<div>
<select id="s1">
<option>Abcd</option>
<option>Efgh</option>
<option>Abcd</option>
<option>Efgh</option>
</select>
</div>
<div>
<select id="s2">
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
<option>Ijkl</option>
<option>Mnop</option>
<option>Abcd</option>
<option>Efgh</option>
...
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() {
$('#btn').click(showDialog);
$('select').selectmenu({ style: 'dropdown' });
function showDialog() {
$('#dialog').dialog({
modal: false,
resizable: false
});
}
$('#btn2').click(showDialog2);
function showDialog2() {
$('#dialog2').dialog({
modal: false,
resizable: false
});
}
});