关于在scalajs中使用Fomantic UI (原名Semantic UI)

最新推荐文章于 2024-05-11 09:57:38 发布

qq_41617659

最新推荐文章于 2024-05-11 09:57:38 发布

阅读量296

点赞数

分类专栏： scalajs 文章标签： ui

本文链接：https://blog.csdn.net/qq_41617659/article/details/115401974

版权

scalajs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该博客介绍了如何在Scala.js项目中利用binding.scala库结合Jquery来有效支持FomanticUI，创建交互式的下拉菜单、日历、手风琴和复选框组件。通过引入Jquery的js方法并进行类型转换，实现了 SemanticJQuery 特性的无缝对接。

摘要由CSDN通过智能技术生成

binding.scala 暂无好用的UI框架，但binding.scala对于基于Jquery的Fomantic UI和bootstrap等支持度较好，但正常使用需要引入Jquery中的一些js 方法。实现路径如下：

引入Jquery 的js方法

import org.querki.jquery._

import scala.scalajs.js

// SemanticUI 的隐式转换
object FomanticUI
{
  @js.native
  trait SemanticJQuery extends JQuery {
    def dropdown(params: js.Any*): SemanticJQuery = js.native
    def calendar(params: js.Any*): SemanticJQuery = js.native
    def accordion(params: js.Any*): SemanticJQuery = js.native
    def checkbox(params: js.Any*): SemanticJQuery = js.native
  }

  implicit def jq2semantic(jq: JQuery): SemanticJQuery = jq.asInstanceOf[SemanticJQuery]
}

在组件中使用

import FomanticUI.jq2semantic

$(".ui.dropdown").dropdown(literal(on="hover",clearable= true))
    $("#rangestart").calendar(literal(endCalendar= $("#rangeend")))
    $("#rangeend").calendar(literal(startCalendar= $("#rangestart")))
    $(".ui.accordion").accordion(literal(behavior="refresh", exclusive=false))