✔ jQuery: CSS-Klassen für resizable

[TIMS_Ralf]

Hallo,
ich möchte via jQuery mit der Maus ein DIV beliebig vergrößeren / verkleinern, nutze dazu bislang standardmäßig:

.myDIV /* DIV = Box, die vergrößert / verkleinert werden soll  */
{
    position:absolute;
    width:400px;
    height:300px;
    padding:6px;
    border-radius:20px;
    background:#F3FAEA;
}

/* Handles für resize */
.ui-resizable-handle
{
position: absolute;
margin:0;
padding:0;
width: 20px;
height: 20px;
border:0;
}

.ui-resizable-se /* DIV für handler unten rechts = beliebiges vergrößern / verkleinern */
{
bottom: 0;
right:  0;
cursor: se-resize;
}

$('.myDIV').resizable(
{
handles:
{
  'se': '.ui-resizable-se',
}
});

Funktioniert soweit.
Sobald ich aber für den Handles "ui-resizable-se" / ".ui-resizable-handle" eine eigene CSS-Klasse vergebe und im Script das handle anpasse, geht nichts mehr . Bin ich auf die Klassen von jQuery zwingend angewiesen oder wie kann ich die CSS-Klassen der Handles selbst bestimmen (ohne an jQuery rumzubasteln)?
Letzendlich möchte ich via CSS optisch verschiedene handle-DIVs anlegen können...

Danke Euch vorab!
Grauß Ralf

 

[Sempervivum]

Das steht in der Doku:

Note: When generating your own handles, each handle must have the ui-resizable-handle class, as well as the appropriate ui-resizable-{direction} class, .e.g., ui-resizable-s.

Anscheinend geht es also nicht ohne diese Klassen. Wenn es aber nur um die Gestaltung geht, kannst Du doch einfach zusätzliche Klassen zuweisen und diese benutzen.

 

[TIMS_Ralf]

Hallo - und danke erstmal,
ja, das ginge natürlich, aber im handle-DIV stehen schon die 2 ui-Klassen. Hatte auch schon versucht, die beiden Klassen zusammen zupacken... Eine dritte ist noch weniger elegant, aber scheint ja nicht anders zu gehen.

Danke auch für die Mühe in der Doku-Suche
Grüße, Ralf

 

[TIMS_Ralf]

Nachtrag / "elegantere" Lösung:

die CSS-Klassen "ui-resizable-handle" / ".ui-resizable-se" (....) braucht jQuery, allerdings können die auch leer bleiben. Wie Sempervivum geschrieben hat, kann an das handle-DIV eine 3. CSS-Klasse drangehängt werden, die alle Einstellungen enthält - also auch jene von "ui-resizable-handle" / ".ui-resizable-se" (....).

Im FF, Chrome, Opera und sogar im IE11 sowie auf Android läufts - Beispiel:

.Resize-DIV-Handle-SE
{
position: absolute;
bottom: 0;
right:  0;
margin:0;
padding:0;
width: 20px;
height: 20px;
border:0;
background:red;
cursor: se-resize;
}

.ui-resizable-handle
{
}

.ui-resizable-se
{
}

 $('.myDIV').resizable(
{
  handles:
  {
   'se': '.ui-resizable-se'
  // weitere Handles, falls gewünscht
  }
});

<DIV
CLASS="ui-resizable-handle ui-resizable-se  Resize-DIV-Handle-SE">
</DIV>

Grüße, Ralf