在Richfaces中裁剪图像

在JQuery和Java Script中有各种图像裁剪工具可用。我尝试将这些工具与Richfaces应用程序集成。由于jQuery的冲突出现，我转移到YUI工作正常。但我不能捕获到托管bean的坐标值。我需要捕获坐标，它应该被保留。这是代码示例。在Richfaces中裁剪图像

<style type="text/css" media="screen"> 
    #results { 
     border: 1px solid black; 
     height: 83px; 
     width: 125px; 
     position: relative; 
     overflow: hidden; 
    } 
    #results img { 
     position: absolute; 
     top: -20px; 
     left: -20px; 
    } 
</style> 

<script> 
(function() { 
    var Dom = YAHOO.util.Dom, 
     Event = YAHOO.util.Event, 
     results = null; 

    Event.onDOMReady(function() { 
      results = Dom.get('results');  
      var crop = new YAHOO.widget.ImageCropper('yui_img', { 
       initialXY: [20, 20], 
       keyTick: 5, 
       shiftKeyTick: 50 
      }); 
      crop.on('moveEvent', function() { 
       var region = crop.getCropCoords(); 
       results.firstChild.style.top = '-' + region.top + 'px'; 
       results.firstChild.style.left = '-' + region.left + 'px'; 
       results.style.height = region.height + 'px'; 
       results.style.width = region.width + 'px'; 
       Dom.get('t').innerHTML = region.top; 
       Dom.get('l').innerHTML = region.left; 
       Dom.get('h').innerHTML = region.height; 
       Dom.get('w').innerHTML = region.width; 
      }); 
    }); 
})(); 


function getValue() 
{ 
alert("Inside"); 
//alert(document.getElementById('h').innerHTML) 
} 

</script> 


<rich:modalPanel id="addProductLinksModalPanel" autosized="true" 
domElementAttachment="parent" 
onshow="javascript:scroll(0, 0);" 
rendered="true" width="850" height="300" minWidth="850" minHeight="300" > 
<f:facet name="header"> 
    <a4j:outputPanel ajaxRendered="true"> 
    <h:panelGroup> 
    <h:outputText 
    value="Add Product Links " /> 
    </h:panelGroup> 
    </a4j:outputPanel> 
</f:facet> 
<f:facet name="controls"> 
    <h:panelGroup> 
    <h:graphicImage style="cursor:pointer;border:none;" 
    id="addProductLinksCreateCloseModalHideImgLink" 
    value="/skins/images/close.png" /> 
    <rich:componentControl for="addProductLinksModalPanel" 
    attachTo="addProductLinksCreateCloseModalHideImgLink" operation="hide" 
    event="onclick" id="addProductLinksModalPanelHide" /> 
    </h:panelGroup> 
</f:facet> 
<rich:spacer id="addProductLinksCreateCloseEmptySpacer" height="10px" /> 
<h:form id="addProductLinksCreateForm"> 
    <jsp:include page="/regions/lovInnerTopRegion.jsp" flush="false" /> 

    <table width="100%"> 

    <tr> 
    <td align="right"> 
    <a4j:commandButton styleClass="btnGreen" value="Add Product" 
     id="addProductLinksCreateBottomSaveBtn" 
     action="#{backing_addProductLinksModal.addProduct}" 
     reRender="cmsSiteViewMainForm" 
     onclick="disableButtonAndShowLoadingInfoWindow(this.id);" 
     oncomplete="enableButtonAndHideLoadingInfoWindow(this.id);#{rich:component('addProductLinksModalPanel')}.hide();#{rich:component('productLOVModalPanel')}.show();" /> 

    </td> 
    </tr> 

<body class="yui-skin-sam"> 

<tr> 

<p><img src="/app/css/images/apple.jpg" id="yui_img" height="333" width="345"></p> 

<div id="results"><img src="/app/css/images/apple.jpg"></div> 
<ul> 

    <li>Height: (<span id="h">91</span>)</li> 
    <li>Width: (<span id="w">150</span>)</li> 
    <li>Top: (<span id="t">20</span>)</li> 
    <li>Left: (<span id="l">20</span>)</li> 

</ul> 
<input type="button" onclick="getValue()" value="click"/> 
</tr> 

    </table> 

</h:form> 

</rich:modalPanel>

有什么想法？

来源

2010-12-11 undisputed

Richfaces不与jQuery冲突。您可以使用jQuery.noConflict()

来源

2010-12-11 14:56:16 Bozho

是的，我接受。这是jQuery.noConflict（）的目的。我需要将坐标值获取到服务器组件，然后将其传递给托管bean。这里只有我面临这个问题。我无法获得这些价值。 – undisputed 2010-12-13 04:45:52

在Richfaces中裁剪图像

回答

相关问题