jquery-ui-resizable-Links-unten Griff, um die Größe

Bin ich mit dem jquery-ui-resizable-plugin in mein Projekt.

Standardmäßig, wenn Sie ein DOM-Objekt jquery-ui-resizable-die resizable-handle erscheint in der rechten unteren Ecke, muss ich den re-sizable Griff auf der linken unteren Ecke.

--- EDIT ---

Eins noch, sollte es nicht re-sizable mit dem rechten Rand sollte aber re-sizable mit der linken Grenze.

jquery-ui-resizable-Links-unten Griff, um die Größe

InformationsquelleAutor der Frage Imran Naqvi | 2011-07-29

  1. 33

    Sollten Sie die handles

    supported: { n, e, s, w, ne, se, sw, nw }.

    Damit schaffen Sie die Griffe auf der Seite, die Sie angegeben. Die Default-Werte sind

    'e, s, se'

    Code-Beispiele

    Initialisieren eine veränderbare mit den Griffen option angegeben.

    $( ".selector" ).resizable({ handles: 'n, e, s, w' });

    Get-oder set-die Griffe-option, nach der init.

    //getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );

    InformationsquelleAutor der Antwort Talha Ahmed Khan

  2. 9

    Zusätzlich zu Ahmed ' s Antwort:
    jQueryUI hat kein Symbol für die sw-handle und auch nicht für eine icon-Klasse für die sw-Griff. Sie können verwenden einige CSS fügen Sie ein Symbol:

    #resizable .ui-resizable-sw{background:url(path/to/custom_icon.gif) no-repeat;}

    InformationsquelleAutor der Antwort Dr.Molle

  3. 6

    Tun, re-sizing von allen Seiten folgenden code kann auch verwendet werden,

         var resizeOpts = { 
      handles: "all" ,autoHide:true
    }; 
$( ".selector" ).resizable(resizeOpts);

    und autoHide gleich true bedeutet, dass grip-Symbol wird automatisch ausgeblendet, wenn der Maus-Zeiger wird weggenommen aus dem dom-Objekt.

    InformationsquelleAutor der Antwort Ali Nouman

  4. 3

    War ich auf der Suche nach dieser SW-Lösung. Was musste ich tun, um es Arbeit ist, fügen Sie das ui-icon-Klassen, um die erzeugte div-Element direkt nach dem Aufruf resizable().

    $( "#wproof" ).resizable({handles: "w, sw, s"});
$('.ui-resizable-sw').addClass('ui-icon ui-icon-gripsmall-diagonal-sw');

    Dann definieren Sie das Symbol, indem es in images/ui-icons_222222_256x240.png
    Es ist ein kleines 9X9-Bereich an der Unterseite. Machen Sie eine .png-Datei ( mit einer Drehung ! ), und fügen Sie Stil, um die gegebene Klasse :

    <style>
.ui-icon-gripsmall-diagonal-sw { 
    background-image: url(your 9x9 icon.png); }
.ui-resizable-sw {
    bottom: 1px;
    left: 1px;
}
</style>

    Unten und Links gesetzt werden -5px in jquery-ui-css -

    InformationsquelleAutor der Antwort adamreith

  5. 0

    Scheint, wie die standard-cursor-Eigenschaft ist, was verwendet wird, von den UI-CSS -

    .ui-resizable-sw {
cursor: sw-resize;
height: 7px;
width: 100%;
top: -5px;
left: 0;
}

    Scheint es auch, dass der cursor nicht angezeigt und veränderbare ist nicht aktiviert für die Seite des Elements, der verwendet wird für die Positionierung - zum Beispiel: ein div positioniert Verwendung left:20px top:20px nicht aktivieren Größenänderung auf die Links-und top-Seiten

    Entdeckte ich diese nach dem hinzufügen alle Griffe, aber dann werden Sie alle nie auftauchte !
    Update: Anscheinend gibt es einige problem in meiner app, die verursacht mein problem. Tests auf JSFiddle alle Griffe funktionieren wie erwartet mit der gleichen version von JQuery.....argggggg

    InformationsquelleAutor der Antwort alQemist

Schreibe einen Kommentar