个人中心
gpt4 book ai didi

twitter-bootstrap - 榆树中的 Bootstrap 下拉菜单

转载 作者：行者123 更新时间：2023-12-04 07:46:21 26 4
gpt4 key购买 nike

我对 Elm 很陌生(以及一般的前端开发)，所以我希望我的问题不是太明显，但我想知道如何在 Elm 中重用 UI 框架，如 Bootstrap 3，包括 JS。

更准确地说，我今天的目标是或多或少地复制 the Bootstrap's Navbar documentation 中的示例。 , 其中一个 下拉按钮 包含在 中导航栏 .到目前为止，使用 Html和 Html.Attributes ，我能够正确构建页面并为其设置样式，但实际的下拉行为不起作用:当我单击插入符号按钮时，什么也没有发生。我猜这是因为连接到下拉列表的 Javascript 没有被执行。

现在，我的问题是:

  • 如何从 Elm 代码重用下拉菜单等组件，包括其相关的 JS？
  • 在 Elm 中执行此操作的首选(更惯用的)方法是什么？我见过像 circuithub's elm-bootstrap-dropdown 这样的包，我知道这是在 Elm 中完全重写相同的 JS 功能，所以我想知道:Elm 是从头开始重写所有内容的方式吗？我会对此感到非常惊讶...

    • 谢谢你们

    最佳答案

    我目前在现实生活中的 Elm 项目中广泛使用 Bootstrap，它运行良好。

    我认为您不想通过复制 Elm 中的内容将其过多地集成到 Elm 中。根据我的经验，您将永远落后于当前的 Bootstrap 版本一(或两)步。

    虽然设置所有内容可能有点挑战，但一旦完成，它就会完美运行。为了让您继续前进，我发布了我的 index.html我用来加载 Elm 应用程序的文件。这是一个带有客户端路由的单页应用程序，这就是我发送 window.location.pathname 的原因。进入应用程序。它与使用 Bootstrap 无关。我包含它是因为我真的想或多或少地“按原样”发布文件。

    基本上，在我们加载和启动 Elm 应用程序之前，我们只是将 Bootstrap CSS 和 JS 从内容分发网络直接加载到浏览器中。
    index.html :

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

      <title>My Awesome Application Title</title>

      <!-- Bootstrap: Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

      <!-- Bootstrap: Optional theme -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

      <!-- Application styles -->
      <!-- link rel="stylesheet" href="normalize.css" -->
      <!-- link rel="stylesheet" href="skeleton.css" -->
      <link rel="stylesheet" href="app.css">

      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
      <!-- Bootstrap: jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

      <!-- Bootstrap: Latest compiled and minified JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

      <!-- Application: Javascript -->
      <!-- script type="text/javascript" src="vendor.js"></script -->
      <script type="text/javascript" src="native.js"></script>
      <script type="text/javascript" src="app.js"></script>

      <!-- Fire up the Elm application -->
      <script type="text/javascript">
        // Pass along the current pathname as "path" to the Elm application.
        //
        // This way the frontend router can decide what "page" to display.
        //
        var app = Elm.fullscreen(Elm.App, {path: window.location.pathname});

        // Alternatively, embed the elm app in an element like this:
        // var div = document.getElementById('myDiv');
        // Elm.embed(Elm.Index, div);
      </script>
    </body>
    </html>

    一旦我们启动了 Elm 应用程序，它就是一种生成 Bootstrapified HTML 和 CSS 的简单方式，就像在任何其他使用 Bootstrap 的项目中一样。

    为了让您了解如何实现导航栏，这里是我在 Elm 中的导航栏代码的简单摘录: 
    -- Navigation bar ------------------------------------------------------------
    --
    -- TODO: Adapt to more responsive design. Stack navigation in mobile-friendly
    --       layout and minimize user/instrument information.
    --

    -- Page link buttons

    pageLinks : Context -> List Html
    pageLinks (link, model, _) =
      List.map (\p ->
        li  [ classList [ ("active", model.page == p) ] ]
            [ link (pageToRoute p) (pageName p) ]) visiblePages

    -- Dropdown menu with available options

    dropdownSelectOption : Context -> Html
    dropdownSelectOption (_, model, address) =
      let
        -- Option selection row (displayed in dropdown menu)
        iRow i =
          let
            title_ = case i.macId of
              Just macId -> macId   -- primarily use macId if available
              Nothing    -> i.uuid  -- otherwise, fallback on using the uuid
            -- Determine if the option is selected and/or online/offline
            isSelected = isActiveOption model i.uuid
          in
            li  [ title title_ ]
                [ a [ href "#", onClick address (SelectOption i.uuid) ]
                    [ text i.displayName,
                      span [ classList [("pull-right glyphicon glyphicon-remove-sign status-offline", i.status == Offline),
                                        ("pull-right glyphicon glyphicon-ok-sign status-online", i.status == Online),
                                        ("pull-right glyphicon glyphicon-question-sign status-unknown", i.status == Unknown)],
                             title (optionStatusToString i.status)
                           ] [],
                      span [ classList [("pull-right glyphicon glyphicon-eye-open selected", isSelected)],
                             title (OptionSelectedTooltip |> t)
                           ] []
                    ]
                ]
        -- Map rows on list of options
        iSelectList = List.map iRow model.options
      in
        li  [ class "dropdown", title (OptionSelectTooltip |> t) ]
            [ a [ class "dropdown-toggle",
                  href "#",
                  attribute "data-toggle" "dropdown",
                  attribute "role" "button",
                  attribute "aria-haspopup" "true",
                  attribute "aria-expanded" "false" ]
                [ OptionSelectionMenu |> tt,
                  span [ class "caret" ] []
                ],
              ul  [ class "dropdown-menu dropdown-menu-right" ]
                  (List.concat [
                    [ li [ class "dropdown-menu-label" ]
                         [ span [] [ OptionSelectLabel |> tt ] ],
                      li [ class "divider", attribute "role" "separator" ] [] ],
                    iSelectList])
            ]

    -- The complete navigation bar

    navigationBar : Context -> Html
    navigationBar ctx =
      ul  [ class "nav nav-pills pull-right" ]
         ([ (pageLinks ctx),
          [ (dropdownSelectOption ctx) ]
          ] |> List.concat)

    显然，正如您所看到的，我在此示例中没有包含很多功能(出于 IP 原因)，但它可以让您了解如何去做。 (例如 tt 函数转换为字符串，然后由 text 转换。它是一个支持不同语言的翻译模块)。

    如果您只是将 Bootstrap 内部组件保留在 Elm 之外的 JS/CSS 空间中，这一切都非常简单。根据我的经验，它并没有像建议的那样搞乱 Elm 差异算法可能是一个问题。

    祝你好运! Elm 真的是一门很棒的语言和范式，一旦你开始思考它，就可以编写前端代码。

    关于twitter-bootstrap - 榆树中的 Bootstrap 下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36737882/

    26 4 0
    文章推荐： memory-management - 如何减少Windows Azure共享网站的内存使用？
    文章推荐： memory-management - Linux 内存过量使用详情
    文章推荐： twitter-bootstrap - 如何在轮播的最后一张幻灯片上禁用按钮？
    文章推荐： twitter-bootstrap - Bootstrap 响应视频，但具有最大宽度和居中