Skip to content

Instantly share code, notes, and snippets.

@felixzapata
Created September 22, 2012 20:24
Show Gist options
  • Save felixzapata/3767719 to your computer and use it in GitHub Desktop.
Save felixzapata/3767719 to your computer and use it in GitHub Desktop.
Demo Page for jQuery UI selectmenu
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; }
.ui-selectmenu-menu li a, .ui-selectmenu-status { padding:.405em 2.1em 0.405em 1em; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br, .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-radius:0 }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background:#fff }
.ui-selectmenu-icon { margin-top:-11px; right:3px }
.ui-icon { width:20px; height:20px }
.ui-state-default .ui-icon { background: url("img/ico_cmb.png") no-repeat 0 0; }
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Demo Page for jQuery UI selectmenu</title>
<link type="text/css" href="css/jquery.ui.theme.css" rel="stylesheet" />
<link type="text/css" href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<link type="text/css" href="css/jquery.ui.selectmenu.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.selectmenu.js"></script>
</head>
<body>
<br />
<br />
<form action="#">
<h2>"dropdown" Style</h2>
<fieldset>
<label for="speedC">Select a Speed:</label>
<select name="speedC" id="speedC">
<option value="Slower" class="whoo">Slower</option>
<option value="Slow">Slow</option>
<option value="Medium" selected="selected">Medium</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
</form>
</body>
</html>
$(function(){
$('select#speedC').selectmenu();
var ts = $('<div class="ui-button ui-widget ui-state-default ui-corner-all" style="width:1px; height:1px; padding: 1px; top: -1500em; left: 0; width: 1px; height: 1px; overflow: hidden;"></div>')
.appendTo('body') // arreglo para IE 7. No puede mandar el foco a controles ocultos
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment