1

我不太使用 javascript，但我正在尝试使用 GWT Bootstrap 项目中的模态框进行拖动。所以我有一个 GWT 项目，我有一个入口点模块。我在文档中添加了一个模态对话框并给它一个标题。然后我尝试从该小部件上的 jQuery UI 框架调用可拖动方法。因为它只是一个 div，所以一切都应该工作。

我的第一个问题是<script>标签中的内容在元素被添加到 DOM 之前就已经运行了。所以我把它移到notifyHostPage()函数中，并希望从那里调用它。但是 jQuery UI 在第一次退出标签后似乎会从页面中卸载自己。我已经包含了代码来显示我尝试过的内容，以及它产生的输出。这真的很疯狂。

我尝试将 移至文件<scripts>下方nocache.js，我尝试将它们放在 gwt.xml 中，但由于超级开发模式或其他任何它不会让我这样做的原因。我尝试使用document.write()在notifyHostPage()函数中添加脚本。我已经尝试将类添加ui-draggable到模式对话框中，但是因为 jQuery UI 消失了，这也不起作用。我尝试过使用本地资源和 CDN。我有点不知所措。

模块.html

<script type="text/javascript" language="javascript" src="module/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="module/module.nocache.js"></script>

<script type="text/javascript">
  $(function() {
    if (jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
  });
  function startDragging() {
    if (jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
    $("#myModal").draggable({
      handle: ".modal-header"
    }); 
  };
</script>

入口点模块

  public native void notifyHostPage() /*-{
    if ($wnd.jQuery.ui) {
      // UI loaded
      console.log("yes");
      console.log(jQuery.ui);
    } else {
      console.log("no");
    }
    $wnd.startDragging();
  }-*/;

输出

yes
Object
  accordion: function ( options, element ) {
  autocomplete: function ( options, element ) {
  button: function ( options, element ) {
  buttonset: function ( options, element ) {
  datepicker: Object
  ddmanager: Object
  dialog: function ( options, element ) {
  draggable: function ( options, element ) {
  droppable: function ( options, element ) {
  hasScroll: function ( el, a ) {
  ie: false
  intersect: function (draggable, droppable, toleranceMode) {
  keyCode: Object
  menu: function ( options, element ) {
  mouse: function ( options, element ) {
  plugin: Object
  position: Object
  progressbar: function ( options, element ) {
  resizable: function ( options, element ) {
  selectable: function ( options, element ) {
  slider: function ( options, element ) {
  sortable: function ( options, element ) {
  spinner: function ( options, element ) {
  tabs: function ( options, element ) {
  tooltip: function ( options, element ) {
  version: "1.10.1"
  __proto__: Object
no
no

最终解决方案：

我已经更新了我的文件：

入口点.java

public class RecondoHISModern implements EntryPoint {
  final RecondoHISServletInterfaceAsync recondoHIS = GWT.create(RecondoHISServletInterface.class);
  public void onModuleLoad() {
    loadScripts();
  }
  private void loadScripts() {
    // ScriptInjector.fromString("public/js/jquery-ui-1.10.4.custom.min.js").inject();
    // ScriptInjector.fromString("public/js/nprogress.js").inject();
    List<String> scripts = Arrays.asList( //"//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js",
                                          "//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js",
                                          "//cdnjs.cloudflare.com/ajax/libs/nprogress/0.1.2/nprogress.min.js");
    injectScriptsInOrder(scripts);
  }

  private void injectScriptsInOrder(final List<String> scripts) {
    if (scripts.size() > 0) {
      ScriptInjector.fromUrl(scripts.get(0))
      .setRemoveTag(false)
      .setWindow(ScriptInjector.TOP_WINDOW)
      .setCallback(new Callback<Void, Exception>() {

        @Override
        public void onFailure(Exception reason) {
          GWT.log("The script " + scripts.get(0) + " did not install correctly");
        }

        @Override
        public void onSuccess(Void result) {
          GWT.log("The script " + scripts.get(0) + " installed correctly");
          injectScriptsInOrder(scripts.subList(1, scripts.size()));
        }
      }).inject();
    } else {
      createModal();
    }
  }

  public void createModal() {
    Modal modal = new Modal();
    modal.setTitle("Java Created Modal");
    modal.setClosable(true);
    ModalBody modalBody = new ModalBody();
    modalBody.add(new Span("Create in Java Code!"));

    ModalFooter modalFooter = new ModalFooter();
    modal.add(modalBody);
    modal.add(modalFooter);

    modal.setId("myModal");
    modal.show();
    draggable();
  }

  private native void draggable() /*-{
    $wnd.jQuery("#myModal").draggable({
      handle: ".modal-header"
    });
  }-*/;
}

起初它在 modal.show() 中的这个函数上崩溃了；

private native void modal(final Element e, final String arg) /*-{
    $wnd.jQuery(e).modal(arg);
}-*/;

但后来我意识到也许我不应该加载 jQuery 两次，所以我从 ScriptInjector 列表中删除了 jQuery，一切都开始正常工作了！

4

1 回答 1

2

您不应该通过<script>HTML 文件中的标签加载 JS 依赖项。通过或更好地使用ScriptInjector在模块.gwt.xml文件中指定它们以与 SuperDevMode 兼容。<script>

为您的模块创建一个EntryPoint并在那里注入 JS 依赖项。看看我们在GwtBootstrap3项目中是如何做到的。由于您使用的是 GwtBootstrap3，因此您不需要注入 jQuery。这将由 GwtBootstrap3 完成。只需注入 jQuery UI 并确保指定你<entry-point>的<inherits>.

解决此问题后，您应该能够从演示者运行类似的内容：

private native void draggable() /*-{
   var $modal = $wnd.jQuery("#myModal");
   $modal.draggable(...);
}-*/;
于 2014-04-24T09:45:14.323 回答