2012-07-11 28 views
12

köşelerinde kutu tutamaçları ile yeniden boyutlandırma, kırpma alanını seçtikten sonra, kutu tutamaçları köşelere sahip bir div görüntülenir.<a href="http://deepliquid.com/content/Jcrop_Manual.html" rel="noreferrer">Jcrop</a> içinde

kutu kulpları bu tip oluşturabileceği herhangi jQuery eklentisi var mı? o tüm sınır var aracılığıyla eleman boyutlandırılabilir yapmak için

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

Kullanım "kolları" parametresi:

+0

kolları CSS vardır! Eklentiye bağlanan kimlikleri ile. Birini kendin yapmak kolay olacak. Sadece jcrops CSS dosyasını örnek olarak – ppumkin

cevap

18

jQuery UI'sini yukarıda belirtildiği gibi yeniden boyutlandırmayı kullanabilirsiniz. Hatta senin için bir keman kuruyorum!

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

Güzel çalışma @Randy. İşte daha eksiksiz bir örnek, başladığınız şeyi bitirin: http://jsfiddle.net/j2JU6/440/ – Yarin

+0

teşekkürler, mükemmel adamlar çalışır – rusllonrails

2

jQuery UI Resizable eklentisini kullanabilirsiniz.

+0

kullanın. Bu cevap iyi ama - "Kutu Tutamaçlarını" CSS kullanarak kendiniz eklemeniz gerekiyor. Zor değil. – ppumkin