webentwicklung-frage-antwort-db.com.de

Einstellen der Größe und Position von Jquery Das Datumsauswahl-Kalendersymbol wird ausgelöst

ich verwende jquery date picker das kalendersymbol auslösendes bild in der nähe von textbox ist standardmäßig oben. ich möchte die bildgröße (höhe) wie textboxhöhe einstellen. Bitte geben sie mir ein paar vorschlägemy code ist

$(#textbox1).datepicker({
    showOn: "button",
    buttonImage: "calendar_1.png",
    buttonImageOnly: true
)};
22
UMAIR ALI

Beim Überprüfen des Elements mit firebug habe ich Folgendes erhalten:

<img class="ui-datepicker-trigger" src="http://xxxxx/officeprime/assets/img/calendar.gif" alt="..." title="..."/>

Sie können dann mit dieser CSS-Klasse ui-datepicker-trigger arbeiten.

29
Gerep

Fügen Sie Ihrer Seite benutzerdefiniertes CSS hinzu

<style>
.ui-datepicker-trigger { position:relative;top:{}px ;right:{}px ; height:{}px }
 /* {} is the value according to your need */
</style>
27
diEcho

Sie können den .ui-datepicker-Trigger der Klasse mit jQuery bearbeiten, es ist jedoch wichtig, dass Sie die Bearbeitung nach der Datums-Picker-Funktion vornehmen.

Beispiel:

$(#textbox1).datepicker({
        showOn: "button",
        buttonImage: "calendar_1.png",
        buttonImageOnly: true )};

$(".ui-datepicker-trigger").css("margin-bottom","-6px");
11
Adnan Mulalic

Nichts davon funktionierte für mich. Es scheint, dass jQuery die height -Eigenschaft der Bildschaltfläche beim Verlassen der ready-Funktion festlegt. Wenn Sie also versuchen, die height -Eigenschaft in der ready-Funktion festzulegen, wird diese mit 26px überschrieben. Also habe ich eine separate Funktion erstellt, die im onload-Ereignis des body-Tags ausgeführt wird. Es aktualisiert die Höhe-Eigenschaft der Schaltfläche so, wie ich es möchte:

// sample jQuery datepicker button tag: <img style="margin: 0px; padding: 2px; height: 26px; vertical-align: bottom;" class="ui-datepicker-trigger" >
var oDateCell = oTableRow.cells[2];
var sDateCellHTML = oDateCell.innerHTML;
var sRevisedHTML = sDateCellHTML.replace("height: 26px;", "height: 13px;");
oDateCell.innerHTML = sRevisedHTML;

Ich habe weiter daran gearbeitet und festgestellt, dass der obige Code einen Fehler enthält. Das Click-Ereignis schlägt fehl und der Kalender wird nicht angezeigt, wenn Sie auf das Bild klicken. Ich weiß nicht warum, aber ich habe einen besseren Weg gefunden, der funktioniert. Die obige Methode war eine klobige (faul?) Art, den Stil zu ändern. Der richtige Weg ist wie folgt:

            var oTableRow = oTable.rows[iRow];
            if (oTableRow.cells.length > 2)
            {
                var oDateCell = oTableRow.cells[2];
                if (oDateCell.childNodes.length > 1)
                {
                    var oImage = oDateCell.childNodes[1];
                    oImage.style.height = "13px";
                }
            }
1
Dallas Steve

Wenden Sie dieses CSS an:

.ui-datepicker-trigger {
   position: absolute;
}
0
Ronak Patel

Wenn Sie Ihr eigenes personalisiertes Bild für das Kalendersymbol verwenden, können Sie das Bild einfach in der gewünschten Größe erstellen. In meinem Fall war die Höhe meines Eingabefelds 24px und die Symbolgröße 16X16. Ich habe gerade die Größe des Bildes bearbeitet und es 24X24 gemacht, und das Problem wurde gelöst.

0