Question

我正在使用此jQuery modal library进行模态对话框。使用Scala.js，如何调用相同的Javascript $.modal.close()来关闭Scala中的模式对话框？感谢

更新＃1

将https://github.com/jducoeur/jquery-facade与https://github.com/jducoeur/jsext一起使用我创建了这些样板来配置模态对话框，

@js.native
trait JQueryModal extends JQuery {
 def modal(params: JQueryModalOptions): Nothing = js.native
}

@js.native
trait JQueryModalOptions extends js.Object
object JQueryModalOptions extends JQueryModalOptionsBuilder(noOpts)
class JQueryModalOptionsBuilder(val dict: OptMap) extends JSOptionBuilder[JQueryModalOptions, JQueryModalOptionsBuilder](new JQueryModalOptionsBuilder(_)) {

Answer 1

在预期的呼叫网站$.modal.close()中，我们可以看到modal是＆＃34;静态＆＃34;的属性。 $的部分内容，因此您应该使用JQueryStatic来代替JQuery。 JQueryStatic的类型为$，而JQuery是$(...)返回的内容类型。

此外，modal字段可以与嵌套方法一起使用（如在close()中）或作为函数调用本身（如在$.modal(...)中）。因此，最好将其建模为特征，其中包括apply方法。

@js.native
trait JQueryModalStatic extends js.Object {
  def apply(params: JQueryModalOptions): Unit = js.native

  def close(): Unit = js.native
}

implicit class JQueryStaticToModalStatic(private val jQuery: JQueryStatic.type)
    extends AnyVal {

  @inline def modal: JQueryModalStatic =
    jQuery.asInstanceOf[js.Dynamic].modal.asInstanceOf[JQueryModalStatic]
}

当隐式类在范围内（已导入）时，这允许同时调用$.modal(...)（由apply方法定义提供）和$.modal.close()。

Answer 2

在我的示例中，我可以向您展示如何使用Semantic-UI模式执行此操作。

我使用这个JQuery外观："be.doeraene" %%% "scalajs-jquery" % "0.9.1"

然后我使用猴子修补＆＃39;：

object SemanticUI {

  // Monkey patching JQuery
  @js.native
  trait SemanticJQuery extends JQuery {
    def modal(params: js.Any*): SemanticJQuery = js.native
  }

  // Monkey patching JQuery with implicit conversion
  implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
}

在代码中你可以使用它：

import org.scalajs.jquery.jQuery
import SemanticUI.jq2semantic

<button class="ui basic icon button"
              onclick={_: Event =>
                setTimeout(200) {
                  jQuery(".ui.modal").modal("show")
                }
              }>open dialog</button>

如何在scala.js中调用$ .modal.close（）

更新＃1

2 个答案: