Wie entfernen Sie abgerundete Ecken von einem jQuery UI-Widget, aber nicht von den anderen?

Question

Mein besonderes Problem ist, dass ich möchte, dass die Autocomplete-Funktion keine runden Ecken hat, sondern alle anderen Widgets, die runde Ecken haben sollten.
Gibt es einen Parameter, den ich weitergeben kann, um die Ecken nur für die automatische Vervollständigung zu deaktivieren?

bearbeiten

Mal sehen, ob diese beantwortet werden können.

Auf Seite Datepicker.

Ich möchte alle Runde-Ecke-Klassen aus dem Erscheinen entfernen (die Kopfzeile und die nächsten vorherigen Schaltflächen).

$("#datepicker").datepicker('widget').removeClass('ui-corner-all'); würde nicht funktionieren.

Answer 1

Erstellen Sie eine neue CSS-Klasse für das Element, für das keine abgerundeten Ecken gewünscht werden.

p.rounded { border-radius: 10px; } 

p.none-rounded { border-radius: 0; }

Answer 2

Sehr spät, aber hier geht es:

jQuery UI-Widgets haben eine Methode, die für das Widget selbst den HTML-Knoten zurückgibt. So wäre die Antwort:

$('#someinput').autocomplete(...).autocomplete('widget').removeClass('ui-corner-all'); 

in den EDIT-Reaktion:

Was kann ich sehen, müssen Sie es an die Kette widget() Methode mit autocomplete() (oder datepicker()) Methode zu arbeiten. Es scheint, als ob es nicht für reguläre HTML-Knoten funktioniert, die von $() zurückgegeben werden.

Answer 3

zuweisen Sie diese CSS-Klasse dem Element mit den Ecken Ihres Widgets.

.ui-corner-flat { 
    border-top-left-radius: 0px !important; 
    border-top-right-radius: 0px !important; 
    border-bottom-left-radius: 0px !important; 
    border-bottom-right-radius: 0px !important; 
} 

$("#elementwithcorners").addClass("ui-corner-flat"); 

Answer 4

den links unten Radius

im Konstruktor entfernen Ich tat dies

$("#signup").dialog(
     { 
      create: function (event, ui) { 

       $(".ui-dialog").css('border-bottom-left-radius','0px'); 
      }, 

     } 
    ); 

Answer 5

Die _suggest() Methode der automatischen Vervollständigung Widget ruft menu.refresh(), und daher setzt die ui-corner-all Klasse für Menüpunkte, usw., jedes Mal, wenn sich der Eingang ändert. Allerdings ist der open() Rückruf nach jedem menu.refresh() Anruf innerhalb _suggest() genannt, und so ist ein sinnvoller Ort, um Klassen wie gewünscht einstellen:

$("#autocomplete").autocomplete("option", { 
    open: function(event, ui) { 
    $(this).autocomplete("widget") 
      .menu("widget").removeClass("ui-corner-all") 
      .find(".ui-corner-all").removeClass("ui-corner-all"); 
    } 
}); 

Der Datumsauswahl-Widget ein wenig härter ist, als es gebaut ist irgendwie ein halb zu sein -singleton. Hier brauchen wir einen Affen-Patch es konsequent zu tun, da keiner der Rückruf gelieferten Optionen geeignet ist:

// store the built-in update method on the "global" instance... 
$.datepicker.__updateDatepicker = $.datepicker._updateDatepicker; 
// ...and then clobber with our fix 
$.datepicker._updateDatepicker = function(inst) { 
    $.datepicker.__updateDatepicker(inst); 
    inst.dpDiv.removeClass("ui-corner-all") 
     .find(".ui-corner-all").removeClass("ui-corner-all"); 
}; 

Beachten Sie, dass die Standard-_updateDatepicker() Implementierung keinen Rückgabewert hat.Beachten Sie auch, dass die _updateDatepicker()-Methode nicht eine Schnittstellenmethode ist, daher sollte nicht davon ausgegangen werden, dass sie verfügbar sind. Als solches ist der konsequenteste Weg, um die Ecke fix zu erreichen, ist mit entsprechendem CSS, entlang der Linien von:

.ui-autocomplete.ui-menu.ui-corner-all, 
.ui-autocomplete.ui-menu .ui-menu-item > a.ui-corner-all, 
.ui-datepicker.ui-corner-all, 
.ui-datepicker-header.ui-corner-all, 
.ui-datepicker-next.ui-corner-all, 
.ui-datepicker-prev.ui-corner-all { 
    border-radius: 0; 
} 

Mehr Spezifität (oder der !important Richtlinie) verwendet werden, kann diese Wähler eingehalten werden, um sicherzustellen. Dies ist genau der Grund, warum jQuery theme-Klassen verwendet – diese Dinge in einem interessanten Hack fudging, aber es ist die weniger saubere Option, es sei denn Stil ist nicht verfügbar und hellip;