Question

JQuery和Java Script中提供了各种Image裁剪工具。我尝试将这些工具中的任何一个与Richfaces应用程序集成。自从出现jquery冲突后，我转移到了YUI，它工作正常。但是我无法将坐标值捕获到托管bean。我需要捕获坐标，它应该是持久的。这是代码示例。

<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>

任何想法？

Answer 1

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

Richfaces中的图像裁剪

1 个答案: