2012-07-11 4 views
12

in Jcrop, nach der Auswahl des Zuschneidebereichs erscheint ein div mit Boxgriffen in den Ecken.Größe ändern Element mit Boxgriffen in den Ecken

Gibt es eine jQuery-Plugin, das diese Art von Box Griffe bauen kann?

+0

Die Griffe sind CSS! Mit IDs, die in das Plugin eingebunden sind. Sich selbst zu machen wird einfach sein. Verwenden Sie einfach jcrops CSS-Datei als Beispiel – ppumkin

Antwort

18

Sie können die Größe von jQuery UI wie oben angegeben ändern. Ich stelle sogar eine Geige für dich auf!

http://jsfiddle.net/digitalaxis/j2JU6/

JQuery

$('#element').resizable({ 
    handles: { 
    'ne': '#negrip', 
    'se': '#segrip', 
    'sw': '#swgrip', 
    'nw': '#nwgrip' 
    } 
}); 

HTML

<div class="ui-resizable-handle ui-resizable-nw" id="nwgrip"></div> 
<div class="ui-resizable-handle ui-resizable-ne" id="negrip"></div> 
<div class="ui-resizable-handle ui-resizable-sw" id="swgrip"></div> 
<div class="ui-resizable-handle ui-resizable-se" id="segrip"></div> 

CSS

#elementResizable { 
    border: 1px solid #000000; 
    width: 300px; 
    height: 40px; 
    overflow: hidden; 
} 
#nwgrip, #negrip, #swgrip, #segrip, #ngrip, #egrip, #sgrip, #wgrip { 
    width: 10px; 
    height: 10px; 
    background-color: #ffffff; 
    border: 1px solid #000000; 
} 
#segrip { 
    right: -5px; 
    bottom: -5px; 
} 
+3

Gute Arbeit @Randy. Hier ist ein vollständigeres Beispiel, das beendet, was Sie angefangen haben: http://jsfiddle.net/j2JU6/440/ – Yarin

+0

danke, funktioniert perfekt Jungs – rusllonrails

2

können Sie die jQuery UI Resizable Plugin verwenden:

http://jqueryui.com/demos/resizable/

Verwenden Sie die "Griffe" Parameter Ihr Element der Größe veränderbar machen durch gesamte Grenze ist.

+0

Again .. diese Antwort ist gut, aber Sie müssen die "Box Handles" Ihre selbst mit CSS hinzufügen. Es ist nicht schwer. – ppumkin