2010-12-11 37 views
0

Il existe différents outils de recadrage d'image disponibles dans JQuery et Java Script. J'essaie d'intégrer n'importe lequel de ces outils avec l'application Richfaces. Depuis le conflit jquery surgit j'ai déménagé à YUI qui fonctionne bien. Mais je ne peux pas attraper la valeur des coordonnées au bean géré. J'ai besoin de capturer les coordonnées et il devrait être persisté. Voici l'exemple de code.Recadrage d'image dans 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> 

des idées?

Répondre

0

Richfaces n'est pas en conflit avec jQuery. Vous pouvez utiliser jQuery.noConflict()

+0

Oui J'accepte. C'est le but de jQuery.noConflict(). J'ai besoin d'obtenir les valeurs de coordonnées au composant de serveur, puis le prendre au bean géré. Ici seulement je suis confronté à la question. Je ne peux pas obtenir ces valeurs. – undisputed