Jquery Richfaces中的图像裁剪_Jquery_Jsf_Yui_Richfaces

Jquery Richfaces中的图像裁剪

jquery jsf

Jquery Richfaces中的图像裁剪,jquery,jsf,yui,richfaces,Jquery,Jsf,Yui,Richfaces,JQuery和Java脚本中提供了各种图像裁剪工具。我尝试将这些工具中的任何一个与Richfaces应用程序集成。由于jquery冲突的出现，我搬到了YUI，它工作得很好。但是我无法捕获托管bean的坐标值。我需要捕获坐标，并将其保存。下面是代码示例 <style type="text/css" media="screen"> #results { border: 1px solid black; height: 83px;

JQuery和Java脚本中提供了各种图像裁剪工具。我尝试将这些工具中的任何一个与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>


#结果{
边框：1px纯黑；
高度：83px；
宽度：125px；
位置：相对位置；
溢出：隐藏；
}
#结果img{
位置：绝对位置；
顶部：-20px；
左：-20px；
}
（功能（）{
var Dom=YAHOO.util.Dom，
Event=YAHOO.util.Event，
结果=空；
Event.onDOMReady（函数（）{
results=Dom.get（'results'）；
var crop=newyahoo.widget.imagecrapper（'yui_img'{
initialXY:[20,20]，
关键词：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'；
get（'t'）.innerHTML=region.top；
get（'l'）.innerHTML=region.left；
get（'h'）.innerHTML=region.height；
get（'w'）.innerHTML=region.width；
});
});
})();
函数getValue（）
{
警惕（“内部”）；
//警报（document.getElementById（'h'）.innerHTML）
}


身高：（91）
宽度：（150）
顶部：（20）
左：（20）

有什么想法吗？

Richfaces与jQuery没有冲突。您可以使用

是，我接受。这就是jQuery.noConflict（）的目的。我需要获得服务器组件的坐标值，然后将其传递给托管bean。这里只有我面对的问题。我不能得到那些值。