从GWT调用JQuery函数 [英] Calling JQuery function from GWT
问题描述
我开始一个项目使用GWT，设计师团队使用HTML和JQuery创建了一个原型。我真的在使用UIBinder'重建'UI。我的问题是应用程序有一个使用JQuery的下拉菜单...它不工作
我到目前为止尝试的是我在UIBinder XML中使用HTMLPanel并插入菜单中，我保存了.js文件，并在HTML文件中引用它们，希望这些操作能够被拿起......但是没有运气。
这是菜单。 ui.xml，菜单显示，但没有鼠标悬停
<！DOCTYPE ui：UiBinder SYSTEMhttp：// dl .google.com / GWT / DTD / xhtml.ent>
< ui：UiBinder xmlns：ui =urn：ui：com.google.gwt.uibinderxmlns：g =urn：import：com.google.gwt.user.client.ui>
< g：HTMLPanel>
<！ - menu - >
< ul id =menu>
< li class =home>< a href =＃>< span> Accueil< / span>< / a>< / li>
< li class =configuration>
< div class =submenu>
< div class =group>
< ul>
< li>
< a href =＃> Fiches de configuration< / a>
< ul>
< li>< a href =＃> Organisme< / a>< / li>
< li>< a href =＃> Groupeopérationnel< / a>< / li>
< li>< a href =＃>Unitéopérationnelle< / a>< / li>
< li>< a href =＃> Immeuble< / a>< / li>
< / ul>
< / li>
< / ul>
< / div>
< / div>
< / li>
< li class =audit>< a href =＃>< span>审核< / span>< / a>< / li>
< li class =result>< a href =＃>< span>结果< / span>< / a>< / li>
< li class =scenario>< a href =＃>< span>Scénarios< / span>< / a>< / li>
< li class =document>< a href =＃>< span>文档< / span>< / a>< / li>
< / ul>
<！ - menu.end - >
< / g：HTMLPanel>
一个单独的文件common.js
$（'＃menu'）。find（'submenu'）。each（function（） {
alert（inside）;
var totalWidth = 0;
$（this）.children（）。each（function（）{
totalWidth + = $（this ）.outerWidth（）;
}）。end（）。css（{
'display'：'none'，
'width'：totalWidth
}）;
$）}。end（）。css（{
'overflow'：'visible'
}）;
入口点
public class M3T implements EntryPoint {
public void onModuleLoad（）{
Menu Menu = new Menu（）;
RootPanel.get（menuwrapper）。add（menu）;
在HTML中，我有一个div，其中菜单是插入
< script src =js / jquery-1.6.1.min.jstype =text / javascript >< /脚本>
< script src =js / jquery.lib.min.jstype =text / javascript>< / script>
< script src =js / common.jstype =text / javascript>< / script> ...
< div id =menuwrapper> < / DIV>
是否有任何方法可以在不使用GQuery或JSNI的情况下工作
谢谢
解决方案我尝试了elvispt的解决方案，它的工作原理。在JSNI代码中，我必须用 $ wnd.jQuery 替换 $ ，否则它不会编译。
我也尝试了第二种解决方案，我决定实现它：不是在菜单中使用包装，而是在Menu类中覆盖onAttach（），并调用bind
import com.google.gwt.core.client.GWT;
public class Menu extends {
private static MenuUiBinder uiBinder = GWT.create（MenuUiBinder.class）;
界面MenuUiBinder扩展了UiBinder< Widget，Menu> {}
public Menu（）{
initWidget（uiBinder.createAndBindUi（this））;
@Override
public void onAttach（）{
super.onAttach（）;
bind（）;
private static void bind（）/ * - {
$ wnd.jQuery（'＃menu'）。find（'。submenu'）。each（function （）{
alert（inside）;
var totalWidth = 0;
$ wnd.jQuery（this）.children（）。each（function（）{
totalWidth + = $ wnd.jQuery（this）.outerWidth（）;
}）。end（）。css（{
'display'：'none'，
'width'：totalWidth
}）;
}）。end（）。css（{
'overflow'：'visible'
}）;
} - * /;
}
再次感谢
I'am starting a project Using GWT, the designer team made a prototype using HTML and JQuery. I 'am actualy using UIBinder to 'rebuild' the UI. My problem is the application has a drop down menu that use JQuery... and it's not working
What I tried so far is I used a HTMLPanel in UIBinder XML and insert the menu, I keeped the .js file and reference them in the HTML file hoping that the actions will be picked up... but no luck.
This is menu.ui.xml, the menu is displayed but no mouse over
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<!-- menu -->
<ul id="menu">
<li class="home"><a href="#"><span>Accueil</span></a></li>
<li class="configuration">
<g:Anchor ui:field="configurationButton" href="#">
<span>Configuration</span></g:Anchor>
<div class="submenu">
<div class="group">
<ul>
<li>
<a href="#">Fiches de configuration</a>
<ul>
<li><a href="#">Organisme</a></li>
<li><a href="#">Groupe opérationnel</a></li>
<li><a href="#">Unité opérationnelle</a></li>
<li><a href="#">Immeuble</a></li>
</ul>
</li>
</ul>
</div>
</div>
</li>
<li class="audit"><a href="#"><span>Audit</span></a></li>
<li class="result"><a href="#"><span>Résultats</span></a></li>
<li class="scenario"><a href="#"><span>Scénarios</span></a></li>
<li class="document"><a href="#"><span>Documents</span></a></li>
</ul>
<!-- menu.end -->
</g:HTMLPanel>
the JQuery code which is in a separated file common.js
$('#menu').find('submenu').each(function(){
alert("inside");
var totalWidth = 0;
$(this).children().each(function(){
totalWidth += $(this).outerWidth();
}).end().css({
'display' : 'none',
'width' : totalWidth
});
}).end().css({
'overflow' : 'visible'
});
EntryPoint
public class M3T implements EntryPoint {
public void onModuleLoad() {
Menu menu = new Menu();
RootPanel.get("menuwrapper").add(menu);
}
}
In the HTML I have a div where the menu is inserted
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.lib.min.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script> ...
<div id="menuwrapper"> </div>
Is there any way to make it work without using GQuery or JSNI
Thanks
解决方案 I tried the solution by elvispt, it works. In the JSNI code, I had to replace $ with $wnd.jQuery because otherwise it doesn't compile .
I tried also a second solution which I decide to implement : Instead of using a wrapper around Menu, I overided onAttach() in the Menu class it self and call bind
import com.google.gwt.core.client.GWT;
public class Menu extends Composite {
private static MenuUiBinder uiBinder = GWT.create(MenuUiBinder.class);
interface MenuUiBinder extends UiBinder<Widget, Menu> {}
public Menu() {
initWidget(uiBinder.createAndBindUi(this));
}
@Override
public void onAttach() {
super.onAttach();
bind();
}
private static native void bind() /*-{
$wnd.jQuery('#menu').find('.submenu').each(function(){
alert("inside");
var totalWidth = 0;
$wnd.jQuery(this).children().each(function(){
totalWidth += $wnd.jQuery(this).outerWidth();
}).end().css({
'display' : 'none',
'width' : totalWidth
});
}).end().css({
'overflow' : 'visible'
});
}-*/;
}
Thanks again
这篇关于从GWT调用JQuery函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
