<script src="../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
+ .ui-combobox {
+ position: relative;
+ display: inline-block;
+ }
.ui-button {
+ position: absolute;
+ top: 0;
+ bottom: 0;
margin-left: -1px;
+ padding: 0;
+ /* adjust styles for IE 6/7 */
+ *height: 1.7em;
+ *top: 0.1em;
}
- .ui-button-icon-only .ui-button-text {
- padding: 0.35em;
- }
.ui-autocomplete-input {
margin: 0;
- padding: 0.4em 0 0.4em 0.45em;
+ padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( "ui.combobox", {
_create: function() {
- var that = this,
+ var input,
+ that = this,
select = this.element.hide(),
selected = select.children( ":selected" ),
- value = selected.val() ? selected.text() : "";
+ value = selected.val() ? selected.text() : "",
+ wrapper = $( "<span>" )
+ .addClass( "ui-combobox" )
+ .insertAfter( select );
function removeIfInvalid(element) {
var value = $( element ).val(),
}
}
- var input = this.input = $( "<input>" )
- .insertAfter( select )
+ input = $( "<input>" )
+ .appendTo( wrapper )
.val( value )
.attr( "title", "" )
+ .addClass( "ui-state-default" )
.autocomplete({
delay: 0,
minLength: 0,
.appendTo( ul );
};
- this.button = $( "<button type='button'> </button>" )
+ $( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
- .insertAfter( input )
+ .appendTo( wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
destroy: function() {
- this.input.remove();
- this.button.remove();
+ this.wrapper.remove();
this.element.show();
$.Widget.prototype.destroy.call( this );
}
</script>
</head>
<body>
-
+
<div class="demo">
<div class="ui-widget">
projects / jquery-ui.git / commitdiff